/* ==========================================================================
   MOVIEDROP
   A film-archive interface. Cinema is the design system: the page sits inside
   a viewfinder, sections are separated by sprocket strips, metadata is set
   like a screening programme, and the whole thing is lit by one projector.
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* Darkness, warmed. Never a flat neutral black. */
  --ink-0:#0a0708;
  --ink-1:#100b0d;
  --ink-2:#171012;

  /* Old theatre velvet — signage, not neon. */
  --velvet:#8f1d26;
  --velvet-hi:#c34a4f;
  --velvet-dim:rgba(143,29,38,.34);

  /* Projected light: warm, slightly off-white, like paper under a bulb. */
  --light:#f4ece1;
  --light-2:#b3a79b;
  --light-3:#7a6f66;
  --light-4:#4e4642;

  --gold:#c9a227;

  --rule:rgba(244,236,225,.11);
  --rule-2:rgba(244,236,225,.2);
  --tint:rgba(244,236,225,.035);
  --tint-2:rgba(244,236,225,.06);

  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --editorial:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-film:cubic-bezier(.65,.02,.28,1);

  --shell:1240px;
  --pad-x:clamp(20px,5.4vw,52px);
  --gutter:clamp(14px,3.4vw,26px);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink-0);
  color:var(--light);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--velvet); color:var(--light); }

:focus-visible{
  outline:1px solid var(--velvet-hi);
  outline-offset:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:120;
  background:var(--velvet); color:var(--light);
  padding:14px 20px; font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ left:0; }

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ══ ATMOSPHERE ═══════════════════════════════════════════════════════════ */
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* Backdrop plate: the projection booth the page is being screened in.
   Screen blend so the lamp and the dust add light to the room, while the
   image's blacks leave the page's own blacks untouched. */
