/* ================================================================
   SmartFlux v2 — DRAMATIC Effects Overhaul
   ================================================================ */

/* ===== AMBIENT — bolder, more visible ===== */
.ambient {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ambient::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(55% 45% at 10% 0%, color-mix(in oklab, var(--a2) 16%, transparent), transparent 55%),
    radial-gradient(45% 35% at 90% 5%, color-mix(in oklab, var(--a1) 12%, transparent), transparent 55%),
    radial-gradient(60% 40% at 50% 100%, color-mix(in oklab, var(--a3) 10%, transparent), transparent 55%);
  filter: blur(16px);
}
.ambient::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 65%);
}

/* Aurora — bigger, more colorful */
.aurora {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  filter: blur(80px); opacity: .4;
}
.aurora .blob { position: absolute; border-radius: 50%; will-change: transform }
.aurora .b1 {
  width: 600px; height: 600px; top: -12%; left: -6%;
  background: radial-gradient(circle, color-mix(in oklab, var(--a1) 55%, transparent), transparent 70%);
  animation: aA 16s ease-in-out infinite;
}
.aurora .b2 {
  width: 500px; height: 500px; top: 28%; right: -12%;
  background: radial-gradient(circle, color-mix(in oklab, var(--a2) 45%, transparent), transparent 70%);
  animation: aB 20s ease-in-out infinite;
}
.aurora .b3 {
  width: 650px; height: 650px; bottom: -22%; left: 28%;
  background: radial-gradient(circle, color-mix(in oklab, var(--a3) 35%, transparent), transparent 70%);
  animation: aC 24s ease-in-out infinite;
}
@keyframes aA {
  0%, 100% { transform: translate(0, 0) scale(1) }
  33% { transform: translate(14vw, 12vh) scale(1.12) }
  66% { transform: translate(-7vw, 5vh) scale(.9) }
}
@keyframes aB {
  0%, 100% { transform: translate(0, 0) scale(1) }
  33% { transform: translate(-11vw, -9vh) scale(1.18) }
  66% { transform: translate(6vw, 13vh) scale(.86) }
}
@keyframes aC {
  0%, 100% { transform: translate(0, 0) scale(1) }
  33% { transform: translate(9vw, -14vh) scale(.94) }
  66% { transform: translate(-12vw, 7vh) scale(1.1) }
}

/* Grain */
.grain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-grain="false"] .grain { display: none }
#particles { position: fixed; inset: 0; z-index: 1; pointer-events: none }

/* Cursor glow */
.cursor-glow {
  position: fixed; width: 350px; height: 350px; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle, color-mix(in oklab, var(--a1) 20%, transparent), transparent 70%);
  transform: translate(-50%, -50%);
  transition: left .06s linear, top .06s linear, opacity .5s;
  opacity: 0; mix-blend-mode: screen; filter: blur(24px);
}
.cursor-glow.active { opacity: .5 }

/* ============================================
   ★ HERO GLOW — massive gradient aura
   ============================================ */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 900px;
  height: 600px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 50%, color-mix(in oklab, var(--a1) 40%, transparent), transparent 60%),
    radial-gradient(ellipse at 60% 40%, color-mix(in oklab, var(--a2) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 70%, color-mix(in oklab, var(--a3) 25%, transparent), transparent 50%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowPulse 6s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -60%) scale(1) }
  50% { opacity: .75; transform: translate(-50%, -60%) scale(1.08) }
}

/* ============================================
   ★ SECTION GRADIENT DIVIDERS
   ============================================ */
.glow-divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--a1) 50%, transparent) 20%,
    color-mix(in oklab, var(--a2) 70%, transparent) 50%,
    color-mix(in oklab, var(--a3) 50%, transparent) 80%,
    transparent);
  box-shadow: 0 0 20px 2px color-mix(in oklab, var(--a2) 30%, transparent);
  margin: 0;
  position: relative;
  z-index: 2;
}
.glow-divider::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: -4px;
  height: 9px;
  background: inherit;
  filter: blur(8px);
  opacity: .6;
}

/* ============================================
   ★ GRADIENT CARD BORDERS (visible!)
   ============================================ */
.gradient-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: none !important;
  isolation: isolate;
}
.gradient-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--a1) 40%, transparent),
    color-mix(in oklab, var(--a2) 30%, transparent),
    color-mix(in oklab, var(--a3) 25%, transparent),
    transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   ★ ANIMATED GRADIENT UNDERLINE for headings
   ============================================ */
