/* ═══════════════════════════════════════════════════════════════
   DIRIGO — the filmstrip hero.

   Every card shares one top edge. The focused card unfurls to full height
   while its neighbours stay clipped to half, so the strip reads as a row
   of cropped frames with one whole picture standing in the middle of it.
   Focusing a card re-grades the entire backdrop to that photograph.

   Nothing here is a hard-coded pixel: a ResizeObserver measures the stage
   and every size is written back as a custom property, so the hero is
   proportionally identical on a phone and on a 4K display.
   ═══════════════════════════════════════════════════════════════ */

.reel{
  position:relative;height:100svh;min-height:34rem;width:100%;
  overflow:hidden;background:#07080a;color:#fff;
  user-select:none;isolation:isolate;
  --card-h:220px; --card-w:165px; --gap:8px;
  --pad:24px; --label:11px; --title:44px; --strip-top:50%;
}

/* ── backdrop ────────────────────────────────────────────────── */
.reel-bg{position:absolute;inset:0;z-index:0}
.reel-plate{
  position:absolute;inset:0;opacity:0;
  transition:opacity .7s cubic-bezier(.22,1,.36,1);
}
.reel-plate.on{opacity:1}
.reel-plate img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.42);
}
.reel-plate.on img{transform:scale(1.28);transition:transform 6s linear}
/* The photograph keeps its luminance and takes the slide's hue. */
.reel-plate i{position:absolute;inset:0;opacity:.22;mix-blend-mode:color}
.reel-plate u{position:absolute;inset:0;opacity:.3;mix-blend-mode:multiply}

.reel-wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.5) 100%);
}
.reel-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.22;mix-blend-mode:overlay;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── headline, sitting on the strip's top edge ───────────────── */
.reel-head{
  position:absolute;inset-inline:0;inset-block-start:0;z-index:3;
  height:var(--strip-top);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) calc(var(--label) * 2.6);
}
.reel-kicker{
  margin:0 0 auto;padding-block-start:calc(var(--label) * 7);
  font-size:var(--label);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.reel-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem clamp(1rem,2.4vw,2.4rem);width:100%}
.reel-title{
  margin:0;font-weight:800;line-height:.9;letter-spacing:-.035em;
  font-size:var(--title);
}
/* Each line wipes up from behind its own edge. */
.reel-title span{display:block;overflow:hidden}
.reel-title span b{
  display:block;font-weight:inherit;transform:translateY(110%);
  transition:transform .62s cubic-bezier(.22,1,.36,1);
}
.reel-title.lit span b{transform:none}
.reel-title.lit span:nth-child(2) b{transition-delay:.07s}

.reel-credit{
  margin:0 0 .35rem;font-size:var(--label);letter-spacing:.14em;
  color:rgba(255,255,255,.8);
}
.reel-meta{
  margin-inline-start:auto;display:flex;align-items:flex-end;gap:clamp(1rem,5vw,3rem);
}
.reel-meta span{
  font-size:var(--label);letter-spacing:.14em;white-space:nowrap;
  color:rgba(255,255,255,.8);
}

/* ── the strip ───────────────────────────────────────────────── */
.reel-strip{
  position:absolute;inset-inline:0;z-index:2;
  inset-block-start:var(--strip-top);height:var(--card-h);
  /* Pinned to LTR so the track maths never depends on the page direction. */
  direction:ltr;
}
.reel-track{display:flex;align-items:flex-start;gap:var(--gap);will-change:transform;cursor:grab}
.reel-track.drag{cursor:grabbing}
.reel-card{
  position:relative;flex:none;width:var(--card-w);
  height:calc(var(--card-h) / 2);
  padding:0;border:0;border-radius:0;overflow:hidden;
  background:rgba(255,255,255,.06);cursor:pointer;
  transition:height .55s cubic-bezier(.22,1,.36,1);
}
.reel-card.on{height:var(--card-h)}
.reel-card img{
  width:100%;height:100%;object-fit:cover;
  /* Anchored above centre so a clipped card still shows the subject. */
  object-position:50% 26%;
}
.reel-card::after{
  content:"";position:absolute;inset:0;background:#000;opacity:.12;
  transition:opacity .55s cubic-bezier(.22,1,.36,1);
}
.reel-card.on::after{opacity:0}
.reel-card{transition:height .55s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.reel-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.reel-card:hover::after{opacity:0}
.reel-card:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* ── position rail ───────────────────────────────────────────── */
.reel-rail{
  position:absolute;z-index:3;inset-inline-start:var(--pad);
  inset-block-end:calc(var(--label) * 1.8);width:min(20%,220px);
  direction:ltr;
}
.reel-rail-nums{
  display:flex;justify-content:space-between;
  font-size:var(--label);letter-spacing:.1em;color:rgba(255,255,255,.8);
  font-variant-numeric:tabular-nums;
}
.reel-rail-bar{position:relative;margin-top:.5rem;height:1px;background:rgba(255,255,255,.25)}
.reel-rail-bar i{
  position:absolute;inset-block:0;background:#fff;
  transition:left .55s cubic-bezier(.22,1,.36,1);
}

@media(prefers-reduced-motion:reduce){
  .reel-plate,.reel-plate img,.reel-card,.reel-title span b,.reel-rail-bar i{transition:none}
  .reel-plate img{transform:scale(1.28)}
  .reel-title span b{transform:none}
}

/* Portrait: the strip drops lower and the headline takes the upper half. */
@media(max-width:760px){
  .reel-head{padding-inline:var(--pad);padding-block-end:calc(var(--label) * 1.6)}
  /* The capsule header is taller in proportion here; clear it properly. */
  .reel-kicker{padding-block-start:clamp(8.5rem,16vh,11rem)}
  .reel-meta{margin-inline-start:0;width:100%;gap:1.2rem}
  .reel-rail{width:44%}
}