.ambient__plate{
  position:absolute; inset:0;
  background-image:url("backdrop-sm.webp");
  background-size:cover;
  background-position:50% 44%;
  background-repeat:no-repeat;
  /* Mirrored so the lamp falls in the open right half of the frame rather
     than directly behind the title. */
  transform:scaleX(-1);
  opacity:.5;
  mix-blend-mode:screen;
  /* Strongest around the lamp, falling away toward the reading column so
     type never sits in the haze. */
  -webkit-mask-image:radial-gradient(92% 116% at 72% 44%,
    #000 0%, rgba(0,0,0,.82) 30%, rgba(0,0,0,.4) 58%, rgba(0,0,0,.12) 82%, transparent 100%);
  mask-image:radial-gradient(92% 116% at 72% 44%,
    #000 0%, rgba(0,0,0,.82) 30%, rgba(0,0,0,.4) 58%, rgba(0,0,0,.12) 82%, transparent 100%);
}
@media (min-width:860px){
  .ambient__plate{
    background-image:url("backdrop.webp");
    opacity:.58;
  }
}

/* One projector, throwing from above. */
.ambient__beam{
  position:absolute; left:50%; top:-58vh;
  width:min(1500px,190vw); aspect-ratio:1;
  transform:translate3d(-50%,0,0);
  background:radial-gradient(circle at 50% 50%,
    rgba(244,236,225,.085) 0%,
    rgba(201,162,39,.05) 24%,
    rgba(143,29,38,.05) 44%,
    transparent 68%);
  will-change:transform;
}

/* Light leaks — film that saw daylight once. */
.ambient__leak{ position:absolute; border-radius:50%; filter:blur(90px); }
.ambient__leak--a{
  left:-18%; top:22%;
  width:min(620px,74vw); aspect-ratio:1;
  background:radial-gradient(circle,rgba(143,29,38,.3),transparent 68%);
  will-change:transform;
}
.ambient__leak--b{
  right:-20%; top:64%;
  width:min(560px,68vw); aspect-ratio:1;
  background:radial-gradient(circle,rgba(80,52,26,.32),transparent 68%);
  will-change:transform;
}

/* Gate weave: the faint horizontal drift of film through a projector. */
.ambient__weave{
  position:absolute; inset:0;
  opacity:.5;
  background-image:repeating-linear-gradient(
    to bottom, rgba(244,236,225,.016) 0 1px, transparent 1px 4px);
}

.ambient__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(118% 86% at 50% 42%, transparent 34%, rgba(4,2,3,.82) 100%),
    linear-gradient(100deg, rgba(6,4,5,.62) 0%, rgba(6,4,5,.3) 34%, transparent 62%);
}

.grain{
  position:absolute; inset:-60%;
  pointer-events:none;
  opacity:.19;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grainDrift 720ms steps(2,end) infinite;
}
@keyframes grainDrift{
  0%   { transform:translate3d(0,0,0); }
  50%  { transform:translate3d(-2%,1.4%,0); }
  100% { transform:translate3d(1.6%,-1%,0); }
}

body > main, body > header, body > footer{ position:relative; z-index:1; }

/* ══ VIEWFINDER ═══════════════════════════════════════════════════════════ */
.viewfinder{ position:fixed; inset:0; z-index:60; pointer-events:none; }
.viewfinder__corner{
  position:absolute;
  width:clamp(16px,3.4vw,30px); aspect-ratio:1;
  border:1px solid rgba(244,236,225,.26);
}
.viewfinder__corner--tl{ top:14px; left:14px;  border-right:0; border-bottom:0; }
.viewfinder__corner--tr{ top:14px; right:14px; border-left:0;  border-bottom:0; }
.viewfinder__corner--bl{ bottom:14px; left:14px;  border-right:0; border-top:0; }
.viewfinder__corner--br{ bottom:14px; right:14px; border-left:0;  border-top:0; }
@media (min-width:900px){
  .viewfinder__corner--tl,.viewfinder__corner--tr{ top:20px; }
  .viewfinder__corner--bl,.viewfinder__corner--br{ bottom:20px; }
  .viewfinder__corner--tl,.viewfinder__corner--bl{ left:20px; }
  .viewfinder__corner--tr,.viewfinder__corner--br{ right:20px; }
}

/* ══ TYPE PRIMITIVES ══════════════════════════════════════════════════════ */

/* The programme slug: every piece of metadata on the site uses this. */
.slug{
  margin:0;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0 10px;
  font-family:var(--mono);
  font-size:clamp(9.5px,2.3vw,11px);
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--light-3);
}
.slug i{
  width:16px; height:1px; flex:none;
  background:var(--rule-2);
}
.slug a{ color:var(--light-2); text-decoration:none; border-bottom:1px solid var(--rule-2); }
.slug a:hover{ color:var(--velvet-hi); border-color:currentColor; }
.slug--right{ justify-content:flex-end; text-align:right; }

/* Sprocket strip — the site's section divider. */
.perf{
  height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Crect x='7' y='3.5' width='18' height='9' rx='2.4' fill='%23f4ece1' fill-opacity='.085'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:0 50%;
  border-block:1px solid var(--rule);
}
.perf--hero{
  position:absolute; left:0; right:0; bottom:0;
  border-bottom:0;
}

/* ══ TOPBAR ═══════════════════════════════════════════════════════════════ */
.topbar{
  position:sticky; top:0; z-index:50;
  padding-block:14px;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
}
.topbar.is-stuck{
  background:rgba(10,7,8,.93);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  border-bottom-color:var(--rule);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }

.wordmark{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--light);
  padding-block:11px;
}
.wordmark__dot{
  width:7px; height:7px; flex:none;
  background:var(--velvet-hi);
  box-shadow:0 0 12px 2px rgba(195,74,79,.6);
  animation:lampFlicker 5s steps(1,end) infinite;
}
@keyframes lampFlicker{
  0%,92%,100%{ opacity:1; }
  94%{ opacity:.35; }
  96%{ opacity:1; }
  97%{ opacity:.55; }
}
.wordmark__text{
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:.3em;
}
.wordmark__accent{ color:var(--velvet-hi); }