.gradient-underline {
  position: relative;
  display: inline;
}
.gradient-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
  background-size: 200% 100%;
  animation: gradShift 4s ease-in-out infinite;
  box-shadow: 0 0 12px color-mix(in oklab, var(--a1) 50%, transparent);
}

/* ============================================
   ★ FLOATING DECORATIVE ORBS
   ============================================ */
.deco-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.deco-orb-1 {
  width: 300px; height: 300px;
  top: -80px; right: -100px;
  background: radial-gradient(circle, color-mix(in oklab, var(--a2) 30%, transparent), transparent 70%);
  animation: orbFloat 10s ease-in-out infinite;
}
.deco-orb-2 {
  width: 250px; height: 250px;
  bottom: -60px; left: -80px;
  background: radial-gradient(circle, color-mix(in oklab, var(--a3) 25%, transparent), transparent 70%);
  animation: orbFloat 12s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) }
  50% { transform: translate(30px, -20px) }
}

/* ============================================
   ★ SECTION BACKGROUND WASHES
   ============================================ */
.section-wash-1 {
  background:
    radial-gradient(ellipse at 80% 20%, color-mix(in oklab, var(--a1) 8%, transparent), transparent 50%),
    radial-gradient(ellipse at 20% 80%, color-mix(in oklab, var(--a3) 6%, transparent), transparent 50%);
}
.section-wash-2 {
  background:
    radial-gradient(ellipse at 20% 30%, color-mix(in oklab, var(--a2) 8%, transparent), transparent 50%),
    radial-gradient(ellipse at 80% 70%, color-mix(in oklab, var(--a1) 6%, transparent), transparent 50%);
}
.section-wash-3 {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--a3) 10%, transparent), transparent 45%),
    radial-gradient(ellipse at 50% 100%, color-mix(in oklab, var(--a1) 6%, transparent), transparent 45%);
}

/* ===== SCROLL REVEALS — more dramatic ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px) scale(.93);
  filter: blur(10px);
  transition:
    opacity .9s var(--ease),
    transform 1.1s var(--ease),
    filter .9s var(--ease);
  transition-delay: var(--rd, 0ms);
}
[data-reveal].in {
  opacity: 1; transform: none; filter: blur(0);
}
[data-reveal="left"] { transform: translateX(-60px) scale(.95) }
[data-reveal="left"].in { transform: none }
[data-reveal="right"] { transform: translateX(60px) scale(.95) }
[data-reveal="right"].in { transform: none }
[data-reveal="scale"] { transform: scale(.82); filter: blur(12px) }
[data-reveal="scale"].in { transform: none; filter: blur(0) }

/* Grid stagger */
.pain-grid [data-reveal]:nth-child(1) { --rd: 0ms }
.pain-grid [data-reveal]:nth-child(2) { --rd: 100ms }
.pain-grid [data-reveal]:nth-child(3) { --rd: 200ms }
.pain-grid [data-reveal]:nth-child(4) { --rd: 300ms }
.pricing-grid [data-reveal]:nth-child(1) { --rd: 0ms }
.pricing-grid [data-reveal]:nth-child(2) { --rd: 120ms }
.pricing-grid [data-reveal]:nth-child(3) { --rd: 240ms }
.pro-grid [data-reveal]:nth-child(1) { --rd: 0ms }
.pro-grid [data-reveal]:nth-child(2) { --rd: 80ms }
.pro-grid [data-reveal]:nth-child(3) { --rd: 160ms }
.pro-grid [data-reveal]:nth-child(4) { --rd: 240ms }
.pro-grid [data-reveal]:nth-child(5) { --rd: 320ms }

/* ===== HERO WORD ENTRANCE — more dramatic ===== */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(15deg) scale(.85);
  filter: blur(8px);
  animation: wordIn 1s var(--ease) forwards;
  animation-delay: var(--wd, 0ms);
}
@keyframes wordIn {
  to { opacity: 1; transform: none; filter: blur(0) }
}

/* Text sweep */
.sweep { position: relative; display: inline }
.sweep::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  animation: sweepText 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweepText {
  0% { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* ===== 3D TILT CARDS — stronger glow ===== */
.tilt-card {
  --mx: 50%; --my: 50%; --glow-opacity: 0;
  transform-style: preserve-3d; perspective: 800px;
}
.tilt-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mx) var(--my),
    color-mix(in oklab, var(--a1) 35%, transparent),
    transparent 50%);
  opacity: var(--glow-opacity);
  transition: opacity .35s;
  z-index: 10;
}

