/* ============================================================
   Cadence — FX layer (advanced motion, loads AFTER cadence-motion.css)
   Adds: rotating gold edge, gold line-wipe, count-up, eyebrow-rule
   grow, heading underline draw, hero load-in + parallax,
   process progress line, reel drag-scroll.
   Same conventions as cadence-motion.css: hide-states gated on
   html.js + (prefers-reduced-motion:no-preference) so the page is
   fully visible/usable with JS off or reduced motion on.
   Reuses the design tokens from cadence-site.css (gold ramp, --ease-out).
   ============================================================ */

/* @property lets the conic angle animate smoothly; no support => static ring */
@property --cad-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------------------------------------------------------- */
/* 1 · ROTATING GOLD EDGE  (gold sheen only — never gamer-RGB) */
/*     Ring is a JS-injected <i.cad-ring>, so no pseudo clashes */
/* ---------------------------------------------------------- */
.cad-edge{position:relative}
.cad-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;padding:1.4px;
  background:conic-gradient(from var(--cad-angle),
    transparent 0deg,transparent 46deg,
    rgba(216,199,173,0) 64deg,
    var(--gold-300) 116deg,var(--gold-400) 150deg,var(--gold-300) 184deg,
    rgba(216,199,173,0) 236deg,
    transparent 254deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease-out)}

@media (prefers-reduced-motion:no-preference){
  /* every box can show it — but only on hover/focus, so the page isn't a light show at rest */
  .cad-edge:hover>.cad-ring,
  .cad-edge:focus-within>.cad-ring{opacity:.95;animation:cadSpin 9s linear infinite}
  /* the few featured boxes glow continuously */
  .cad-edge-always>.cad-ring{opacity:1;animation:cadSpin 13s linear infinite}
}
/* reduced motion: a quiet static gold hairline on featured boxes, no spin */
@media (prefers-reduced-motion:reduce){
  .cad-edge-always>.cad-ring{opacity:.7;background:linear-gradient(135deg,var(--gold-400),transparent 62%)}
}
@keyframes cadSpin{to{--cad-angle:360deg}}

/* ---------------------------------------------------------- */
/* 2 · GOLD LINE-WIPE on featured media (one pass on reveal)   */
/* ---------------------------------------------------------- */
.cad-wipe{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:5}
.cad-wipe>i{position:absolute;top:-12%;bottom:-12%;width:34%;left:-55%;transform:skewX(-12deg);
  background:linear-gradient(90deg,transparent,rgba(216,199,173,.16),var(--gold-300),rgba(216,199,173,.16),transparent)}
@media (prefers-reduced-motion:no-preference){
  html.js .fx-wipe.is-in .cad-wipe>i{animation:cadWipe 1.15s var(--ease-out) .1s both}
}
@keyframes cadWipe{from{left:-55%}to{left:140%}}

/* ---------------------------------------------------------- */
/* 3 · EYEBROW lead-rule grow + HEADING underline draw         */
/* ---------------------------------------------------------- */
/* short editorial stroke, not a full-width underline (always present) */
[data-underline]{position:relative;display:inline-block}
[data-underline]::after{content:"";position:absolute;left:.04em;bottom:-.18em;width:1.7em;height:3px;
  border-radius:2px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
@media (prefers-reduced-motion:no-preference){
  /* the 26px gold lead-rule on .eyebrow draws out as its block reveals (.is-in from motion layer) */
  html.js .sec-head .eyebrow::before,
  html.js .cta-inner .eyebrow::before{width:0;transition:width .6s var(--ease-out) .2s}
  html.js .sec-head.is-in .eyebrow::before,
  html.js .cta-inner.is-in .eyebrow::before{width:26px}

  /* stroke draw — JS adds .udl-in when the heading scrolls in */
  html.js [data-underline]::after{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) .15s}
  html.js [data-underline].udl-in::after{transform:scaleX(1)}
}

/* ---------------------------------------------------------- */
/* 4 · HERO load-in + subtle parallax                         */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-copy>*,
  html.js .hero-badge{opacity:0;transform:translate3d(0,26px,0);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
  html.js .hero-v.fx-loaded .hero-copy>*{opacity:1;transform:none}
  html.js .hero-v.fx-loaded .hero-copy>*:nth-child(1){transition-delay:.10s}
  html.js .hero-v.fx-loaded .hero-copy>*:nth-child(2){transition-delay:.22s}
  html.js .hero-v.fx-loaded .hero-copy>*:nth-child(3){transition-delay:.34s}
  html.js .hero-v.fx-loaded .hero-copy>*:nth-child(4){transition-delay:.46s}
  html.js .hero-v.fx-loaded .hero-badge{opacity:1;transform:none;transition-delay:.58s}
  .hero-v .hero-media video{will-change:transform}  /* JS drives the parallax translate */
}