.topbar__ig{
  display:inline-flex; align-items:center; gap:8px;
  min-height:40px; padding:9px 15px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--light-2); text-decoration:none;
  border:1px solid var(--rule-2);
  background:var(--tint);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  white-space:nowrap;
}
.topbar__ig svg{ width:14px; height:14px; flex:none; }
.topbar__ig:hover{ color:var(--light); border-color:var(--velvet-hi); background:var(--velvet-dim); }
@media (max-width:440px){
  .topbar__ig span{ display:none; }
  .topbar__ig{ padding:10px 12px; }
}

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding-block:clamp(26px,5vh,64px) clamp(34px,6vh,72px);
  border-bottom:1px solid var(--rule);
}
.hero__inner{
  position:relative;
  /* cinema.js drives --recede (0→1) as the hero leaves. */
  transform:scale(calc(1 - var(--recede,0) * .07)) translate3d(0,calc(var(--recede,0) * -26px),0);
  opacity:calc(1 - var(--recede,0) * .85);
  transform-origin:12% 40%;
}

.slug--hero{ margin-bottom:clamp(26px,5vw,42px); }

/* The title card. Condensed poster caps, set as wide as the column allows. */
.titleCard{ margin:0; line-height:.82; }
.titleCard__word{
  display:flex; align-items:baseline;
  font-family:var(--display);
  font-size:clamp(52px,14vw,168px);
  font-weight:400;
  letter-spacing:-.012em;
  color:var(--light);
  text-transform:uppercase;
}
.titleCard__l{
  display:inline-block;
  transform:translate3d(0,.42em,0);
  opacity:0;
  animation:letterIn 760ms var(--ease-film) forwards;
}
.titleCard__l--accent{
  color:var(--velvet-hi);
  text-shadow:0 0 44px rgba(195,74,79,.34);
}
.titleCard__l:nth-child(1){ animation-delay:40ms }
.titleCard__l:nth-child(2){ animation-delay:90ms }
.titleCard__l:nth-child(3){ animation-delay:140ms }
.titleCard__l:nth-child(4){ animation-delay:190ms }
.titleCard__l:nth-child(5){ animation-delay:240ms }
.titleCard__l:nth-child(6){ animation-delay:300ms }
.titleCard__l:nth-child(7){ animation-delay:350ms }
.titleCard__l:nth-child(8){ animation-delay:400ms }
.titleCard__l:nth-child(9){ animation-delay:450ms }
@keyframes letterIn{ to{ transform:translate3d(0,0,0); opacity:1; } }

.hero__line{
  margin:clamp(14px,2.6vw,22px) 0 0;
  max-width:26ch;
  font-family:var(--editorial);
  font-size:clamp(21px,4.8vw,40px);
  line-height:1.14;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--light-2);
}
.hero__line em{
  display:block;
  font-style:italic;
  color:var(--light);
}

.hero__foot{
  margin-top:clamp(34px,6vw,56px);
  display:flex; align-items:center; justify-content:space-between;
  gap:18px 26px; flex-wrap:wrap;
}

/* Scroll cue — a strip of film running down the page. */
.cue{
  display:inline-flex; align-items:center; gap:14px;
  text-decoration:none;
  padding-block:14px;
}
.cue__label{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--light-2);
  transition:color .3s var(--ease);
}
.cue__rule{
  position:relative;
  display:block; width:72px; height:1px;
  background:var(--rule-2);
  overflow:hidden;
}
.cue__rule i{
  position:absolute; inset:0 auto 0 0;
  width:22px; background:var(--velvet-hi);
  animation:cueRun 2.6s var(--ease) infinite;
}
@keyframes cueRun{
  0%{ transform:translate3d(-100%,0,0); }
  60%,100%{ transform:translate3d(340%,0,0); }
}
.cue:hover .cue__label{ color:var(--light); }

