/* ══════════════════════════════════════════════════════════════════
   TNA MOTION LAYER  ·  ambient, on-brand, compositor-only
   Layers on top of redesign.css. Animates ONLY transform / opacity.
   Everything is gated behind prefers-reduced-motion: no-preference,
   so motion-sensitive visitors get a fully static (and complete) page.
   ══════════════════════════════════════════════════════════════════ */

/* ---- static structure (safe for everyone, no motion) ------------- */
.amb            { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.amb + *        { position:relative; z-index:1; }
.amb-orb        { position:absolute; border-radius:50%; filter:blur(54px); opacity:.42; }
.amb-orb--1     { width:min(46vw,560px); aspect-ratio:1; top:-14%; left:-8%;
                  background:radial-gradient(circle, color-mix(in oklab, var(--signal) 42%, transparent), transparent 68%); }
.amb-orb--2     { width:min(36vw,440px); aspect-ratio:1; top:14%; right:-10%;
                  background:radial-gradient(circle, color-mix(in oklab, var(--signal-bright, var(--signal)) 34%, transparent), transparent 66%); }
.amb-orb--3     { width:min(30vw,360px); aspect-ratio:1; bottom:-16%; left:34%;
                  background:radial-gradient(circle, color-mix(in oklab, var(--signal-deep, var(--signal)) 26%, transparent), transparent 70%); opacity:.3; }

/* guide-star mascot — the on-brand "character": a drifting North Star */
.guide-star     { position:absolute; width:64px; height:64px; pointer-events:none; z-index:2;
                  color:var(--signal); filter:drop-shadow(0 6px 18px color-mix(in oklab, var(--signal) 38%, transparent)); }
.guide-star svg { width:100%; height:100%; display:block; }
.guide-star .gs-core   { fill:currentColor; }
.guide-star .gs-ring   { stroke:currentColor; opacity:.5; }
.guide-star .gs-spark  { fill:currentColor; transform-origin:center; }

/* Maya mascot — peeks UP from BEHIND the answer card (soro pattern: occluded,
   not floating in front). The card occludes her lower half; scroll makes her duck
   behind it (scroll shim in index.html). Outer = centering + scroll-duck; inner
   <img> carries the idle so the two transforms never fight. */
.answer-stage    { position:relative; }
.answer-stack    { position:relative; z-index:2; }      /* card sits IN FRONT of Maya */
.maya-mascot     { position:absolute; left:50%; top:-120px; width:164px; height:164px; z-index:1;
                   pointer-events:none; transform:translateX(-50%);
                   filter:drop-shadow(0 16px 26px color-mix(in oklab, var(--ink, #1a1a1a) 22%, transparent)); }
.maya-mascot img { width:100%; height:100%; display:block; object-fit:contain; transform-origin:bottom center; }
@media (max-width:560px) { .maya-mascot { width:122px; height:122px; top:-88px; } }

/* engine marquee — TNA's answer to soro's flag row: WHERE you get cited */
.cite-ticker   { position:relative; overflow:hidden; border-block:1px solid var(--line);
                  background:var(--paper-sunk, var(--surface)); padding-block:.9rem;
                  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cite-ticker__track { display:flex; width:max-content; gap:2.6rem; align-items:center; }
.cite-ticker__item  { display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
                  font-family:var(--font-mono); font-size:var(--fs-sm); letter-spacing:var(--tk-wide);
                  text-transform:uppercase; color:var(--text-soft); }
.cite-ticker__item b { color:var(--ink); font-weight:600; letter-spacing:var(--tk-snug); text-transform:none; font-family:var(--font-display); }
.cite-ticker__dot   { width:5px; height:5px; border-radius:50%; background:var(--signal); flex-shrink:0; }

/* ---- motion (only when the visitor is OK with it) ---------------- */
@media (prefers-reduced-motion: no-preference) {

  .amb-orb        { will-change:transform; }
  .amb-orb--1     { animation:amb-drift-a 26s ease-in-out infinite; }
  .amb-orb--2     { animation:amb-drift-b 32s ease-in-out infinite; }
  .amb-orb--3     { animation:amb-drift-a 38s ease-in-out infinite reverse; }
  @keyframes amb-drift-a { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,6%,0) scale(1.07)} }
  @keyframes amb-drift-b { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-5%,4%,0) scale(1.05)} }

  /* hero visual breathes */
  .hero-float     { animation:tna-float 7s ease-in-out infinite; will-change:transform; }
  .hero-float--b  { animation:tna-float 9s ease-in-out infinite; animation-delay:-2.5s; }
  @keyframes tna-float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-10px) rotate(-.45deg)} }

  /* guide-star bobs + twinkles */
  .guide-star     { animation:tna-bob 5.5s ease-in-out infinite; will-change:transform; }
  .guide-star .gs-spark { animation:tna-twinkle 3.4s ease-in-out infinite; }
  .guide-star .gs-ring  { animation:tna-spin 22s linear infinite; transform-origin:center; }

  /* Maya idle — breathes + a slow friendly wave-tilt (all on the <img>, so the
     outer element keeps translateX(-50%) for centering + the JS scroll-duck). */
  .maya-mascot img { animation:maya-idle 6s ease-in-out infinite; will-change:transform; }
  @keyframes maya-idle {
    0%,100% { transform:translateY(0)    rotate(-2.4deg) scaleY(1);    }
    25%     { transform:translateY(-4px) rotate(1.6deg)  scaleY(1.015);}
    50%     { transform:translateY(-1px) rotate(2.6deg)  scaleY(.99);  }
    75%     { transform:translateY(-5px) rotate(0deg)    scaleY(1.01); }
  }
  @keyframes tna-bob     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
  @keyframes tna-twinkle { 0%,100%{opacity:.55; transform:scale(.82)} 50%{opacity:1; transform:scale(1.12)} }
  @keyframes tna-spin    { to{transform:rotate(360deg)} }

  /* engine marquee scroll (pauses on hover) */
  .cite-ticker__track { animation:tna-marquee 34s linear infinite; will-change:transform; }
  .cite-ticker:hover .cite-ticker__track { animation-play-state:paused; }
  @keyframes tna-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* primary-button sheen on hover */
  .btn-primary    { position:relative; overflow:hidden; }
  .btn-primary > * { position:relative; z-index:1; }
  .btn-primary::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(110deg, transparent 35%, color-mix(in oklab, #fff 38%, transparent) 50%, transparent 65%);
    transform:translateX(-130%); }
  .btn-primary:hover::after { animation:tna-sheen 0.9s ease; }
  @keyframes tna-sheen { to{transform:translateX(130%)} }

  /* score ring soft pulse */
  .score-chip     { animation:tna-glow 4.5s ease-in-out infinite; }
  @keyframes tna-glow { 0%,100%{box-shadow:var(--sh-2, 0 8px 24px rgba(0,0,0,.08))} 50%{box-shadow:0 10px 32px color-mix(in oklab, var(--signal) 28%, transparent)} }
}