/* ============================================================
   FUZE LABS — FX 2026
   Ambient, glass, neumorphism, gradient text, split-text,
   tilt, cursor, spotlight, progress, scroll-spy.
   Indigo/violet/blue system — distinct from any green palette.
   ============================================================ */

/* ---------- FX tokens ---------- */
:root {
  --fx-indigo: oklch(0.58 0.19 254);
  --fx-violet: oklch(0.65 0.18 248);
  --fx-blue:   oklch(0.73 0.15 238);
  --grad-brand: linear-gradient(100deg,
      var(--fx-indigo) 0%, var(--fx-violet) 34%,
      var(--fx-blue) 64%, var(--fx-indigo) 100%);
}

/* ============================================================
   AMBIENT — aurora, grain, vignette
   These sit behind transparent (light) sections; .dark panels
   paint over them and carry their own canvas glow instead.
   ============================================================ */
.fx-ambient {
  position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
}
.fx-aurora {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  mix-blend-mode: normal;
  will-change: transform;
}
.fx-aurora.a1 { width: 48vw; height: 48vw; left: -8vw;  top: -8vw;
  background: radial-gradient(circle at 50% 50%, var(--fx-indigo), transparent 68%); animation: drift1 28s ease-in-out infinite; }
.fx-aurora.a2 { width: 42vw; height: 42vw; right: -8vw; top: 10vh;
  background: radial-gradient(circle at 50% 50%, var(--fx-violet), transparent 68%); animation: drift2 32s ease-in-out infinite; }
.fx-aurora.a3 { width: 56vw; height: 56vw; left: 18vw; top: 48vh;
  background: radial-gradient(circle at 50% 50%, var(--fx-blue), transparent 70%); animation: drift3 26s ease-in-out infinite; opacity: 0.42; }
.fx-aurora.a4 { width: 40vw; height: 40vw; right: 6vw; bottom: -10vh;
  background: radial-gradient(circle at 50% 50%, var(--fx-indigo), transparent 70%); animation: drift1 30s ease-in-out infinite reverse; opacity: 0.4; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vw,6vh) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7vw,8vh) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(5vw,-7vh) scale(0.92)} }

/* grain — subtle, over content but below nav */
.fx-grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: var(--grain-url);
  background-size: 220px 220px;
}

/* vignette — cool electric-navy edges, top-weighted */
.fx-vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(6,13,34,0.12), transparent 60%),
    radial-gradient(120% 90% at 50% 120%, rgba(6,13,34,0.08), transparent 55%);
}

/* ============================================================
   LIGHT STREAMS (canvas) — flowing indigo ribbons
   ============================================================ */