.hero__count{ margin-top:14px; color:var(--light-2); }

/* ══ BUTTONS ══════════════════════════════════════════════════════════════ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px;
  padding:15px 26px;
  border:1px solid var(--rule-2);
  background:var(--tint);
  color:var(--light);
  font-family:var(--mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), color .35s var(--ease), opacity .3s;
}
.btn > *{ position:relative; z-index:1; }
.btn svg{ width:15px; height:15px; flex:none; }

/* A bulb sweeping behind the glass. */
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(244,236,225,.16) 48%, transparent 66%);
  transform:translate3d(-110%,0,0);
  transition:transform .75s var(--ease-film);
}
.btn:hover::after{ transform:translate3d(110%,0,0); }
.btn:active{ transform:scale(.98); }

.btn--ghost:hover{ border-color:var(--rule-2); background:var(--tint-2); }

.btn--solid{
  background:var(--light);
  color:var(--ink-0);
  border-color:var(--light);
}
.btn--solid:hover{ background:#fff; border-color:#fff; }
.btn--solid::after{
  background:linear-gradient(105deg, transparent 30%, rgba(10,7,8,.14) 48%, transparent 66%);
}
.btn--solid:disabled{
  background:transparent;
  color:var(--light-4);
  border-color:var(--rule);
  cursor:not-allowed;
}
.btn--solid:disabled::after{ display:none; }
.btn--solid:disabled:active{ transform:none; }

.btn--ig{
  background:var(--velvet);
  border-color:var(--velvet);
  color:var(--light);
}
.btn--ig:hover{ background:#a12630; border-color:var(--velvet-hi); }

.btn--quiet{
  min-height:44px; padding:12px 18px;
  font-size:10.5px;
  color:var(--light-2);
  border-color:var(--rule);
}
.btn--quiet:hover{ color:var(--light); border-color:var(--rule-2); }

.btn--block{ width:100%; }

/* Primed once Instagram has been opened. */
.btn--solid.is-primed{ animation:primed 2.4s var(--ease) infinite; }
@keyframes primed{
  0%,100%{ box-shadow:0 0 0 0 rgba(244,236,225,.34); }
  60%{ box-shadow:0 0 0 13px rgba(244,236,225,0); }
}

/* ══ SLATE (section head) ═════════════════════════════════════════════════ */
.collection{ padding-block:0 clamp(60px,10vw,110px); }

.slate{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px 28px; flex-wrap:wrap;
  padding-bottom:clamp(16px,3vw,24px);
}
.slate__left{ display:flex; flex-direction:column; gap:10px; }
.slate__title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(34px,8.6vw,84px);
  font-weight:400; line-height:.86;
  letter-spacing:-.008em;
  text-transform:uppercase;
}

/* ══ THE COLLECTION ═══════════════════════════════════════════════════════ */
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gutter);
  padding-top:clamp(24px,4.6vw,44px);
}
@media (min-width:640px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:980px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1260px){ .grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.card{
  display:flex; flex-direction:column;
  min-width:0;
}
.cinema-ready .card{
  opacity:0;
  transform:translate3d(0,14px,0);
}
/* Never clip the observed element itself — see note above. */
.cinema-ready .card .poster{ clip-path:inset(0 0 100% 0); }

.card.is-in{
  opacity:1;
  transform:none;
  transition:opacity .44s var(--ease), transform .66s var(--ease-film);
  transition-delay:var(--d,0ms);
}
.card.is-in .poster{
  clip-path:inset(0 0 0 0);
  transition:clip-path .78s var(--ease-film), border-color .5s var(--ease), box-shadow .5s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ── The poster ──────────────────────────────────────────────────────────── */
.poster{
  position:relative;
  aspect-ratio:2/3;
  width:100%;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--rule);
  isolation:isolate;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* A mounted print: thin inner keyline inside the frame. */
.poster::after{
  content:"";
  position:absolute; inset:7px;
  border:1px solid rgba(244,236,225,.13);
  pointer-events:none; z-index:4;
  transition:inset .55s var(--ease-film), border-color .5s var(--ease);
}
.card:hover .poster{
  border-color:var(--rule-2);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
}
.card:hover .poster::after{ inset:11px; border-color:rgba(244,236,225,.26); }

.poster__art{ position:absolute; inset:0; z-index:0; }
.poster__art svg{ width:100%; height:100%; display:block; }

.poster__frame{
  position:absolute; inset:0; z-index:1;
  transition:transform .85s var(--ease-film), filter .7s var(--ease);
}
.card:hover .poster__frame{ transform:scale(1.045); }

.poster__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s var(--ease);
}
.poster__img.is-ready{ opacity:1; }

.poster__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to bottom, rgba(6,3,4,.62) 0%, rgba(6,3,4,.1) 20%, transparent 34%),
    linear-gradient(to top, rgba(6,3,4,.5) 0%, transparent 30%);
}

