/* ──────────────────────────────────────────────────────────────────────
   Background variations — pure CSS, driven by --mx / --my CSS vars
   that a tiny pointermove handler updates on :root (range 0..1).
   Switch by setting [data-bg="aurora|grid|constellation|mesh"] on body.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --mx: 0.5;
  --my: 0.5;
  /* eased mouse — falls back to raw if JS doesn't set it */
  --emx: var(--mx);
  --emy: var(--my);
  --bg-intensity: 1;
  --bg-hue: 210;       /* 210 = brand blue (#4da8ff family) */
}

#bg-animation {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg-base);
  overflow: hidden;
  pointer-events: none;
}

#bg-animation::before,
#bg-animation::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Subtle film grain shared across all variations — sits on top */
#bg-animation .grain {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grainShift 7s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-1%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ════════════════════════════════════════════════════════════════════
   1) AURORA — twin slow gradient orbs anchoring to mouse + ambient drift
   ════════════════════════════════════════════════════════════════════ */
body[data-bg="aurora"] #bg-animation {
  background:
    radial-gradient(
      circle at calc(var(--emx) * 100%) calc(var(--emy) * 100%),
      hsla(var(--bg-hue), 90%, 60%, calc(0.18 * var(--bg-intensity))),
      transparent 45%
    ),
    radial-gradient(
      circle at calc((1 - var(--emx)) * 100%) calc((1 - var(--emy)) * 100%),
      hsla(calc(var(--bg-hue) + 40), 80%, 55%, calc(0.10 * var(--bg-intensity))),
      transparent 50%
    ),
    var(--bg-base);
  transition: background 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-bg="aurora"] #bg-animation::before {
  background:
    radial-gradient(60vmin 60vmin at 20% 30%,
      hsla(var(--bg-hue), 80%, 55%, calc(0.10 * var(--bg-intensity))),
      transparent 60%),
    radial-gradient(70vmin 70vmin at 85% 75%,
      hsla(calc(var(--bg-hue) - 30), 80%, 55%, calc(0.08 * var(--bg-intensity))),
      transparent 60%);
  filter: blur(40px);
  animation: auroraDrift 24s ease-in-out infinite alternate;
}

body[data-bg="aurora"] #bg-animation::after {
  /* faint conic ring that responds to cursor */
  background: conic-gradient(
    from calc(var(--emx) * 360deg) at 50% 50%,
    transparent 0deg,
    hsla(var(--bg-hue), 80%, 60%, calc(0.04 * var(--bg-intensity))) 90deg,
    transparent 180deg,
    hsla(calc(var(--bg-hue) + 30), 80%, 60%, calc(0.03 * var(--bg-intensity))) 270deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  animation: slowSpin 60s linear infinite;
}

@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.05); }
}

@keyframes slowSpin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   2) TECH GRID — luminous grid + cursor-tracking radial spotlight
   ════════════════════════════════════════════════════════════════════ */
body[data-bg="grid"] #bg-animation {
  background: var(--bg-base);
}

body[data-bg="grid"] #bg-animation::before {
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  /* parallax: shift grid opposite mouse a few px so it feels deep */
  transform: translate3d(
    calc((0.5 - var(--emx)) * -16px),
    calc((0.5 - var(--emy)) * -16px),
    0
  );
  /* spotlight reveal mask — only bright near cursor */
  -webkit-mask-image: radial-gradient(
    circle at calc(var(--emx) * 100%) calc(var(--emy) * 100%),
    rgba(0,0,0,calc(1 * var(--bg-intensity))) 0%,
    rgba(0,0,0,calc(0.7 * var(--bg-intensity))) 18%,
    rgba(0,0,0,0.18) 45%,
    transparent 75%
  );
          mask-image: radial-gradient(
    circle at calc(var(--emx) * 100%) calc(var(--emy) * 100%),
    rgba(0,0,0,calc(1 * var(--bg-intensity))) 0%,
    rgba(0,0,0,calc(0.7 * var(--bg-intensity))) 18%,
    rgba(0,0,0,0.18) 45%,
    transparent 75%
  );
}

