/* =============================================================
   STORYAT v2.0 — ATMOSPHERE LAYER
   The living backdrop that everything else floats above.
   - Layer A: fixed gradient mesh (theme-aware)
   - Layer B: 3 drifting aurora orbs (violet / cyan / coral)
   - Layer C: cursor spotlight (desktop, opt-in via JS)
   ============================================================= */


/* ============================================================
   1. ROOT atmosphere scaffold — body becomes the spatial stage
   ============================================================ */
html, body {
  background: transparent;
}

body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

/* The atmospheric backdrop sits behind everything but above page bg */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}


/* ============================================================
   2. LAYER A — gradient mesh (deep + atmospheric)
   ============================================================ */

/* Dark theme: deep cosmic mesh */
[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, #1a0f2e 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, #0d2238 0%, transparent 55%),
    radial-gradient(circle 45% at 50% 50%, #140a1f 0%, #050409 100%);
}

/* Light theme: soft pastel aurora */
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, #f3e8ff 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, #dbeafe 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, #ffe4e6 0%, transparent 50%),
    linear-gradient(180deg, #fafaf7 0%, #f0f0f5 100%);
}


/* ============================================================
   3. LAYER B — 3 drifting aurora orbs
   ============================================================ */

.atmosphere-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.atmosphere-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

[data-theme="light"] .atmosphere-orb {
  opacity: 0.35;
  filter: blur(100px);
}

/* Orb 1 — violet, top-left */
.atmosphere-orb--violet {
  top: -10%;
  inset-inline-start: -8%;
  width: 38vmax;
  height: 38vmax;
  background: radial-gradient(circle, #7C3AED 0%, #6F1AB6 50%, transparent 70%);
  animation: orb-drift-a 60s ease-in-out infinite alternate;
}

/* Orb 2 — cyan, bottom-right */
.atmosphere-orb--cyan {
  bottom: -15%;
  inset-inline-end: -12%;
  width: 42vmax;
  height: 42vmax;
  background: radial-gradient(circle, #00D4FF 0%, #0EA5E9 50%, transparent 70%);
  animation: orb-drift-b 75s ease-in-out infinite alternate-reverse;
}

/* Orb 3 — coral, center floating */
.atmosphere-orb--coral {
  top: 30%;
  inset-inline-start: 35%;
  width: 28vmax;
  height: 28vmax;
  background: radial-gradient(circle, #FF6E5C 0%, #F43F5E 50%, transparent 70%);
  opacity: 0.35;
  animation: orb-drift-c 90s ease-in-out infinite alternate;
}

[data-theme="light"] .atmosphere-orb--coral {
  opacity: 0.22;
}


/* ============================================================
   4. LAYER C — cursor spotlight (desktop only)
   JS sets --cursor-x and --cursor-y on body via mousemove rAF.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  body::after {
    background: radial-gradient(
      circle 600px at var(--cursor-x, 50%) var(--cursor-y, 50%),
      rgba(255, 255, 255, 0.04),
      transparent 60%
    );
    transition: background 80ms linear;
  }

  [data-theme="light"] body::after {
    background: radial-gradient(
      circle 600px at var(--cursor-x, 50%) var(--cursor-y, 50%),
      rgba(255, 255, 255, 0.5),
      transparent 60%
    );
  }
}


/* ============================================================
   5. NOISE OVERLAY — breaks gradient banding (very subtle)
   Inlined SVG so no extra HTTP request.
   ============================================================ */

body > main,
body > header.app-header {
  position: relative;
}

/* Tiny grain via SVG noise filter — only on dark theme where banding shows */
[data-theme="dark"] body::before {
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 10%, #1a0f2e 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, #0d2238 0%, transparent 55%),
    radial-gradient(circle 45% at 50% 50%, #140a1f 0%, #050409 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence 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.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode: normal, normal, normal, overlay;
}


/* ============================================================
   6. ACCESSIBILITY — Reduced Motion + Reduced Transparency
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .atmosphere-orb {
    animation: none !important;
  }
  body::after {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  /* Strip the atmosphere entirely — replace with flat surface */
  .atmosphere-orbs { display: none !important; }
  body::after { background: none !important; }

  [data-theme="dark"] body::before {
    background: var(--bg-app, #0b0b0f) !important;
  }
  [data-theme="light"] body::before {
    background: var(--bg-app, #f5f5f7) !important;
  }
}

@media (forced-colors: active) {
  body::before,
  body::after,
  .atmosphere-orbs {
    display: none !important;
  }
  body {
    background: Canvas;
  }
}


/* ============================================================
   7. MOBILE — calmer atmosphere to save GPU
   ============================================================ */

@media (max-width: 640px) {
  .atmosphere-orb {
    filter: blur(60px);
    opacity: 0.40;
  }
  [data-theme="light"] .atmosphere-orb {
    opacity: 0.28;
  }
  .atmosphere-orb--coral {
    /* one orb is enough on small screens */
    display: none;
  }
  /* No cursor spotlight on touch devices */
  body::after { display: none; }
}