/* Light raking across the poster on hover. */
.poster__sheen{
  position:absolute; inset:-20%; z-index:3;
  background:linear-gradient(108deg, transparent 38%, rgba(244,236,225,.13) 50%, transparent 62%);
  transform:translate3d(-120%,0,0);
  pointer-events:none;
}
.card:hover .poster__sheen{
  transform:translate3d(120%,0,0);
  transition:transform 1.05s var(--ease-film);
}

/* Focus marks — the poster being examined. */
.poster__marks{ position:absolute; inset:14px; z-index:5; pointer-events:none; }
.poster__marks span{
  position:absolute; width:9px; height:9px;
  border:1px solid rgba(244,236,225,.55);
  opacity:0;
  transition:opacity .45s var(--ease), transform .55s var(--ease-film);
}
.poster__marks span:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; transform:translate(5px,5px); }
.poster__marks span:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; transform:translate(-5px,5px); }
.poster__marks span:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; transform:translate(5px,-5px); }
.poster__marks span:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; transform:translate(-5px,-5px); }
.card:hover .poster__marks span{ opacity:1; transform:translate(0,0); }

/* Catalogue number and platform share one row, so they cannot collide on a
   narrow poster — the platform truncates instead. */
.poster__head{
  position:absolute; top:14px; left:14px; right:14px; z-index:8;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.poster__no{
  flex:0 0 auto;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em;
  color:rgba(244,236,225,.68);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}

/* Platform — the bottom of the frame belongs to the title. */
.poster__tag{
  flex:0 1 auto; min-width:0;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,236,225,.82);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.poster__tag::before{
  content:""; width:4px; height:4px; flex:none;
  background:var(--ott,var(--velvet-hi));
  box-shadow:0 0 7px var(--ott,var(--velvet-hi));
}

/* ── Locked ──────────────────────────────────────────────────────────────── */
.poster__locked{
  position:absolute; inset:0; z-index:7;
  display:grid; place-items:center;
  background:rgba(8,5,6,.28);
  backdrop-filter:blur(6px) saturate(72%);
  -webkit-backdrop-filter:blur(6px) saturate(72%);
  transition:opacity .75s var(--ease), backdrop-filter .75s var(--ease);
}
/* A slate band across the frame, not a padlock badge. */
.poster__band{
  position:relative;
  width:100%;
  padding:9px 6px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:rgba(6,3,4,.8);
  border-block:1px solid rgba(244,236,225,.18);
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,236,225,.9);
  text-align:center;
}
.poster__band svg{ width:11px; height:11px; flex:none; }

.is-unlocked .poster__locked{
  opacity:0; pointer-events:none;
  backdrop-filter:blur(0) saturate(100%);
  -webkit-backdrop-filter:blur(0) saturate(100%);
}
/* The band splits like a shutter as the screening opens. */
.is-unlocked .poster__band{
  transform:scaleY(0);
  transition:transform .55s var(--ease-film);
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.card__body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:14px 1px 0;
}

