/* ==============================================================
   AURIX — motion.css
   Scroll-SCRUBBED animation system: JS writes --p (0→1) as the
   element crosses the viewport, every frame, both directions.
   Nothing toggles — progress IS scroll position, so all effects
   play forward and reverse by construction. Transform/opacity only.
   ============================================================== */

/* per-element progress window: children shift their window via --d */
html.js [data-scrub] {
  --pp: clamp(0, calc((var(--p, 0) - var(--d, 0) * 0.09) / 0.72), 1);
  opacity: var(--pp);
  will-change: transform, opacity;
}
html.js [data-scrub=""] ,
html.js [data-scrub="up"]    { transform: translateY(calc((1 - var(--pp)) * 44px)); }
html.js [data-scrub="down"]  { transform: translateY(calc((1 - var(--pp)) * -44px)); }
html.js [data-scrub="left"]  { transform: translateX(calc((1 - var(--pp)) * -52px)); }
html.js [data-scrub="right"] { transform: translateX(calc((1 - var(--pp)) * 52px)); }
html.js [data-scrub="scale"] { transform: scale(calc(.92 + var(--pp) * .08)); }
html.js [data-scrub="fade"]  { transform: none; }

/* chart line draw: dashoffset follows section progress (JS sets --p) */
.draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--p, 0))); }

/* headline scramble target (JS-driven) */
[data-scramble] { display: inline-block; min-width: 0; }

/* parallax glow orbs (JS writes --py px) */
.plx { transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform; }

/* console log lines appear via JS typing loop */
.console__log div { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s var(--eo); }
.console__log div.on { opacity: 1; transform: none; }

/* ---------------- capture mode (?capture QA renders) ---------------- */
html.capture [data-scrub] { --pp: 1 !important; opacity: 1 !important; transform: none !important; }
html.capture .draw { stroke-dashoffset: 0 !important; }
html.capture .deck__pin { position: static; min-height: 0; }
html.capture .deck__track { transform: none !important; flex-wrap: wrap; }
html.capture .deck__card { width: 100%; }
html.capture .console__log div { opacity: 1; transform: none; }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-scrub] { opacity: 1 !important; transform: none !important; }
  .draw { stroke-dashoffset: 0 !important; }
  .plx { transform: none !important; }
  .eq i, .callhud__ring::before, .callhud__ring::after,
  .graph__pipe::after, .tchat__typing i,
  .statusbar .ok i, .chip i, .console__live i, .console__caret,
  .agent__live i, .btn--volt::after {
    animation: none !important;
  }
  .console__log div { opacity: 1; transform: none; }
  .deck__pin { position: static; min-height: 0; }
  .deck__track { transform: none !important; flex-direction: column; }
  .deck__card { width: 100%; }
  * { transition-duration: .01ms !important; }
}