/* =====================================================================
   KINEPOLIS — homepage redesign
   Design system: tokens → base → components → motion → responsive
   Brand sampled from kinepolis.nl: royal blue #24447f, petrol #0a5b7f,
   coral accent #ff4f2e, Montserrat type, white wordmark.
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  /* surfaces — deep cinema blue-black */
  --ink:#070b16;
  --ink-2:#0a1120;
  --panel:#0e1728;
  --panel-2:#122036;
  --navy:#16294a;
  --line:rgba(226,236,255,.10);
  --line-2:rgba(226,236,255,.16);

  /* brand */
  --blue:#2a4d8f;          /* lifted from #24447f for contrast on dark */
  --blue-deep:#24447f;
  --petrol:#0a5b7f;
  --petrol-lite:#3d92b6;
  --coral:#ff4f2e;         /* the electric accent */
  --coral-2:#ff7a45;
  --bulb:#ffd479;          /* marquee bulb warm */
  --bulb-glow:rgba(255,196,102,.55);

  /* text */
  --text:#eef3fb;
  --muted:#9fb0cb;
  --muted-2:#6f83a3;

  /* type */
  --display:'Oswald',Impact,'Arial Narrow Bold',sans-serif;
  --sans:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* rhythm */
  --wrap:1280px;
  --gap:clamp(18px,3.2vw,40px);
  --radius:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.02}
p{margin:0}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:2px}
::selection{background:var(--coral);color:#fff}

/* film-grain + vignette canvas */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 15% -10%,rgba(42,77,143,.35),transparent 60%),
    radial-gradient(90% 70% at 100% 0%,rgba(10,91,127,.28),transparent 55%),
    radial-gradient(140% 120% at 50% 120%,rgba(255,79,46,.10),transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* ---------- layout helpers ---------- */
.wrap{width:min(var(--wrap),100% - 2 * clamp(16px,5vw,48px));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;background:var(--coral);color:#fff;padding:10px 16px;border-radius:var(--radius);font-weight:700;z-index:200;transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* eyebrow / section header */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.32em;font-size:clamp(11px,1.1vw,13px);color:var(--coral);
}
.eyebrow .num{color:var(--muted-2);font-weight:600;letter-spacing:.1em}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--coral)}

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,3.4vw,44px)}
.sec-head h2{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,5.6vw,68px);letter-spacing:.005em;line-height:.92;margin-top:14px;
}
.sec-head h2 em{font-style:normal;color:var(--coral)}
.sec-head .lead{max-width:46ch;color:var(--muted);font-size:clamp(14px,1.5vw,16px)}

section.band{padding:clamp(56px,8vw,120px) 0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--coral);--fg:#fff;
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;padding:15px 26px;background:var(--bg);color:var(--fg);
  border-radius:var(--radius);position:relative;isolation:isolate;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 10px 30px -12px rgba(255,79,46,.7);
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--coral-2);transform:translateY(101%);transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--text);border:1.5px solid var(--line-2);box-shadow:none}
.btn--ghost::after{background:rgba(255,255,255,.08)}
.btn--blue{--bg:var(--blue);box-shadow:0 10px 30px -12px rgba(42,77,143,.8)}
.btn--blue::after{background:var(--petrol)}
.btn--sm{padding:11px 18px;font-size:12px}

/* format / version chips */
.chip{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);
  white-space:nowrap;background:rgba(255,255,255,.02);
}
.chip--live{color:var(--coral);border-color:rgba(255,79,46,.5)}
.chip--live .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,79,46,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,79,46,.55)}70%{box-shadow:0 0 0 8px rgba(255,79,46,0)}100%{box-shadow:0 0 0 0 rgba(255,79,46,0)}}

/* marquee bulb divider */
.bulbs{display:flex;gap:clamp(14px,2vw,26px);justify-content:center;align-items:center;padding:6px 0}
.bulbs i{width:9px;height:9px;border-radius:50%;background:var(--bulb);box-shadow:0 0 10px 2px var(--bulb-glow);animation:bulb 1.4s infinite ease-in-out}
.bulbs i:nth-child(2n){animation-delay:.2s}
.bulbs i:nth-child(3n){animation-delay:.45s;background:var(--coral);box-shadow:0 0 10px 2px rgba(255,79,46,.5)}
.bulbs i:nth-child(4n){animation-delay:.7s}
@keyframes bulb{0%,100%{opacity:1}50%{opacity:.28}}