.card__title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(15px,3.6vw,19px);
  font-weight:400; line-height:1.02;
  letter-spacing:.004em;
  text-transform:uppercase;
  color:var(--light);
  min-height:2.04em;              /* two lines, so short titles still align */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .35s var(--ease);
}
.card:hover .card__title{ color:#fff; }

.card__meta{
  margin:7px 0 12px;
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--light-4);
  white-space:nowrap; overflow:hidden;
}
.card__meta i{ width:10px; height:1px; background:var(--rule-2); flex:none; }

/* CTA — a torn ticket edge on the left. */
.card__cta{
  position:relative;
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; width:100%;
  padding:11px 12px;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--light-4);
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; cursor:default;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease),
             background .35s var(--ease), transform .2s var(--ease);
}
.card__cta svg{ width:12px; height:12px; flex:none; }

.is-unlocked .card__cta[href]{
  color:var(--light);
  border-color:var(--rule-2);
  cursor:pointer;
}
.is-unlocked .card__cta[href]:hover{
  background:var(--velvet);
  border-color:var(--velvet);
  color:var(--light);
}
.is-unlocked .card__cta[href]:active{ transform:scale(.985); }

/* On a two-up phone grid there is no room for both labels. The platform is
   the useful one; the catalogue number is decoration. */
@media (max-width:520px){
  .poster__no{ display:none; }
  .poster__tag{ letter-spacing:.1em; }
}

/* ══ THREADING (loading) ══════════════════════════════════════════════════
   Two reels turning — feed and take-up — while the sheet is fetched. Fades
   in after a beat so a fast load never flashes it.                         */
.threading{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(20px,3.4vw,30px);
  padding-block:clamp(64px,13vw,130px);
  opacity:0;
  animation:threadIn .5s var(--ease) .28s forwards;
}
@keyframes threadIn{ to{ opacity:1; } }

.threading__reels{
  display:flex; align-items:center; gap:clamp(16px,3vw,30px);
  color:var(--light-3);
}
/* The film path between the two reels. */
.threading__reels::before{
  content:"";
  position:absolute;
  width:clamp(92px,17vw,168px); height:1px;
  background:repeating-linear-gradient(to right,
    rgba(244,236,225,.3) 0 6px, transparent 6px 12px);
  transform:translateY(-1px);
}
.threading__reels{ position:relative; }

.reel{ display:block; }
.reel__svg{ display:block; }
.reel--feed .reel__svg{
  width:clamp(54px,9vw,74px); aspect-ratio:1;
  animation:spool 3.4s linear infinite;
}
.reel--take .reel__svg{
  width:clamp(38px,6.4vw,52px); aspect-ratio:1;
  color:var(--velvet-hi);
  opacity:.85;
  animation:spool 2.1s linear infinite reverse;
}
@keyframes spool{ to{ transform:rotate(360deg); } }

.threading__note{ color:var(--light-4); }

@media (prefers-reduced-motion:reduce){
  .threading{ opacity:1; animation:none; }
  .reel--feed .reel__svg,.reel--take .reel__svg{ animation:none; }
}

/* ══ NOTICE ═══════════════════════════════════════════════════════════════ */
.notice{
  margin-top:clamp(28px,5vw,48px);
  padding:clamp(44px,9vw,86px) 24px;
  text-align:center;
  border:1px solid var(--rule);
  background:var(--tint);
}
.notice .slug{ justify-content:center; color:var(--velvet-hi); }
.notice__title{
  margin:16px 0 8px;
  font-family:var(--editorial);
  font-size:clamp(24px,5.4vw,34px);
  font-weight:400; letter-spacing:-.012em;
}
.notice__copy{
  margin:0 auto 26px; max-width:40ch;
  font-size:14px; color:var(--light-2);
}

