/* ============================================================
   NationA — MOTION / INTERACTIVE LAYER (added on top of the design)
   Pairs with the <MotionLayer/> component (ported from motion.js).
   Pure progressive enhancement: if JS never runs, layout is unaffected;
   everything degrades to static under prefers-reduced-motion.
   Loaded AFTER styles.css / pages.css so design tokens
   (--spectrum, --glaze, --line, --surface) resolve.
   NOTE: reveal-on-scroll + poster marquee already live in styles.css —
   this file only adds the new pointer/scroll interactions.
   ============================================================ */

/* ---------- nav scroll-progress bar ---------- */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--spectrum); z-index: 101;
}
.nav .scroll-progress { transition: opacity .35s; }
.nav:not(.scrolled) .scroll-progress { opacity: 0; }

/* ---------- card spotlight (cursor-following glow) ----------
   targets already have position:relative except .role, so ensure it here
   (relative with no offsets — no visual/layout change). */
.engine, .feat, .phase, .role { position: relative; }
.engine::after, .feat::after, .phase::after, .role::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(123, 108, 255, 0.16), transparent 55%);
  opacity: 0; transition: opacity .4s; mix-blend-mode: screen;
}
.engine.spot::after, .feat.spot::after, .phase.spot::after, .role.spot::after { opacity: 1; }

/* ---------- magnetic buttons ---------- */
.btn { will-change: transform; }
.btn.mag { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 2px)); }

/* ---------- parallax layers ---------- */
[data-parallax] { will-change: transform; }

/* ---------- reduced-motion: degrade the interactive layer to static ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn.mag { transform: none; }
  [data-parallax] { transform: none !important; }
  .scroll-progress { transition: none; }
}