/* ---------------------------------------------------------- */
/* 5 · CADENCE TIMELINE (process plays 01 -> 05 like a beat)   */
/*    Rail + ticks + playhead injected by JS; per-step nodes.  */
/*    .proc-anim = JS armed the sequence (steps wait, dimmed)  */
/*    .proc-play = section scrolled in, the cadence plays once */
/*    Without JS or with reduced motion: static lit gold state */
/* ---------------------------------------------------------- */
.proc{position:relative;padding-top:44px}
.proc>.step{position:relative;z-index:1}

/* film-ruler rail */
.proc-rail{position:absolute;top:14px;left:0;right:0;height:2px;z-index:0;
  background:var(--border-subtle);border-radius:2px}
.proc-rail .ticks{position:absolute;left:0;right:0;top:-3px;height:8px;opacity:.45;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--border-default) 0 1px,transparent 1px 24px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.proc-rail .fill{position:absolute;inset:0;border-radius:inherit;transform-origin:left;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));
  box-shadow:0 0 14px var(--glow-amb)}
/* playhead: glowing dot + a hairline that sweeps down over the timecode row */
.proc-rail .phead{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--gold-300);opacity:0;
  box-shadow:0 0 16px 3px rgba(201,178,138,.6)}
.proc-rail .phead::after{content:"";position:absolute;left:5px;top:11px;width:1px;height:26px;
  background:linear-gradient(180deg,var(--gold-300),transparent)}

/* beat nodes — one per step, sitting on the rail above each timecode */
.proc .pnode{position:absolute;top:-34px;left:1px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;z-index:2;
  background:var(--gold-400);border:1px solid var(--gold-300);
  box-shadow:0 0 10px rgba(201,178,138,.45);
  transition:filter var(--dur-base) var(--ease-out)}
.proc .pnode::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid var(--gold-300);opacity:0;transform:scale(.4)}
/* hover re-lights a step's beat (filter dodges animation fill-mode) */
.proc .step:hover .pnode{filter:brightness(1.35) drop-shadow(0 0 7px rgba(201,178,138,.8))}
.proc .step h4{transition:color var(--dur-base)}
.proc .step:hover h4{color:var(--cream-50)}

