/* =====================================================================
   AXON — Interaction layer styles
   ===================================================================== */

/* scroll progress bar */
.scroll-progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 101;
  background: var(--grad-gold); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; box-shadow: 0 0 12px rgba(255,153,50,.6);
}

/* cursor-follow glow (sits above everything, never blocks input) */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,1,.55), rgba(255,153,50,.18) 45%, transparent 70%);
  pointer-events: none; z-index: 9999; mix-blend-mode: screen;
  transition: opacity .25s var(--ease-out); will-change: transform, opacity;
}

/* nav scroll-spy active link */
.nav__links a.active { color: var(--forsythia); background: var(--surface); }

/* magnetic targets ease back smoothly when released */
.btn, .icon-btn, .to-top { will-change: transform; }

/* 3D tilt cards + cursor spotlight */
[data-tilt] { will-change: transform; transform-style: preserve-3d; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255,200,1,.12), transparent 62%);
  opacity: 0; transition: opacity var(--t-micro) var(--ease-out);
}
[data-tilt]:hover::after { opacity: 1; }
/* lift inner content for subtle depth on tilt */
[data-tilt] > * { transform: translateZ(0.01px); }

/* parallax helper */
[data-parallax] { transform: translateY(var(--py, 0)); will-change: transform; }

/* reveal nicety: stagger children with a clip-path wipe for headings */
.section-head h2 .grad-text { display: inline-block; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
  [data-tilt] { transform: none !important; }
}