/* ============================================================================
   REDDENDA · MOTION SYSTEM (CSS)  —  /assets/reddenda-motion.css
   The FOUR motion verbs' presentation layer. Pairs 1:1 with reddenda-motion.js.

   ONE easing family · transform+opacity ONLY (filter:blur permitted only as a
   short ENTRANCE accent resolving to blur(0)) · every stagger an integer
   multiple of --stag · prefers-reduced-motion = the RESOLVED final frame,
   never blank, never mid-animation.

     VERB 1  rise-sharp kinetic type   (.k-w / .k-w-i / .k-accent, data-kinetic)
     VERB 2  focus-pull reveal         (.reveal / [data-stagger])
     VERB 3  scroll-choreographed      (--p driven sticky showcase)
     VERB 4  aurora + swarm canvas      (.rdn-aurora ambient; canvas via JS)
   ========================================================================== */

/* ============================ TIMING SPINE ============================== */
:root{
  --ease:cubic-bezier(.16,1,.3,1);       /* entrances (the settle) */
  --ease-out:cubic-bezier(.22,1,.36,1);  /* micro-interactions */
  --ease-in:cubic-bezier(.55,0,.85,.3);  /* EXITS only (menu close) */

  --d-xs:.18s; --d-sm:.34s; --d-md:.58s; --d-lg:.9s; --d-xl:1.15s;

  --stag:60ms;        /* base stagger; every delay is an integer multiple */
  --rise:1.15em;      /* kinetic word rise distance */
  --lift:34px;        /* reveal lift */
  --lift-sm:18px;     /* stagger-child lift */
}
@media(max-width:640px){
  :root{ --stag:46ms; --lift:24px; --d-lg:.78s; --d-xl:.96s; }
}

/* ====================================================================== */
/* VERB 1 — RISE-SHARP KINETIC TYPE                                        */
/* Per-WORD rise+blur→sharp; per-CHAR rationed to hero line-1 + proper      */
/* nouns; mono eyebrow types in a half-beat BEFORE the head (the two-beat). */
/* JS splits at load; spans are aria-hidden, parent carries aria-label.     */
/* ====================================================================== */
.k-line{ display:block; }
.k-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; }
.k-w-i{
  display:inline-block; will-change:transform,opacity;
  transform:translateY(var(--rise)) translateZ(0); opacity:0; filter:blur(6px);
  transition:transform var(--d-xl) var(--ease),
             opacity var(--d-lg) var(--ease),
             filter var(--d-lg) var(--ease);
  transition-delay:calc(var(--i,0) * var(--stag));
}
/* fire when the kinetic element (or its hero) is lit */
.k-in .k-w-i,
.hero.lit .k-w-i,
[data-kinetic].k-in .k-w-i{ transform:none; opacity:1; filter:blur(0); }

/* per-char materialize — tighter sub-stagger (rationed) */
[data-kinetic="chars"] .k-w-i{ transition-delay:calc(var(--i,0) * (var(--stag) * .45)); filter:blur(4px); }

/* ONE cobalt accent word per headline + underline that wipes in last */
.k-accent .k-w-i{ color:var(--cobalt); }
.k-accent{ position:relative; }
.k-accent::after{
  content:""; position:absolute; left:0; right:0; bottom:-.04em; height:1px;
  background:var(--cobalt); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-md) var(--ease) calc(var(--i,0) * var(--stag) + .12s);
}
.k-in .k-accent::after,.hero.lit .k-accent::after{ transform:scaleX(1); }

/* mono eyebrow types in a half-beat before the headline (signature two-beat) */
.k-eyebrow{ overflow:hidden; }
.k-eyebrow > span{
  display:inline-block; transform:translateY(100%);
  transition:transform var(--d-md) var(--ease);
}
.k-in .k-eyebrow > span,.hero.lit .k-eyebrow > span,
.reveal.in .k-eyebrow > span{ transform:none; }

