/* ============================================================
   HiVi Labs — Premium interaction layer (2026)
   Page-wide visual upgrades that attach to the EXISTING class
   system (.card--hover, .btn--primary, .text-gradient, .eyebrow)
   so every section levels up without per-section rewrites.

   Pairs with static/js/effects.js. Everything here is additive
   and progressive: with JS off or prefers-reduced-motion, the
   page falls back to its calm, fully-legible static state.
   ============================================================ */

/* ------------------------------------------------------------
   1. Scroll progress — thin living rail above the nav
   ------------------------------------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: calc(var(--z-nav) + 5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-hi) 45%, var(--accent-2) 100%);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------------------------
   2. Living gradient text — slow sheen drifts across headings.
      Wider gradient + animated position. Static fallback keeps
      the original token gradient.
   ------------------------------------------------------------ */
.has-fx .text-gradient {
  background-image: linear-gradient(
    110deg,
    #0B1124 0%,
    #1E40AF 26%,
    var(--accent) 44%,
    var(--accent-2-bright) 58%,
    var(--accent-hi) 74%,
    #0B1124 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: fx-text-sheen 7s var(--ease-in-out) infinite alternate;
}
@keyframes fx-text-sheen {
  to { background-position: 100% 50%; }
}

/* ------------------------------------------------------------
   3. Primary button — light-sweep + brighter ambient glow.
      JS adds the magnetic translate via inline transform; CSS
      keeps the hover lift composable through a custom prop.
   ------------------------------------------------------------ */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(130%); }

/* ------------------------------------------------------------
   4. Card spotlight + tilt — a radial highlight tracks the
      cursor (vars set in JS); subtle sheen on the top edge.
      Background is clipped by the card's own border-radius.
   ------------------------------------------------------------ */
.has-fx .card--hover {
  --fx-mx: 50%;
  --fx-my: 0%;
  transform-style: preserve-3d;
}
.has-fx .card--hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--fx-mx) var(--fx-my),
    rgba(59, 130, 246, 0.14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.has-fx .card--hover:hover::after { opacity: 1; }
/* keep real content above the spotlight layer */
.has-fx .card--hover > * { position: relative; z-index: 1; }
/* while actively tilting, drop the transform easing so it tracks 1:1 */
.has-fx .card--hover.is-tilting { transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }

/* ------------------------------------------------------------
   5. Ambient cursor light — a soft spotlight floating over the
      dark canvas, blended additively. Very low intensity.
   ------------------------------------------------------------ */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 540px; height: 540px;
  margin: -270px 0 0 -270px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12), rgba(0, 194, 160, 0.06) 40%, transparent 68%);
  mix-blend-mode: normal;
  transition: opacity 0.6s var(--ease-out);
  will-change: transform;
}
.cursor-glow.is-live { opacity: 1; }

/* ------------------------------------------------------------
   6. Reveal upgrade — content develops INTO focus (blur + rise).
      Applies to the JS reveal engine and GSAP data-anim items.
   ------------------------------------------------------------ */
.has-fx .reveal { filter: blur(8px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
.has-fx .reveal.is-visible { filter: blur(0); }

/* ------------------------------------------------------------
   7. Eyebrow — the leading hairline animates a light pulse,
      reinforcing the "signal routing" brand language.
   ------------------------------------------------------------ */
.has-fx .eyebrow::before {
  width: 32px;
  background: linear-gradient(90deg, transparent, var(--accent-hi));
  background-size: 200% 100%;
  animation: fx-eyebrow-pulse 3.4s var(--ease-in-out) infinite;
}
@keyframes fx-eyebrow-pulse {
  0%, 100% { opacity: 0.5; background-position: 0% 50%; }
  50%      { opacity: 1;   background-position: 100% 50%; }
}

/* ------------------------------------------------------------
   8. Nav CTA — gentle breathing glow to draw the primary action.
   ------------------------------------------------------------ */
.has-fx .nav__cta .btn--primary { box-shadow: 0 8px 30px -8px rgba(59, 130, 246, 0.55); animation: fx-cta-breathe 4.5s var(--ease-in-out) infinite; }
@keyframes fx-cta-breathe {
  0%, 100% { box-shadow: 0 8px 30px -8px rgba(59, 130, 246, 0.45); }
  50%      { box-shadow: 0 10px 40px -8px rgba(59, 130, 246, 0.6); }
}

/* ------------------------------------------------------------
   Reduced motion + coarse pointer: stand everything down.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .has-fx .text-gradient,
  .has-fx .eyebrow::before,
  .has-fx .nav__cta .btn--primary { animation: none; }
  .has-fx .text-gradient { background-position: 0 50%; }
  .has-fx .reveal { filter: none !important; }
  .cursor-glow { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}