@media (prefers-reduced-motion:no-preference){
  /* armed: rail empty, beats unlit, steps held back */
  html.js .proc.proc-anim .proc-rail .fill{transform:scaleX(0)}
  html.js .proc.proc-anim .pnode{background:var(--ink-500);border-color:var(--border-strong);box-shadow:none}
  html.js .proc.proc-anim>.step{opacity:.14;transform:translateY(12px)}

  /* play: one 3.6s linear sweep; each beat fires as the head crosses it */
  html.js .proc.proc-play .proc-rail .fill{animation:cadFill 3.6s linear both}
  html.js .proc.proc-play .proc-rail .phead{animation:cadHead 3.6s linear both}
  html.js .proc.proc-play>.step{animation:cadStepIn .75s var(--ease-out) both}
  html.js .proc.proc-play .pnode{animation:cadBeat .55s var(--ease-out) both}
  html.js .proc.proc-play .pnode::after{animation:cadRipple .9s ease-out both}
  html.js .proc.proc-play>.step:nth-child(1),html.js .proc.proc-play>.step:nth-child(1) .pnode{animation-delay:.02s}
  html.js .proc.proc-play>.step:nth-child(2),html.js .proc.proc-play>.step:nth-child(2) .pnode{animation-delay:.72s}
  html.js .proc.proc-play>.step:nth-child(3),html.js .proc.proc-play>.step:nth-child(3) .pnode{animation-delay:1.44s}
  html.js .proc.proc-play>.step:nth-child(4),html.js .proc.proc-play>.step:nth-child(4) .pnode{animation-delay:2.16s}
  html.js .proc.proc-play>.step:nth-child(5),html.js .proc.proc-play>.step:nth-child(5) .pnode{animation-delay:2.88s}
  html.js .proc.proc-play>.step:nth-child(1) .pnode::after{animation-delay:.07s}
  html.js .proc.proc-play>.step:nth-child(2) .pnode::after{animation-delay:.77s}
  html.js .proc.proc-play>.step:nth-child(3) .pnode::after{animation-delay:1.49s}
  html.js .proc.proc-play>.step:nth-child(4) .pnode::after{animation-delay:2.21s}
  html.js .proc.proc-play>.step:nth-child(5) .pnode::after{animation-delay:2.93s}
  /* the last beat keeps a quiet REC-style pulse — the cadence stays rolling */
  html.js .proc.proc-play>.step:nth-child(5) .pnode{
    animation:cadBeat .55s var(--ease-out) 2.88s both,cadHold 2.6s ease-in-out 3.9s infinite}
}
@keyframes cadFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cadHead{0%{left:0;opacity:0}3%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes cadStepIn{from{opacity:.14;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cadBeat{0%{background:var(--ink-500);border-color:var(--border-strong);box-shadow:none;transform:scale(1)}
  45%{transform:scale(1.55)}
  100%{background:var(--gold-400);border-color:var(--gold-300);box-shadow:0 0 10px rgba(201,178,138,.45);transform:scale(1)}}
@keyframes cadRipple{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
@keyframes cadHold{0%,100%{box-shadow:0 0 10px rgba(201,178,138,.45)}50%{box-shadow:0 0 18px 4px rgba(201,178,138,.75)}}

/* stacked layout (<980px): rail hides, a vertical spine carries the beats */
@media (max-width:980px){
  .proc{padding-top:0;padding-left:30px}
  .proc::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;
    background:linear-gradient(180deg,var(--border-gold),var(--border-subtle))}
  .proc-rail{display:none}
  .proc .pnode{top:5px;left:-30px;margin-left:0}
}

/* ---------------------------------------------------------- */
/* 6 · REEL DRAG-SCROLL  (JS takes over the transform)        */
/* ---------------------------------------------------------- */
.reel-marquee.fx-drag{cursor:grab;touch-action:pan-y}
.reel-marquee.fx-drag .reel-track{animation:none!important;will-change:transform}
.reel-marquee.fx-drag.dragging{cursor:grabbing}
.reel-marquee.fx-drag.dragging .reel-card{pointer-events:none}

/* ---------------------------------------------------------- */
/* 7 · MOBILE PINNED PROCESS SWIPE                             */
/*    JS adds .proc-pin to #process and drives the track's     */
/*    translate; everything here is layout + card states.      */
/*    Without JS (no .proc-pin) the stacked list stands.       */
/* ---------------------------------------------------------- */
@media (max-width:980px){
  #process.proc-pin .band-inner{position:sticky;top:0;min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  #process.proc-pin .band-inner>div:first-child{margin-bottom:30px!important}
  #process.proc-pin .proc{display:flex;flex-direction:row;align-items:stretch;gap:14px;
    padding:0;will-change:transform}
  #process.proc-pin .proc::before{display:none}   /* vertical timeline line off */
  #process.proc-pin .pnode{display:none}          /* beat dots off */
  #process.proc-pin .proc>.step{flex:0 0 min(76vw,320px);
    transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
  #process.proc-pin .proc>.step:not(.sw-on){opacity:.4;transform:scale(.955)}
  #process.proc-pin .proc>.step.sw-on{box-shadow:inset 0 1px 0 rgba(201,178,138,.14),0 18px 44px -22px var(--glow-amb)}
  /* gold progress line under the track, filled by JS */
  .proc-mprog{display:none}
  #process.proc-pin .proc-mprog{display:block;height:2px;margin-top:30px;
    background:var(--border-subtle);border-radius:2px;overflow:hidden}
  .proc-mprog i{display:block;height:100%;transform-origin:left;transform:scaleX(0);
    background:linear-gradient(90deg,var(--gold-600),var(--gold-300));
    box-shadow:0 0 10px var(--glow-amb)}
}

/* ---------------------------------------------------------- */
/* 8 · HERO PREMIERE (letterbox open + word rise + push-in)    */
/*    JS splits the H1 into .hw word masks and adds .fx-split; */
/*    .fx-loaded starts the sequence. No-JS / reduced motion   */
/*    keeps the static hero.                                   */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* cinema bars part to open the frame */
  html.js .hero-v::before,html.js .hero-v::after{content:"";position:absolute;left:0;right:0;z-index:5;
    height:13vh;background:var(--ink-900);pointer-events:none;
    transition:transform 1.15s cubic-bezier(.7,0,.2,1) .05s}
  html.js .hero-v::before{top:0;transform-origin:top}
  html.js .hero-v::after{bottom:0;transform-origin:bottom}
  html.js .hero-v.fx-loaded::before,html.js .hero-v.fx-loaded::after{transform:scaleY(0)}
  /* the frame pushes in while the bars part (Ken Burns entrance) */
  html.js .hero-v .hero-media{transform:scale(1.12);opacity:.35;
    transition:transform 2.4s cubic-bezier(.22,.9,.24,1),opacity 1.5s ease .1s}
  html.js .hero-v.fx-loaded .hero-media{transform:scale(1);opacity:1}
  /* headline: opt out of the block fade, rise word-by-word through masks
     with a blur-to-sharp rack focus on the whole line */
  html.js .hero-v.fx-split .hero-copy>h1{opacity:1;transform:none;transition:none;
    animation:heroH1Focus 1.25s var(--ease-out) .25s both}
  .hero-copy h1 .hw{display:inline-block;overflow:hidden;vertical-align:bottom;
    padding-bottom:.09em;margin-bottom:-.09em}
  html.js .fx-split .hero-copy h1 .hw i{display:inline-block;font-style:inherit;
    transform:translateY(118%) rotate(3deg);transform-origin:left bottom;
    transition:transform .95s cubic-bezier(.19,1,.22,1)}
  html.js .fx-split.fx-loaded .hero-copy h1 .hw i{transform:none}
  @keyframes heroH1Focus{from{filter:blur(7px)}to{filter:blur(0)}}
  /* copy container gets inline scroll-drift transforms from JS */
  .hero-v .hero-copy{will-change:transform,opacity}
}