/* ====================================================================== */
/* VERB 2 — FOCUS-PULL REVEAL                                              */
/* translateY + scale(.985) + blur(4px) → 0.  [data-stagger] cascades.     */
/* ====================================================================== */
.reveal{
  opacity:0; transform:translateY(var(--lift)) scale(.985); filter:blur(4px);
  transition:opacity var(--d-lg) var(--ease),
             transform var(--d-lg) var(--ease),
             filter var(--d-md) var(--ease);
  will-change:transform,opacity;
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

[data-stagger] > *{
  opacity:0; transform:translateY(var(--lift-sm)) scale(.99);
  transition:opacity var(--d-md) var(--ease), transform var(--d-md) var(--ease);
  transition-delay:calc(var(--i,0) * var(--stag) * 1.3);
}
[data-stagger].in > *{ opacity:1; transform:none; }

/* will-change is removed by JS on transitionend to free the compositor */
.reveal.settled,[data-stagger].settled > *{ will-change:auto; }

/* ====================================================================== */
/* VERB 3 — SCROLL-CHOREOGRAPHED SHOWCASE                                  */
/* A tall sticky stage; ONE rAF writes a single --p (0→1); CSS does the     */
/* rest via transform. NO scroll-jacking; --p quantized in JS.             */
/* ====================================================================== */
.scrub{ position:relative; }
.scrub__sticky{ position:sticky; top:0; min-height:100vh; min-height:100dvh; display:grid; align-content:center; overflow:hidden; }
/* phase opacity helper: each phase fades in over its slice of --p */
.scrub [data-phase]{ opacity:0; transition:opacity var(--d-md) var(--ease); }
.scrub [data-phase].on{ opacity:1; }
/* a single index line drawn by --p (scaleX) — the "intelligence index" */
.scrub__index{ transform:scaleX(var(--p,0)); transform-origin:left; }

/* ====================================================================== */
/* VERB 4 — AURORA (ambient; the canvas swarm is created in JS)            */
/* ====================================================================== */
.rdn-aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rdn-aurora b{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; mix-blend-mode:screen; display:block; }
.rdn-aurora .a1{ width:50vw; height:50vw; left:-10vw; top:-14vw;
  background:radial-gradient(circle,rgba(43,91,255,.55),transparent 62%); animation:rdnAuA 24s var(--ease) infinite; }
.rdn-aurora .a2{ width:42vw; height:42vw; right:-8vw; top:14vh;
  background:radial-gradient(circle,rgba(124,92,255,.40),transparent 62%); animation:rdnAuB 30s var(--ease) infinite; }
.rdn-aurora .a3{ width:36vw; height:36vw; left:34vw; bottom:-16vw;
  background:radial-gradient(circle,rgba(0,170,255,.30),transparent 62%); animation:rdnAuA 34s var(--ease) infinite reverse; }
@keyframes rdnAuA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6vw,4vh) scale(1.14); } }
@keyframes rdnAuB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5vw,-3vh) scale(1.1); } }
/* lite tier (set by JS on weak CPU): cheaper aurora */
body.rdn-lite .rdn-aurora b{ filter:blur(50px); animation:none; }
body.rdn-lite .rdn-aurora .a3{ display:none; }
.rdn-swarm{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }

/* ====================================================================== */
/* MICRO-INTERACTIONS (--ease-out)                                         */
/* ====================================================================== */
.eyebrow.cursor::after{
  content:""; display:inline-block; width:6px; height:1em; margin-left:7px;
  background:var(--cobalt); vertical-align:-.12em;
  animation:rdnBlink 1.1s steps(1) infinite;
}
@keyframes rdnBlink{ 0%,55%{ opacity:1; } 56%,100%{ opacity:0; } }

/* link underline sweep — left-origin scaleX */
.u-sweep{ position:relative; }
.u-sweep::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--cobalt); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-sm) var(--ease-out);
}
.u-sweep:hover::after,.u-sweep:focus-visible::after{ transform:scaleX(1); }

/* ====================================================================== */
/* REDUCED MOTION — one consolidated off-switch. Resolve to FINAL frame.   */
/* Page is fully composed AT REST: never blank, never mid-animation.       */
/* ====================================================================== */
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .k-w-i,[data-kinetic] .k-w-i,
  .reveal,[data-stagger] > *,
  .k-eyebrow > span,
  .scrub [data-phase]{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  .k-accent::after,.rb-def::before{ transform:scaleX(1); }
  .rb-def::before{ transform:scaleY(1); }
  .scrub [data-phase]{ opacity:1; }              /* show resolved END state of the scrub */
  .scrub__index{ transform:scaleX(1); }
  .rdn-aurora b{ animation:none; opacity:.4; }
  .eyebrow.cursor::after{ animation:none; opacity:.6; }
}