/* ══ FLASH + TOAST ════════════════════════════════════════════════════════ */
.flash{
  position:fixed; inset:0; z-index:150;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(255,248,236,.95), rgba(255,240,220,.5) 34%, transparent 72%);
  opacity:0;
}
.flash.is-firing{ animation:projectorFlash 620ms var(--ease-film); }
@keyframes projectorFlash{
  0%{ opacity:0; }
  14%{ opacity:.82; }
  100%{ opacity:0; }
}

.toast{
  position:fixed;
  left:50%; bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);
  z-index:160;
  max-width:min(440px,calc(100vw - 36px));
  padding:15px 24px;
  border:1px solid var(--rule-2);
  background:rgba(12,8,9,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--light);
  text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), transform .5s var(--ease-film);
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }

/* ══ CREDITS ══════════════════════════════════════════════════════════════ */
.credits{ border-top:1px solid var(--rule); }
.credits .perf{ border-top:0; }
.credits__inner{ padding-block:clamp(36px,6vw,60px); }
.credits .slug{ justify-content:center; margin-bottom:clamp(22px,4vw,34px); }

.credits__grid{
  display:flex; flex-direction:column; gap:12px;
  max-width:520px; margin-inline:auto;
}
.credits__row{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:11px;
  border-bottom:1px solid var(--rule);
}
.credits__role{
  flex:0 0 auto;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-4);
}
.credits__name{
  flex:1 1 auto; text-align:right;
  font-family:var(--editorial); font-size:clamp(15px,3.6vw,19px);
  color:var(--light);
  text-decoration:none;
  transition:color .3s var(--ease);
}
a.credits__name:hover{ color:var(--velvet-hi); }

.credits__end{
  margin:clamp(26px,5vw,40px) 0 0;
  text-align:center;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.5em; text-indent:.5em;
  color:var(--light-4);
}

/* ══ SCROLL REVEAL ════════════════════════════════════════════════════════ */
/* Content is exposed like a frame reaching the gate — not faded up. */
.cinema-ready [data-reveal]{
  opacity:0;
  clip-path:inset(0 0 42% 0);
}
[data-reveal].is-in{
  opacity:1;
  clip-path:inset(0 0 0 0);
  transition:opacity .55s var(--ease), clip-path .85s var(--ease-film);
  transition-delay:var(--d,0ms);
}

/* The section title wipes across like a title card. */
.slate__title span{
  display:inline-block;
  clip-path:inset(0 0 0 0);
}
.cinema-ready .slate__title span{
  clip-path:inset(0 102% 0 0);
  transform:translate3d(-.06em,0,0);
}
.slate.is-in .slate__title span{
  clip-path:inset(0 0 0 0);
  transform:none;
  transition:clip-path 1s var(--ease-film) .1s, transform 1s var(--ease-film) .1s;
}
/* Failsafe: whatever happens, revealed content wins. */
[data-reveal].is-in,.card.is-in{ opacity:1 !important; clip-path:none !important; }
.card.is-in .poster{ clip-path:inset(0 0 0 0) !important; }

/* ══ MOTION PREFERENCES ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{ animation:none; }
  [data-reveal],.card,.titleCard__l{ opacity:1 !important; transform:none !important; }
  .btn::after,.poster__sheen{ display:none; }
}

/* Cursor-tracked lamp on the poster (desktop; cinema.js sets --mx/--my) */
@media (hover:hover) and (pointer:fine){
  .poster__glow{
    position:absolute; inset:0; z-index:3;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      rgba(244,236,225,.16), transparent 62%);
    opacity:0;
    transition:opacity .45s var(--ease);
    pointer-events:none;
  }
  .card:hover .poster__glow{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .poster__glow{ display:none; } }

/* ══ THE GATE: motion that answers an action ══════════════════════════════ */

/* Poster tilt — the print lifts toward you as you look at it. cinema.js sets
   --tx/--ty in the range -1..1 from the pointer. Desktop only. */