body[data-bg="grid"] #bg-animation::after {
  /* soft accent glow under the cursor */
  background: radial-gradient(
    400px 400px at calc(var(--emx) * 100%) calc(var(--emy) * 100%),
    hsla(var(--bg-hue), 90%, 60%, calc(0.12 * var(--bg-intensity))),
    transparent 65%
  );
  mix-blend-mode: screen;
}

/* ════════════════════════════════════════════════════════════════════
   3) CONSTELLATION — dot field, parallax + lens reveal at cursor
   ════════════════════════════════════════════════════════════════════ */
body[data-bg="constellation"] #bg-animation {
  background: var(--bg-base);
}

body[data-bg="constellation"] #bg-animation::before {
  background-image:
    radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.30) 1px, transparent 1.5px);
  background-size: 64px 64px, 96px 96px;
  background-position:
    calc((0.5 - var(--emx)) * 30px) calc((0.5 - var(--emy)) * 30px),
    calc((var(--emx) - 0.5) * 50px) calc((var(--emy) - 0.5) * 50px);
  opacity: calc(0.35 * var(--bg-intensity));
  /* lens: dots invisible far from cursor, full brightness near it */
  -webkit-mask-image: radial-gradient(
    circle at calc(var(--emx) * 100%) calc(var(--emy) * 100%),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.7) 25%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.08) 80%,
    transparent 100%
  );
          mask-image: radial-gradient(
    circle at calc(var(--emx) * 100%) calc(var(--emy) * 100%),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.7) 25%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.08) 80%,
    transparent 100%
  );
  animation: dotPulse 8s ease-in-out infinite;
}

body[data-bg="constellation"] #bg-animation::after {
  /* horizon-style glow at bottom + cursor halo */
  background:
    radial-gradient(
      80vmin 80vmin at 50% 120%,
      hsla(var(--bg-hue), 85%, 55%, calc(0.10 * var(--bg-intensity))),
      transparent 60%
    ),
    radial-gradient(
      300px 300px at calc(var(--emx) * 100%) calc(var(--emy) * 100%),
      hsla(var(--bg-hue), 95%, 70%, calc(0.10 * var(--bg-intensity))),
      transparent 70%
    );
  mix-blend-mode: screen;
}

@keyframes dotPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}

/* ════════════════════════════════════════════════════════════════════
   4) MESH — 3-color liquid mesh gradient that tilts toward the cursor
   ════════════════════════════════════════════════════════════════════ */
body[data-bg="mesh"] #bg-animation {
  background:
    radial-gradient(
      55vmax 55vmax at calc(15% + (var(--emx) - 0.5) * 18%) calc(20% + (var(--emy) - 0.5) * 18%),
      hsla(var(--bg-hue), 85%, 55%, calc(0.20 * var(--bg-intensity))),
      transparent 55%
    ),
    radial-gradient(
      50vmax 50vmax at calc(85% - (var(--emx) - 0.5) * 18%) calc(30% - (var(--emy) - 0.5) * 18%),
      hsla(calc(var(--bg-hue) + 50), 80%, 50%, calc(0.16 * var(--bg-intensity))),
      transparent 55%
    ),
    radial-gradient(
      60vmax 60vmax at calc(50% + (var(--emx) - 0.5) * 10%) calc(95% + (var(--emy) - 0.5) * 10%),
      hsla(calc(var(--bg-hue) - 40), 85%, 50%, calc(0.18 * var(--bg-intensity))),
      transparent 60%
    ),
    var(--bg-base);
  transition: background 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-bg="mesh"] #bg-animation::before {
  /* slow ambient breathing on top so it never feels static */
  background:
    radial-gradient(40vmax 40vmax at 50% 50%,
      hsla(var(--bg-hue), 80%, 60%, 0.04),
      transparent 60%);
  animation: meshBreathe 12s ease-in-out infinite alternate;
  filter: blur(30px);
}

body[data-bg="mesh"] #bg-animation::after {
  /* soft vignette so logos and button stay legible */
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(6, 6, 15, 0.55) 100%
  );
}

@keyframes meshBreathe {
  0%   { transform: scale(1)    translate(-2%, 1%); opacity: 0.6; }
  100% { transform: scale(1.15) translate(2%, -1%); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   Reduced motion — kill drifts, keep static reactive layer
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #bg-animation,
  #bg-animation::before,
  #bg-animation::after,
  #bg-animation .grain {
    animation: none !important;
  }
}