.reels{
  --side:clamp(1.25rem,4vw,3.5rem);
  position:relative;
  background:var(--foreground);color:oklch(0.985 0 0);
  padding:clamp(3.5rem,8vh,6rem) 0 clamp(3rem,7vh,5rem);
}
.reels .kicker{color:oklch(1 0 0 / .5);}
.reels-top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;gap:clamp(2rem,5vw,4.5rem);
  padding:0 var(--side) clamp(1rem,2.5vh,1.75rem);
}
.reels h2{
  margin:0;color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.75rem);
  font-weight:600;line-height:1.05;
  letter-spacing:-.03em;text-transform:uppercase;
}
.reels h2 .dim{color:oklch(1 0 0 / .45);}
.reels-note{
  margin:0;max-width:42ch;color:oklch(1 0 0 / .6);
  font-size:clamp(.875rem,1.2vw,1rem);line-height:1.6;
}

/* --- the strip --- */
.reel-wrap{position:relative;}
.reel-rail{
  display:flex;gap:clamp(1rem,1.8vw,1.75rem);
  padding:2rem var(--side) 3.75rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reel-rail::-webkit-scrollbar{display:none;}

.reel{
  position:relative;flex:0 0 auto;
  width:clamp(15rem,21vw,20rem);
  aspect-ratio:9/16;
  scroll-snap-align:center;
  border-radius:var(--r-4xl);
  overflow:hidden;background:oklch(1 0 0 / .06);
  outline:1px solid oklch(1 0 0 / .1);
  outline-offset:-1px;
  box-shadow:0 4px 12px -2px oklch(0 0 0 / .5);
  opacity:.5;transform:scale(.94);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),
             transform .5s cubic-bezier(.16,1,.3,1),
             box-shadow .5s;
  cursor:pointer;
}
.reel.active{
  opacity:1;transform:none;
  box-shadow:0 24px 44px -14px oklch(0 0 0 / .75);
}
.reel video,.reel img.poster{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* stand-in until real footage is dropped in */
.reel-ph{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 60% at 30% 18%, oklch(.86 0 0) 0%, transparent 60%),
    linear-gradient(168deg, oklch(.82 0 0) 0%, oklch(.5 0 0) 55%, oklch(.22 0 0) 100%);
}
.reel-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, oklch(.1 0 0 / .14) 0%, transparent 40%,
    oklch(.1 0 0 / .30) 100%);
}
.reel-time{
  position:absolute;top:.875rem;right:.9375rem;
  font-size:.625rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
  color:oklch(1 0 0 / .75);
}
.reel-play{
  position:absolute;left:50%;top:50%;
  width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:9999px;border:1px solid oklch(1 0 0 / .32);
  background:oklch(1 0 0 / .14);backdrop-filter:blur(10px);
  color:#fff;opacity:0;transform:scale(.9);
  transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;z-index:2;padding:0;cursor:pointer;
}
.reel-play svg{width:1rem;height:1rem;margin-left:2px;}
/* the play overlay only appears in tap-to-play mode (mobile / reduced-motion), on the centred clip while paused */
.reel-rail.tap-mode .reel.active:not(.playing) .reel-play{opacity:1;transform:none;pointer-events:auto;}
.reel-rail.tap-mode .reel.active:not(.playing):hover .reel-play{transform:scale(1.08);}

/* replay + mute controls, shown on the centred (active) clip */
.reel-ctrls{
  position:absolute;left:.9375rem;bottom:.9375rem;z-index:2;
  display:flex;gap:.5rem;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.reel.active .reel-ctrls{opacity:1;transform:none;pointer-events:auto;}
.reel-ctrl{
  display:flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:9999px;cursor:pointer;
  border:1px solid oklch(1 0 0 / .28);
  background:oklch(0 0 0 / .4);backdrop-filter:blur(8px);
  color:#fff;transition:transform .2s,background .2s;
}
.reel-ctrl:hover{transform:scale(1.08);background:oklch(0 0 0 / .58);}
.reel-ctrl svg{width:1.0625rem;height:1.0625rem;display:block;}
.reel-mute .ico-unmuted{display:none;}
.reel-rail.sound-on .reel-mute .ico-muted{display:none;}
.reel-rail.sound-on .reel-mute .ico-unmuted{display:block;}

/* --- edge arrows --- */
.reel-nav{
  position:absolute;top:50%;z-index:3;
  width:clamp(2.75rem,3.6vw,3.5rem);height:clamp(2.75rem,3.6vw,3.5rem);
  margin-top:calc(clamp(2.75rem,3.6vw,3.5rem) / -2);
  display:flex;align-items:center;justify-content:center;
  border-radius:9999px;border:1px solid oklch(1 0 0 / .22);
  background:oklch(1 0 0 / .09);color:#fff;cursor:pointer;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 18px -8px oklch(0 0 0 / .6);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.reel-nav svg{width:1.0625rem;height:1.0625rem;}
.reel-nav:hover:not(:disabled){background:#fff;color:var(--foreground);border-color:transparent;}
.reel-nav:active:not(:disabled){transform:scale(.94);}
.reel-nav:disabled{opacity:.3;cursor:default;box-shadow:none;}
.reel-nav.prev{left:clamp(.875rem,2vw,1.75rem);}
.reel-nav.next{right:clamp(.875rem,2vw,1.75rem);}

/* fade the strip under the arrows */
.reel-wrap::before,.reel-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(3rem,7vw,7rem);
  z-index:2;pointer-events:none;
}
.reel-wrap::before{left:0;background:linear-gradient(90deg,var(--foreground),transparent);}
.reel-wrap::after{right:0;background:linear-gradient(270deg,var(--foreground),transparent);}

.reel-dots{
  display:flex;justify-content:center;gap:.4375rem;
}
.reel-dots i{
  width:.375rem;height:.375rem;border-radius:9999px;
  background:oklch(1 0 0 / .22);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.reel-dots i.on{background:#fff;width:1.125rem;}

@media (prefers-reduced-motion:reduce){
  .reel-rail{scroll-behavior:auto;}
  .reel{transition:none;}
}
@media (max-width:940px){
  .reels-top{grid-template-columns:1fr;align-items:start;gap:1.25rem;}
}
@media (max-width:620px){
  .reel{width:min(17rem,72vw);}
  .reel-nav{width:2.5rem;height:2.5rem;margin-top:-1.25rem;}
  .reel-wrap::before,.reel-wrap::after{width:2rem;}
}