/* =====================================================================
   /social — its own visual language: film (Round 4 §8).
   1. The header: a clapperboard whose top stick snaps shut as the headline
      arrives (gravity in, small bounce). Plays on load.
   2. "You film, I do the rest": four steps as a strip of film that advances
      one frame per scroll (data-beats, latched). The lit frame is the step;
      its copy cross-fades in beneath. Reduced motion / mobile: the four
      frames simply stack.
   ===================================================================== */

/* ---- 1 · the clapperboard ---- */
.cine-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.clap{justify-self:end;width:clamp(240px,20vw,360px)}
.clap svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 20px 26px rgba(30,36,49,.22))}
.clap .stick{transform-origin:14px 88px;transform:rotate(-26deg)}
@media (prefers-reduced-motion:no-preference){
  html.js .clap .stick{animation:clapDown .32s cubic-bezier(.333,0,.667,.333) .55s forwards,clapUp .11s cubic-bezier(.333,.667,.667,1) .87s forwards,clapDown2 .11s cubic-bezier(.333,0,.667,.333) .98s forwards}
  @keyframes clapDown{to{transform:rotate(0)}}
  @keyframes clapUp{to{transform:rotate(-4deg)}}
  @keyframes clapDown2{to{transform:rotate(0)}}
  html.js .clap{opacity:0;animation:clapIn .5s ease .2s forwards}
  @keyframes clapIn{to{opacity:1}}
}
@media (max-width:860px){.cine-grid{grid-template-columns:1fr}.clap{justify-self:center;width:220px;margin-top:10px}}

/* ---- 2 · the film strip ---- */
.reel-sec{--travel:clamp(380px,46vh,600px);position:relative;padding:0}
.reel-sec::after{content:"";display:block;height:var(--travel)}   /* the scroll budget: sticky is confined to the parent's CONTENT box, so padding wouldn't count */   /* px scroll budget, four beats */
.reel-pin{position:sticky;top:72px;box-sizing:border-box;padding:14px 0 20px}
.reel-pin > .wrap{width:100%}
.reel-head{margin-bottom:22px}
.reel{position:relative;height:272px;overflow:hidden;--fw:330px;--fg:26px;--k:0}
.strip{position:absolute;top:22px;left:calc(50% - var(--fw) / 2 - var(--k) * (var(--fw) + var(--fg)));
  display:flex;gap:var(--fg);padding:16px 40px;background:#1E2431;border-radius:8px;width:max-content;   /* as wide as all four frames — never narrower than its content */
  transition:left 1s cubic-bezier(.5,.05,.25,1)}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:10px;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(247,243,236,.85) 12px 24px);}
.strip::before{top:4px}.strip::after{bottom:4px}
.frame{flex:0 0 var(--fw);height:210px;background:#F7F3EC;border-radius:6px;position:relative;
  display:grid;place-items:center;opacity:.35;transform:scale(.94);transition:opacity .6s,transform .6s}
.frame svg{width:240px;height:auto}
.frame .fl{position:absolute;left:12px;bottom:10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--slate)}
.frame.on{opacity:1;transform:none}
.reel-copy{position:relative;height:96px;max-width:560px;margin:8px auto 0;text-align:center}
.reel-copy .rc{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.reel-copy .rc.on{opacity:1;transform:none;transition-delay:.35s}
.reel-copy h3{font-size:19px}
.reel-copy p{margin-top:6px;font-size:15.5px;color:var(--muted)}
.reel-plain{max-width:640px;margin:14px auto 0}
/* frame details that move once the frame is lit */
.frame.on .rec{animation:recBlink 1.1s steps(2) infinite}
@keyframes recBlink{50%{opacity:.2}}
.frame.on .ph{animation:playhead 2.6s linear infinite}
@keyframes playhead{to{transform:translateX(82px)}}
.frame.on .pen{animation:pen 1.4s ease-in-out infinite alternate}
@keyframes pen{to{transform:translate(-14px,10px)}}
/* beats */
@media (prefers-reduced-motion:no-preference) and (min-width:861px){
  .reel-sec.b1 .reel{--k:0}.reel-sec.b2 .reel{--k:1}.reel-sec.b3 .reel{--k:2}.reel-sec.b4 .reel{--k:3}
  .reel-sec.b1 .f1,.reel-sec.b2 .f2,.reel-sec.b3 .f3,.reel-sec.b4 .f4{opacity:1;transform:none}
  .reel-sec.b2 .f1,.reel-sec.b3 .f2,.reel-sec.b4 .f3{opacity:.35;transform:scale(.94)}
  .reel-sec.b1 .c1,.reel-sec.b2 .c2,.reel-sec.b3 .c3,.reel-sec.b4 .c4{opacity:1;transform:none;transition-delay:.35s}
  .reel-sec.b2 .c1,.reel-sec.b3 .c2,.reel-sec.b4 .c3{opacity:0}
}
/* fallback: stacked frames, all copy */
@media (prefers-reduced-motion:reduce),(max-width:860px){
  .reel-sec{height:auto;padding:64px 0}
  .reel-sec::after{display:none}
  .reel-pin{position:static;height:auto;padding:0;display:block}
  .reel{height:auto;overflow:visible}
  .strip{position:static;flex-wrap:wrap;justify-content:center;transition:none}
  .frame{opacity:1;transform:none;flex-basis:min(300px,100%)}
  .reel-copy{height:auto;display:grid;gap:18px;text-align:left;max-width:none;margin-top:22px}
  .reel-copy .rc{position:static;opacity:1;transform:none}
}

/* ---- 3 · the spotlight sheen: a light passes across the word, once. The page stays
   light — no dimming, no box; the word itself catches it (Round 5 §6). ---- */
.shine{background-image:linear-gradient(105deg,currentColor 0 38%,#E9D8A6 47%,#FFF6DC 50%,#E9D8A6 53%,currentColor 62% 100%);
  background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:var(--ink);
  -webkit-text-fill-color:transparent;transition:none}
@media (prefers-reduced-motion:no-preference){
  .is-in .shine,.reel-sec.b1 .shine{animation:sheen 1.5s cubic-bezier(.4,0,.2,1) .35s forwards}
  @keyframes sheen{from{background-position:100% 0}to{background-position:0% 0}}
}
html.reduce .shine,html:not(.js) .shine{-webkit-text-fill-color:currentColor;background:none}