/*
  Immersive Background System (shared)
  -----------------------------------
  Used on the WebGL landing + auth pages (login/signup).

  Goals:
  - "Cosmic scanner" ambience without new deps
  - Works in light/dark themes (via theme tokens)
  - Safe on mobile (reduced-motion respected)
*/

.drsknn-immersive-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 18% 20%, rgb(var(--rgb-info) / 0.15), transparent 62%),
    radial-gradient(1000px 700px at 82% 18%, rgb(var(--rgb-purple) / 0.13), transparent 60%),
    radial-gradient(900px 650px at 50% 86%, rgb(var(--rgb-accent) / 0.085), transparent 62%),
    radial-gradient(1400px 900px at 50% 55%, rgb(var(--rgb-bg) / 1), rgb(var(--rgb-bg) / 0.94));
}

/* Force the immersive pages into the "cosmic dark" palette without mutating user theme preferences. */
body[data-drsknn-immersive] {
  color-scheme: dark;
  --rgb-bg: 2 6 23;
  --rgb-surface: 15 23 42;
  --rgb-surface-2: 30 41 59;
  --rgb-surface-3: 51 65 85;
  --rgb-text: 248 250 252;
  --rgb-text-2: 226 232 240;
  --rgb-text-muted: 148 163 184;
  --rgb-text-subtle: 100 116 139;
  --rgb-text-inverse: 2 6 23;
  --rgb-border: 51 65 85;
  --rgb-border-strong: 71 85 105;
  --rgb-border-subtle: 30 41 59;
  --rgb-info: 56 189 248;
  --rgb-purple: 156 39 176;
  --rgb-accent: 200 167 74;
  --rgb-accent-soft: 241 210 138;
  --rgb-accent-wash: 255 238 192;
  --rgb-accent-deep: 183 140 63;
}

.drsknn-immersive-bg canvas[data-immersive-webgl] {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.95;
  pointer-events: none;
}

.drsknn-immersive-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(var(--rgb-text-muted) / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--rgb-text-muted) / 0.13) 1px, transparent 1px);
  background-size: 92px 92px;
  opacity: 0.22;
  mask-image: radial-gradient(closest-side at 50% 45%, rgba(0, 0, 0, 0.8), transparent 72%);
}

.drsknn-immersive-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 700px at 50% 30%, rgb(var(--rgb-bg) / 0.26), rgb(var(--rgb-bg) / 0.92));
}

.drsknn-immersive-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(var(--rgb-text) / 0.04) 0px,
    transparent 2px,
    transparent 8px
  );
  animation: drsknn-scanlines 8s linear infinite;
  mix-blend-mode: overlay;
}

.drsknn-immersive-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.drsknn-immersive-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(800px 500px at 25% 30%, rgb(var(--rgb-info) / 0.10), transparent 65%),
    radial-gradient(900px 550px at 75% 35%, rgb(var(--rgb-purple) / 0.10), transparent 65%),
    radial-gradient(900px 600px at 50% 70%, rgb(var(--rgb-accent) / 0.06), transparent 70%);
  filter: blur(0.2px);
}

@keyframes drsknn-scanlines {
  0% {
    transform: translateY(-6%);
  }
  100% {
    transform: translateY(6%);
  }
}

/* Prefer crispness on small devices (less grid density). */
@media (max-width: 768px) {
  .drsknn-immersive-grid {
    background-size: 120px 120px;
    opacity: 0.16;
  }
  .drsknn-immersive-noise {
    opacity: 0.045;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the immersive scene visible, but stop motion (JS renders a single frame). */
  .drsknn-immersive-bg canvas[data-immersive-webgl] {
    opacity: 0.72;
  }
  .drsknn-immersive-scanlines {
    animation: none;
    opacity: 0.08;
  }
}

/* Landing/Auth pages: keep content above the background layers. */
body[data-drsknn-immersive] .drsknn-theme-toggle {
  /* Keep landing/auth focused and consistent. */
  display: none;
}