/* =====================================================================
   TOP TICKER (running marquee of titles)
   ===================================================================== */
.ticker{
  background:linear-gradient(90deg,var(--coral),var(--coral-2));
  color:#fff;overflow:hidden;position:relative;z-index:20;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.ticker__row{display:flex;width:max-content;animation:slide 40s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span{
  display:inline-flex;align-items:center;gap:14px;padding:8px 0;
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:12px;white-space:nowrap;
}
.ticker__row span::after{content:"◆";margin:0 26px;opacity:.6;font-size:9px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(7,11,22,.72);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);transition:transform .4s var(--ease),background .3s;
}
.site-head.is-hidden{transform:translateY(-100%)}
.site-head.is-solid{background:rgba(7,11,22,.94)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);height:72px}
.brand{display:flex;align-items:center;gap:12px;flex:none;margin-right:auto}
/* Typographic wordmark. The raster wordmark that shipped with this redesign was
   a truncated download and rendered as nothing; kinepolis.nl 403s every
   non-browser client, so it cannot be re-fetched from here. Setting it in the
   display face keeps the header honest until the real asset is dropped back in
   — swap these three rules for `img{height:…}` when it is. */
.brand__word{
  font-family:var(--display);font-weight:700;font-size:25px;line-height:1;
  letter-spacing:.055em;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.brand__word--sm{font-size:21px}
.nav__links{display:flex;align-items:center;gap:clamp(10px,1.4vw,24px)}
.nav__links a{
  font-weight:600;font-size:14px;color:var(--text);position:relative;padding:6px 0;letter-spacing:.01em;
}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--coral);transition:right .28s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{right:0}
.nav__actions{display:flex;align-items:center;gap:12px;flex:none}
.iconbtn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--radius);color:var(--text);transition:border-color .2s,background .2s}
.iconbtn:hover{border-color:var(--coral);background:rgba(255,79,46,.08)}
.iconbtn svg{width:19px;height:19px}
.burger{display:none}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(3,6,14,.6);opacity:0;transition:opacity .35s}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);
  background:var(--ink-2);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;padding:22px;overflow-y:auto;
}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer__links{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.drawer__links a{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:20px;
  padding:13px 4px;border-bottom:1px solid var(--line);color:var(--text)
}
.drawer__links a:hover{color:var(--coral)}
.drawer .btn{margin-top:20px;justify-content:center}

/* hamburger morph */
.burger-ico{width:22px;height:16px;position:relative}
.burger-ico span{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger-ico span:nth-child(1){top:0}
.burger-ico span:nth-child(2){top:7px}
.burger-ico span:nth-child(3){top:14px}
.is-x .burger-ico span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-x .burger-ico span:nth-child(2){opacity:0}
.is-x .burger-ico span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;padding:clamp(40px,6vw,84px) 0 clamp(50px,7vw,96px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero__title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(38px,6.6vw,92px);line-height:.9;letter-spacing:-.005em;margin:16px 0 0;
}
.hero__title .out{
  -webkit-text-stroke:1.4px rgba(238,243,251,.6);color:transparent;display:block;
}
.hero__title .fill{color:var(--text);display:block}
.hero__title .fill em{font-style:normal;color:var(--coral)}
.hero__sub{margin:22px 0 0;max-width:44ch;color:var(--muted);font-size:clamp(15px,1.7vw,18px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* quick pick form */
.pick{
  margin-top:30px;background:linear-gradient(180deg,rgba(18,32,54,.9),rgba(10,17,32,.9));
  border:1px solid var(--line-2);border-radius:8px;padding:14px;
  display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.pick label{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--muted-2);margin:0 0 7px 2px}
.pick .field{position:relative}
.pick select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:var(--ink);border:1px solid var(--line-2);color:var(--text);
  padding:12px 38px 12px 13px;border-radius:var(--radius);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.pick select:focus{border-color:var(--coral);outline:none}
.pick .field::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pick .btn{height:44px;padding-inline:20px}

/* hero feature — projector deck --------------------------------------------
   Three fixed gates with exactly the geometry of the static stack this
   replaces. The gates never move; the film running through them
   cross-dissolves. Timings live here and are read back by kinepolis.js
   through getComputedStyle, so there is one source of truth for both the
   CSS transitions and the JS clock — change --fade and the script follows.
   Nothing animates between changes: no keyframes, no blend group, no
   compositor work at rest.                                                  */
.feature{
  position:relative;justify-self:center;width:100%;max-width:460px;aspect-ratio:1/1.05;
  container-type:inline-size;   /* the control bar adapts to the deck, not the viewport */
  --dwell:5600ms;               /* how long a film holds the front gate  (JS reads this) */
  --fade:760ms;                 /* cross-dissolve length                 (JS reads this) */
  --lag:120ms;                  /* stagger between the three gates       (JS reads this) */
  --px:0px;--py:0px;            /* pointer parallax, written by JS */
}
.feature__card{
  position:absolute;border-radius:8px;overflow:hidden;isolation:isolate;
  background:var(--panel);      /* never a flash of page between the plates */
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);border:1px solid var(--line-2);
  translate:calc(var(--px) * var(--depth,0)) calc(var(--py) * var(--depth,0));
  transition:translate .5s var(--ease);
}
.feature.is-tracking .feature__card{transition:none}   /* follow the pointer 1:1, ease only on leave */

/* --zoom = how far the incoming plate has to settle; --depth = parallax weight.
   aspect-ratio on the rear cards is LOAD-BEARING: they used to take their
   height from the intrinsic 440x660 of their <img>, and both plates are now
   absolutely positioned, so without it the cards would collapse.            */
.feature__main{inset:0 14% 8% 0;z-index:3;--zoom:1.05;--depth:.30}
.feature__b{width:44%;right:0;top:6%;z-index:2;rotate:6deg;filter:brightness(.8);aspect-ratio:440/660;--zoom:1.07;--depth:.85}
.feature__c{width:38%;left:-4%;bottom:0;z-index:1;rotate:-7deg;filter:brightness(.62);aspect-ratio:440/660;--zoom:1.08;--depth:1.25}

/* Two film plates per gate; JS creates the second one. The incoming plate
   rides on top (z-index 2) and fades in over a still fully opaque outgoing
   plate, so there is never a mid-dissolve dip to the card background.       */
.feature__card img,.feature__plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:0;transform:scale(var(--zoom,1.05));transform-origin:50% 45%;
  transition:opacity var(--fade) var(--ease),transform calc(var(--fade) + 200ms) var(--ease);
}
.feature__plate.is-out{opacity:1}
.feature__plate.is-on{opacity:1;transform:none;z-index:2}
.feature__card.is-flash .feature__plate{will-change:opacity,transform}   /* promoted only while moving */

/* projector lamp bloom + gate sweep. Inert (opacity:0, no blend group)
   until .is-flash is on the card, so the steady state costs nothing.        */
.feature__card::before,.feature__card::after{content:"";position:absolute;pointer-events:none;opacity:0}
.feature__card::before{
  inset:-25%;z-index:4;
  background:radial-gradient(46% 42% at 50% 50%,rgba(255,226,168,.46),rgba(255,164,90,.16) 48%,transparent 72%);
}
.feature__card::after{
  top:-10%;bottom:-10%;left:-70%;right:-70%;z-index:5;
  background:linear-gradient(100deg,transparent 43%,rgba(255,212,121,.16) 47%,rgba(255,247,224,.34) 50%,rgba(255,212,121,.16) 53%,transparent 57%);
}
.feature__card.is-flash::before{mix-blend-mode:screen;animation:gate-bloom calc(var(--fade) + 60ms) var(--ease) 1}
.feature__card.is-flash::after{mix-blend-mode:screen;animation:gate-sweep calc(var(--fade) + 60ms) var(--ease) 1}
@keyframes gate-bloom{0%{opacity:0;transform:scale(.88)}24%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@keyframes gate-sweep{0%{opacity:0;transform:translate3d(-22%,0,0)}18%{opacity:1}82%{opacity:.8}100%{opacity:0;transform:translate3d(22%,0,0)}}

/* emulsion grain over the front gate — boils during the change only.
   Same feTurbulence + overlay blend as body::after, which already grains
   this poster at rest, so there is no permanent second blend layer.         */
.feature__gate{
  position:absolute;inset:-20%;z-index:3;pointer-events:none;opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.feature__main.is-flash .feature__gate{mix-blend-mode:overlay;animation:gate-grain calc(var(--fade) + 60ms) steps(4) 1}
@keyframes gate-grain{0%{opacity:0;translate:0 0}22%{opacity:.22;translate:-4% 3%}55%{opacity:.14;translate:3% -2%}100%{opacity:0;translate:0 0}}

/* "Nieuw" flag — JS toggles [hidden]; coming back from display:none replays
   the pop for free, with no JS animation plumbing. */
.feature__tag{
  position:absolute;z-index:6;left:-14px;top:22px;
  background:var(--coral);color:#fff;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;padding:9px 15px;border-radius:var(--radius);
  box-shadow:0 12px 26px -10px rgba(255,79,46,.8);
  animation:tag-pop .45s var(--ease) both;
}
.feature__tag[hidden]{display:none}
@keyframes tag-pop{from{opacity:0;transform:translateX(-10px) scale(.9)}to{opacity:1;transform:none}}

/* info card — geometry unchanged from the static version, so the deck
   occludes exactly as much of the poster as the page does today.
   Height is constant across all ten films: every title fits one line and
   the 41px Tickets button already sets the row height, so a film with no
   format chips cannot resize the card. The min-heights are belt and braces. */
.feature__meta{
  position:absolute;z-index:5;left:0;right:14%;bottom:-8%;
  background:rgba(10,17,32,.86);backdrop-filter:blur(8px);border:1px solid var(--line-2);
  border-radius:8px;padding:16px 18px;
}
.feature__meta h3{font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.02em;min-height:1.02em}
.feature__meta .row{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;align-items:center;min-height:41px}
.feature__chips{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.feature__buy{margin-left:auto;flex:none}

/* transport bar — created by JS, hangs BELOW the info card so it adds no
   height to it and covers no extra poster. Absent (and reserving nothing)
   without JS.                                                              */
.deck{
  position:absolute;left:0;right:0;top:calc(100% + 8px);height:39px;
  display:flex;align-items:center;gap:6px;padding:0 9px;overflow:hidden;
  background:rgba(10,17,32,.86);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:8px;
  box-shadow:0 22px 44px -28px rgba(0,0,0,.9);
}
.deck__bar{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(238,243,251,.08)}
.deck__bar i{
  display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bulb),var(--coral));
  animation:deckbar var(--dwell) linear both;animation-play-state:paused;
}
.feature.is-running .deck__bar i{animation-play-state:running}
@keyframes deckbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.deck__btn{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--muted);transition:color .2s,background .2s}
.deck__btn:hover{color:var(--coral);background:rgba(255,79,46,.12)}
.deck__btn svg{width:13px;height:13px}
.deck__toggle .i-play{display:none}
.feature.is-off .deck__toggle .i-play{display:block}
.feature.is-off .deck__toggle .i-pause{display:none}

/* Base state = prev/next (fits any width, works without container queries).
   The ten bulbs replace them only when the deck is genuinely wide enough for
   ten 24px targets, so they can never shrink below the WCAG 2.5.8 minimum
   and can never wrap to a second row.                                      */
.deck__bulbs{display:none}
.deck__step{display:grid}
.deck__bulb{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;padding:0}
.deck__bulb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted-2);transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.deck__bulb:hover::before{background:var(--coral-2)}
.deck__bulb[aria-current="true"]::before{background:var(--bulb);box-shadow:0 0 9px 2px var(--bulb-glow);transform:scale(1.3)}
.deck__count{flex:none;margin-left:auto;padding-left:4px;font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--muted-2);white-space:nowrap}
.deck__count b{color:var(--text);font-weight:600}
/* 410px is measured, not guessed: the bulb row needs toggle(28) + gap(6) +
   10x24 + gap(6) + counter(~46) = 326px of inner width, and the bar's inner
   width is about (container x .86) - 20. 410 is the smallest container that
   clears that, and it is what puts the bulbs on 1024px laptops; 960px and
   below still get prev/next. */