/* ===== STAGE SCAN LINE ===== */
.stage-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent calc(var(--scan, 0%) - 1.5%),
    color-mix(in oklab, var(--a1) 25%, transparent) var(--scan, 0%),
    transparent calc(var(--scan, 0%) + 1.5%),
    transparent 100%);
  animation: scanLine 5s ease-in-out infinite;
}
@keyframes scanLine {
  0% { --scan: 0% } 50% { --scan: 100% } 100% { --scan: 0% }
}
@property --scan { syntax: '<percentage>'; initial-value: 0%; inherits: false }

/* Magnetic */
.magnetic { will-change: transform }
[data-speed] { will-change: transform }

/* Price update */
[data-price-wrap] { transition: opacity .15s, transform .15s }
[data-price-wrap].updating { opacity: .2; transform: translateY(6px) scale(.96) }

/* ============================================
   ★ STATS GLOW — dramatic number highlight
   ============================================ */
.result-num {
  text-shadow: 0 0 60px color-mix(in oklab, var(--a1) 40%, transparent);
}

/* ============================================
   ★ CTA FLOATING PARTICLES (CSS only)
   ============================================ */
.cta-final .cta-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--a1);
  opacity: .3;
  pointer-events: none;
  animation: ctaParticle 8s ease-in-out infinite;
}
.cta-final .cta-particle:nth-child(2) { left: 20%; top: 30%; animation-delay: -2s; background: var(--a2) }
.cta-final .cta-particle:nth-child(3) { right: 15%; top: 20%; animation-delay: -4s; background: var(--a3) }
.cta-final .cta-particle:nth-child(4) { left: 40%; bottom: 20%; animation-delay: -6s; background: var(--a1) }
.cta-final .cta-particle:nth-child(5) { right: 30%; bottom: 30%; animation-delay: -1s; background: var(--a2) }
@keyframes ctaParticle {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .2 }
  25% { transform: translate(20px, -30px) scale(1.5); opacity: .5 }
  50% { transform: translate(-10px, -50px) scale(1); opacity: .3 }
  75% { transform: translate(15px, -20px) scale(1.8); opacity: .4 }
}

/* ===== MOBILE PERFORMANCE — disable heavy GPU effects ===== */
@media (max-width: 720px) {
  /* Aurora blobs: biggest GPU drain — off */
  .aurora { display: none; }
  .cursor-glow { display: none; }

  /* Reveal animations: remove blur (CSS blur is the expensive part) */
  [data-reveal] { filter: none; transform: translateY(20px); }
  [data-reveal="scale"] { filter: none; transform: scale(.94); }
  [data-reveal="left"] { transform: translateX(-30px); }
  [data-reveal="right"] { transform: translateX(30px); }
  [data-reveal].in { transform: none; }

  /* Hero word entrance: no blur */
  .hero h1 .word {
    filter: none;
    transform: translateY(24px) scale(.93);
    animation-duration: .7s;
  }

  /* Hero glow: static, no pulse */
  .hero-glow { animation: none; opacity: .5; filter: blur(60px); }

  /* CTA pulse: off on mobile (save battery) */
  .hero .btn--primary,
  .cta-final .btn--primary,
  a.mobile-cta { animation: none; }

  /* CTA floating particles: off */
  .cta-particle { display: none; }

  /* Nav backdrop-filter → solid bg (backdrop-filter kills scroll fps) */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in oklab, var(--bg) 94%, transparent);
  }
  .nav-mobile {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in oklab, var(--bg) 97%, transparent);
  }
  .btn--ghost {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.04);
  }

  /* Ambient: reduce blur cost */
  .ambient::before { filter: blur(8px); }

  /* Stage scan line: off */
  .stage-inner::after { display: none; }

  /* hero-glow and deco-orbs: constrain width to prevent horizontal overflow */
  .hero-glow { width: min(500px, 100vw); height: 300px; }
  .deco-orb { display: none; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none }
  .hero h1 .word { opacity: 1; transform: none; filter: none; animation: none }
  .aurora, .cursor-glow, #particles, .grain { display: none }
  .hero-glow { animation: none }
}