.fx-streams {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.fx-streams.soft { opacity: 0.5; }          /* over light hero */
.hero > .wrap, .license-band > *:not(.fx-streams):not(.lb-glow),
.contact-grid { position: relative; z-index: 1; }
.hero { isolation: isolate; }

/* ============================================================
   GLASS / faux-glass
   ============================================================ */
.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.nav.scrolled .nav-inner { height: 64px; }
.nav-inner { transition: height .4s var(--ease); }

.hero-tag {
  background: color-mix(in srgb, var(--card) 60%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
.wheel-detail {
  background: color-mix(in srgb, #fff 5%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-ink-soft);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 32px);
}

/* mobile drawer blur */
@media (max-width: 720px) {
  .nav-links.open {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
  }
}

/* ============================================================
   NEUMORPHISM — soft extruded reliefs
   ============================================================ */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hero-stats .stat {
  padding: 13px 15px 11px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow:
    -5px -5px 12px rgba(255,255,255,0.75),
     6px  6px 16px rgba(10,22,64,0.10),
     inset 0 0 0 1px rgba(255,255,255,0.35);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.hero-stats .stat:hover {
  transform: translateY(-3px);
  box-shadow:
    -3px -3px 9px rgba(255,255,255,0.7),
     4px  4px 12px rgba(10,22,64,0.12),
     inset 0 0 0 1px rgba(22,102,255,0.25);
}
.proc-step .ps-dot {
  box-shadow:
    -2px -2px 5px rgba(255,255,255,0.8),
     2px  2px 6px rgba(10,22,64,0.18);
}

/* ============================================================
   GRADIENT TEXT — animated brand sweep
   ============================================================ */
.grad-text {
  background: var(--grad-brand);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradflow 9s linear infinite;
}
@keyframes gradflow { to { background-position: 280% 0; } }
/* hero emphasis always rides the animated brand gradient (any language) */
.hero h1 .em {
  background: var(--grad-brand);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradflow 9s linear infinite;
}

/* ============================================================
   SPLIT-TEXT — H1 word-by-word reveal
   ============================================================ */
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.hero h1 .word > span { display: inline-block; transform: translateY(112%); transition: transform .82s var(--ease); }
.hero h1.split-in .word > span { transform: none; }

/* ============================================================
   GRADIENT HAIRLINE BORDER — animated on hover / featured
   ============================================================ */
.pillar, .type-card { position: relative; }
.pillar::after, .type-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: var(--grad-brand); background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--ease);
}
.pillar:hover::after, .type-card:hover::after { opacity: 1; animation: gradflow 4s linear infinite; }

/* glass + soft relief on cards (2026) */
.pillar {
  background: color-mix(in srgb, var(--card) 68%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow:
    -6px -6px 16px rgba(255,255,255,0.45),
    14px 18px 40px -18px rgba(10,22,64,0.22);
}
.type-card {
  background: color-mix(in srgb, var(--card) 62%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:
    -4px -4px 12px rgba(255,255,255,0.4),
    10px 14px 30px -16px rgba(10,22,64,0.18);
}
/* keep the dark custom type-card opaque */
.type-card[style*="--ink"] { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); }

/* ============================================================
   GLOWLINE — light line travelling across a feature
   ============================================================ */
.glowline { position: relative; overflow: hidden; }
.glowline::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  transform: translateX(-100%); animation: lineflow 4.5s ease-in-out infinite;
  opacity: 0.9;
}
@keyframes lineflow { 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* ============================================================
   SHEEN SWEEP — shine across primary button on hover
   ============================================================ */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-18deg); transition: none; pointer-events: none;
}
.btn-primary:hover::before { animation: sheen .85s var(--ease) forwards; }
@keyframes sheen { to { left: 130%; } }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 120;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--grad-brand); background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(22,102,255,0.7);
  animation: gradflow 6s linear infinite;
}

/* ============================================================
   SCROLL-SPY active nav link
   ============================================================ */
.nav-links a.active { color: var(--fg); }
.nav-links a.active::after { width: 100%; }

/* ============================================================
   CURSOR HALO + HERO SPOTLIGHT
   ============================================================ */
.fx-halo {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; z-index: 140;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(90,160,255,0.85), rgba(22,102,255,0.25) 55%, transparent 70%);
  transform: translate(-50%, -50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .3s;
  opacity: 0; will-change: transform;
}
.fx-halo.on { opacity: 1; }
.fx-halo.grow { width: 64px; height: 64px; }

.hero-spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 40%),
              rgba(22,102,255,0.16), transparent 60%);
}
.hero:hover .hero-spot { opacity: 1; }

/* tilt smoothing + reveal blur */
.tilt { transform-style: preserve-3d; }
.reveal { filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in { filter: none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora, .grad-text, .glowline::before, .scroll-progress { animation: none !important; }
  .hero h1 .word > span { transform: none !important; }
  .fx-halo, .hero-spot, .fx-streams { display: none !important; }
  .reveal { filter: none !important; }
}

/* coarse pointer / touch — kill cursor-driven fx */
@media (hover: none), (pointer: coarse) {
  .fx-halo { display: none !important; }
}