@container (min-width:410px){
  .deck__bulbs{display:flex;flex:1 1 auto;justify-content:center;min-width:0}
  .deck__step{display:none}
}

/* trust strip under hero */
.hero__strip{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);align-items:center}
.hero__strip .lbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted-2)}

/* =====================================================================
   PROGRAMME — poster wall
   ===================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:9px}
.filters a{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-weight:500;font-size:13px;
  padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);transition:.2s
}
.filters a[aria-current],.filters a:hover{background:var(--text);color:var(--ink);border-color:var(--text)}

.wall{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,22px);
}
.poster{
  position:relative;border-radius:6px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);aspect-ratio:2/3;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(6,10,20,.55) 66%,rgba(6,10,20,.96));opacity:.9;transition:opacity .35s}
.poster__badge{position:absolute;top:10px;left:10px;z-index:3;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:600;background:var(--coral);color:#fff;padding:5px 9px;border-radius:3px}
.poster__badge.is-buy{background:var(--bulb);color:#241a04}
.poster__badge.is-soon{background:var(--petrol)}
.poster__info{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:14px 13px}
.poster__info h3{font-family:var(--display);text-transform:uppercase;font-size:15px;line-height:1.02;letter-spacing:.01em}
.poster__fmts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .3s,margin .35s}
.poster__fmts span{font-family:var(--display);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border:1px solid var(--line-2);border-radius:3px;color:var(--text);background:rgba(255,255,255,.06)}
.poster__buy{position:absolute;z-index:4;inset:auto 0 0 0;transform:translateY(101%);transition:transform .35s var(--ease);
  background:var(--coral);color:#fff;text-align:center;padding:12px;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600}
.poster:hover,.poster:focus-within{transform:translateY(-6px);border-color:var(--coral);box-shadow:0 30px 50px -24px rgba(0,0,0,.9)}
.poster:hover img,.poster:focus-within img{transform:scale(1.06)}
.poster:hover .poster__fmts,.poster:focus-within .poster__fmts{max-height:40px;opacity:1;margin-top:9px}
.poster:hover .poster__buy,.poster:focus-within .poster__buy{transform:translateY(0)}
.poster:hover .poster__info,.poster:focus-within .poster__info{padding-bottom:52px}
.poster__link{position:absolute;inset:0;z-index:5;text-indent:-9999px;overflow:hidden}

.more-row{display:flex;justify-content:center;margin-top:clamp(30px,4vw,50px)}

/* =====================================================================
   FORMATS band
   ===================================================================== */