@media (hover:hover) and (pointer:fine){
  .poster{ perspective:900px; }
  .poster__frame{ transform-style:preserve-3d; }
  .card:hover .poster__frame{
    transform:
      scale(1.05)
      rotateX(calc(var(--ty,0) * -3.2deg))
      rotateY(calc(var(--tx,0) * 3.2deg));
  }
  /* The keyline lifts with it, so the print reads as one object. */
  .card:hover .poster::after{ transform:translate3d(calc(var(--tx,0) * 3px), calc(var(--ty,0) * 3px), 0); }
  .poster::after{ transition:inset .55s var(--ease-film), border-color .5s var(--ease), transform .5s var(--ease); }
}

/* Locked bands split from the middle like a shutter. */
.poster__band{
  transform-origin:50% 50%;
  transition:transform .5s var(--ease-film);
}

/* Watch CTA: perforations run across it on hover. */
.is-unlocked .card__cta[href]::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='42'%3E%3Crect x='9' y='17' width='8' height='8' rx='1.6' fill='%23f4ece1' fill-opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:0 50%;
  opacity:0;
  transform:translate3d(-30%,0,0);
  transition:opacity .3s var(--ease), transform .9s var(--ease-film);
  pointer-events:none;
}
.is-unlocked .card__cta[href]:hover::before{
  opacity:.5;
  transform:translate3d(30%,0,0);
}

/* Count ticking up on load. */
.tick{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .hero__inner{ transform:none !important; opacity:1 !important; }
  .cinema-ready [data-reveal],
  .cinema-ready .card,
  .cinema-ready .card .poster,
  .cinema-ready .slate__title span{ opacity:1 !important; clip-path:none !important; transform:none !important; }
  .is-unlocked .card__cta[href]::before{ display:none; }
  .card:hover .poster__frame{ transform:none; }
}

/* ══ THE ASK ══════════════════════════════════════════════════════════════
   The one thing this page is for, kept above the fold on a 375px screen. */
.ask{ margin-top:clamp(22px,4.4vw,32px); max-width:440px; }
.ask .btn + .btn{ margin-top:10px; }

.ask__step{
  margin:14px 0 0;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--light-4);
}

.ask__open{
  display:flex; align-items:center; gap:13px;
  padding:15px 18px;
  border:1px solid rgba(127,199,154,.26);
  background:rgba(127,199,154,.07);
}
.ask__mark{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border:1px solid rgba(127,199,154,.4);
  color:#7fc79a;
}
.ask__mark svg{ width:16px; height:16px; }
.ask__openText{ margin:0; font-size:14px; color:var(--light-2); }

/* ══ THE ASK, AGAIN ═══════════════════════════════════════════════════════ */
.encore{
  margin-top:clamp(34px,6vw,56px);
  padding:clamp(24px,5vw,38px);
  border:1px solid var(--rule);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(143,29,38,.14), transparent 62%),
    rgba(244,236,225,.022);
  text-align:center;
}
.encore__line{
  margin:0 auto clamp(16px,3vw,22px);
  max-width:34ch;
  font-family:var(--editorial);
  font-size:clamp(19px,4.6vw,27px);
  line-height:1.2; letter-spacing:-.01em;
  color:var(--light);
}
.encore .btn{ max-width:340px; margin-inline:auto; }

/* ══ DOCK ═════════════════════════════════════════════════════════════════
   Keeps the ask in thumb reach on a phone until the links are open.      */
.dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px var(--pad-x) calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,5,6,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--rule-2);
  transform:translate3d(0,110%,0);
  transition:transform .5s var(--ease-film);
}
.dock.is-up{ transform:translate3d(0,0,0); }
.dock__text{
  margin:0; min-width:0;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--light-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dock .btn{ flex:0 0 auto; min-height:46px; padding:12px 20px; }
/* Room for the dock, so it never covers the last row. */
body.has-dock .credits{ padding-bottom:84px; }
@media (min-width:900px){ .dock{ display:none; } }