/* ════ v31 MOTION — travelling chrome M · kinetic grammar · text choreography · tilt sheen (round 5) ════ */

/* timing tokens — one grammar for the page (mirrored in JS as NX.kin.T): entrances are slow and eased-out,
   exits ~2.5× faster, hovers in between; staggers by unit */
/* easing vocabulary (v31.css): --ease = expo-out for everything that arrives or settles, --ease2 = quart in-out for
   everything that travels or leaves — nothing on the page invents a third curve */
:root{--kin-in:1.2s;--kin-out:.45s;--kin-hover:.6s;--kin-char:24ms;--kin-word:60ms;--kin-line:90ms}

/* 1 · the travelling chrome M: one small fixed canvas, moved by transform — over the atoms veil (845), under the
   menu (850) + header (900). Its soft shadow is baked into the scene, so no per-frame CSS blur filter here */
.mo-m{position:fixed;left:0;top:0;z-index:846;pointer-events:none;will-change:transform,opacity;contain:strict}
/* atoms dims the M through its windows; v31-motion folds that into the canvas opacity, so their filter would double it */
html .mo-m.atoms-fade{filter:none}
/* docked: the M IS the logo's ® — lift it over the header and hand the glyph's slot to it */
html.mo-docked .mo-m{z-index:901}
.hd__logo sup{transition:opacity .3s var(--ease,cubic-bezier(.16,1,.3,1)),transform .9s var(--ease,cubic-bezier(.16,1,.3,1))}
html.mo-docked .hd__logo sup{opacity:0}

/* 5a · statement characters (split by v31-motion-kin.js) */
.mo-w{display:inline-block;white-space:nowrap}
.mo-c3{display:inline-block}
/* armed: each word is a mask (clip-path keeps the baseline, unlike overflow) with one shared perspective;
   characters wait folded flat on their baseline and hinge up once their line gets .mo-in. No vertical offset: a
   rotation about the baseline stays inside the glyph box, so the ribbon's range-measured routing (v31-sections)
   reads the same box whether the letters are folded or standing. The per-character delay
   (--d) is capped in JS so every line is at rest within .9 s; the exit (--dr, last letter first) runs ~2.5× faster.
   Colour: pale → deep electric blue (--h), settling to ink like drying ink */
.mo-arm .mo-w{perspective:9em;perspective-origin:50% 100%;clip-path:inset(-.35em -.3em -.3em -.3em)}
.mo-arm .mo-c3{transform-origin:50% 100%;transform:rotateX(-78deg);opacity:0;
  transition:transform var(--kin-out) var(--ease2,cubic-bezier(.76,0,.24,1)) var(--dr,0ms),opacity .2s linear calc(var(--dr,0ms) + .2s)}
.mo-arm .mo-in .mo-c3{transform:none;opacity:1;animation:moHue .6s var(--ease,cubic-bezier(.16,1,.3,1)) var(--d,0ms) both;
  transition:transform .6s var(--ease,cubic-bezier(.16,1,.3,1)) var(--d,0ms),opacity .25s linear var(--d,0ms)}
@keyframes moHue{0%,35%{color:var(--h,#2f45ff)}100%{color:var(--ink,#0f1016)}}

/* 5d · hover text-roll: two stacked rows of characters, each rolls up with a small stagger */
.mo-roll{display:inline-flex;flex-direction:column;height:1.2em;line-height:1.2;overflow:hidden;vertical-align:middle}
.mo-roll__r{display:block;white-space:pre}
.mo-roll .mo-c{display:inline-block;transition:transform var(--kin-hover) var(--ease,cubic-bezier(.16,1,.3,1)) calc(var(--i,0) * 15ms)}
.mo-rl:hover .mo-c,.mo-rl:focus-visible .mo-c{transform:translateY(-100%)}

/* 6 · tilt + specular sheen (the lean itself is the `rotate` property, set from JS) — white light, blue glance */
.mo-tilt{perspective:1300px}
.mo-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;mix-blend-mode:screen;transition:opacity .7s var(--ease,cubic-bezier(.16,1,.3,1));
  background:
    radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.26),rgba(199,205,255,.08) 24%,transparent 52%),
    linear-gradient(112deg,transparent calc(var(--sx,50%) - 34%),rgba(199,205,255,.1) calc(var(--sx,50%) - 10%),rgba(255,255,255,.16) var(--sx,50%),transparent calc(var(--sx,50%) + 16%))}
.mo-hot .mo-sheen{opacity:1}

@media (hover:none),(pointer:coarse){.mo-sheen{display:none}}
@media (prefers-reduced-motion:reduce){.mo-m{display:none}html.mo-docked .hd__logo sup{opacity:1}.mo-arm .mo-c3{transform:none;opacity:1;transition:none;animation:none}.mo-roll .mo-c{transition:none}.mo-sheen{display:none}}