.formats{background:linear-gradient(180deg,var(--ink-2),#060a13);border-block:1px solid var(--line)}
.fmt-list{border-top:1px solid var(--line)}
.fmt{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,50px);align-items:center;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);transition:background .3s;
}
.fmt:hover{background:rgba(42,77,143,.10)}
.fmt__no{font-family:var(--display);font-weight:600;font-size:clamp(14px,1.4vw,16px);color:var(--muted-2);letter-spacing:.1em}
.fmt__name{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(26px,4.6vw,54px);line-height:1;letter-spacing:.01em;transition:color .3s,transform .3s var(--ease)}
.fmt:hover .fmt__name{color:var(--coral);transform:translateX(8px)}
.fmt__desc{max-width:40ch;color:var(--muted);font-size:14px;justify-self:end;text-align:right}
@media (max-width:760px){.fmt{grid-template-columns:auto 1fr}.fmt__desc{display:none}}

/* =====================================================================
   EVENTS rail
   ===================================================================== */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:calc(-1 * clamp(16px,5vw,48px));padding-inline:clamp(16px,5vw,48px)}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.ev{
  scroll-snap-align:start;position:relative;border-radius:8px;overflow:hidden;min-height:360px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  border:1px solid var(--line);background:var(--panel);isolation:isolate;
  transition:transform .35s var(--ease),border-color .35s;
}
.ev img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ev::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,11,22,.35),rgba(7,11,22,.55) 45%,rgba(7,11,22,.96))}
.ev--solid{background:linear-gradient(150deg,var(--blue-deep),var(--petrol))}
.ev--solid.ev--coral{background:linear-gradient(150deg,#8a1f12,var(--coral))}
.ev:hover{transform:translateY(-6px);border-color:var(--coral)}
.ev:hover img{transform:scale(1.06)}
.ev__kicker{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--bulb)}
.ev--solid .ev__kicker{color:#fff;opacity:.85}
.ev h3{font-family:var(--display);text-transform:uppercase;font-size:23px;line-height:1;margin:9px 0 8px;letter-spacing:.01em}
.ev p{font-size:13.5px;color:var(--muted)}
.ev--solid p{color:rgba(255,255,255,.82)}
.ev__more{margin-top:14px;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:var(--coral);display:inline-flex;gap:.5em;align-items:center}
.ev--solid .ev__more{color:#fff}
.ev__link{position:absolute;inset:0;z-index:5;text-indent:-9999px;overflow:hidden}

/* =====================================================================
   MOVIE CLUB band
   ===================================================================== */
.club{position:relative;overflow:hidden}
.club__inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;
  background:linear-gradient(150deg,var(--panel-2),var(--ink-2));
  border:1px solid var(--line-2);border-radius:14px;padding:clamp(26px,4vw,52px);
  position:relative;
}
/* ticket notch */
.club__inner::before,.club__inner::after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;background:var(--ink);border:1px solid var(--line-2)}
.club__inner::before{left:-18px;top:50%;transform:translateY(-50%)}
.club__inner::after{right:-18px;top:50%;transform:translateY(-50%)}
.club h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,4.6vw,52px);line-height:.95;margin:14px 0 0}
.club p{margin-top:16px;color:var(--muted);max-width:46ch}
.club__perks{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.club__cta{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.club__img{border-radius:10px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 70px -34px rgba(0,0,0,.9)}
.club__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

/* =====================================================================
   LOCATIONS
   ===================================================================== */
.locs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.loc{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.015);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:15px;font-weight:500;
  transition:.25s var(--ease);
}
.loc:hover{background:var(--blue-deep);border-color:var(--blue);transform:translateY(-3px)}
.loc span{color:var(--muted-2);transition:.25s}
.loc:hover span{color:var(--coral);transform:translateX(3px)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-foot{background:#05080f;border-top:1px solid var(--line);padding:clamp(50px,6vw,88px) 0 34px;margin-top:clamp(40px,6vw,90px)}
.foot__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.foot__brand .brand__word{display:block;font-size:29px;margin-bottom:18px}
.foot__brand p{color:var(--muted);font-size:14px;max-width:34ch}
.foot__soc{display:flex;gap:10px;margin-top:20px}
.foot__soc a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:6px;transition:.2s}
.foot__soc a:hover{background:var(--coral);border-color:var(--coral)}
.foot__soc svg{width:18px;height:18px}
.foot__col h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--muted-2);margin-bottom:14px}
.foot__col a{display:block;padding:6px 0;color:var(--text);font-size:14px;transition:color .2s}
.foot__col a:hover{color:var(--coral)}
.foot__bottom{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--line);color:var(--muted-2);font-size:12.5px}
.foot__legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot__legal a{color:var(--muted-2)}
.foot__legal a:hover{color:var(--text)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .wall{grid-template-columns:repeat(4,1fr)}
  .foot__top{grid-template-columns:1fr 1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:960px){
  .nav__links{display:none}
  .burger{display:grid}
  .search-btn{display:none}
  .hero__grid{grid-template-columns:1fr;gap:44px}
  /* the 92px reserves room for the info card (which already overhung by 8%)
     plus the control bar below it, in normal flow, at first paint — so the
     deferred script can never shift anything. */
  .feature{max-width:380px;margin:20px auto 92px}
  .club__inner{grid-template-columns:1fr}
  .club__img{order:-1}
  .locs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .wall{grid-template-columns:repeat(3,1fr);gap:12px}
  .poster__fmts{display:none}
  .locs{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:1fr 1fr}
  .pick{grid-template-columns:1fr 1fr}
  .pick .btn{grid-column:1/-1}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:560px){
  .feature__meta{right:0;padding:13px 14px}
  .feature__meta h3{font-size:17px}
}
@media (max-width:480px){
  .wall{grid-template-columns:repeat(2,1fr)}
  .sec-head{flex-direction:column;align-items:flex-start}
  .nav{height:62px}
  .brand .brand__word{font-size:21px}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .ticker__row{animation:none;transform:none}
  .reveal{opacity:1 !important;transform:none !important}
  .feature__card,.feature__plate,.feature__gate,.feature__tag{transition:none !important;animation:none !important}
  .feature__card.is-flash::before,.feature__card.is-flash::after{animation:none;opacity:0}
  .feature__plate.is-out{opacity:0}        /* hard cut, no dissolve at all */
  .deck__bar{display:none}                 /* a countdown for motion that is off */
}

/* scroll reveal (progressive enhancement — visible by default without JS) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}