/* ============================================================
   aurora.css — kapy.ch v2 · Task 8
   CSS-only ambient background for hero/section/CTA blocks.
   - Pure radial-gradients (no WebGL, no canvas, no JS)
   - Composite-only transform animation (GPU-cheap, ~0.1% CPU)
   - Subtle: text on top stays WCAG AA against page-bg
   - prefers-reduced-motion: animation off, gradient stays

   Usage:
     <section class="aurora">                ← base ambient
       <div class="container">…</div>
     </section>

     <section class="aurora aurora--hero">   ← stronger hero glow
     <section class="aurora aurora--subtle"> ← softer for body sections
     <section class="aurora aurora--cta">    ← centered glow (CTA-Closer)

   Combine with .full-bleed (from layout.css) for edge-to-edge sections.
   ============================================================ */

.aurora {
  /* Aurora color slots — per-mode overrides change ONLY the colors below */
  --aurora-color-a: oklch(72% 0.155 210 / 0.1); /* cyan-spotlight */
  --aurora-color-b: oklch(52% 0.22 270 / 0.12); /* deep indigo */

  position: relative;
  isolation: isolate;
  overflow: clip; /* clips oversized ::before during transform */
}

.aurora::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 22% 30%, var(--aurora-color-a), transparent 60%),
    radial-gradient(70% 90% at 78% 70%, var(--aurora-color-b), transparent 60%);
  animation: aurora-drift var(--dur-ambient) var(--ease-in-out) infinite alternate;
  will-change: transform;
}

@keyframes aurora-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(2%, -2%, 0) scale(1.03);
  }
}

/* ---------- Variants ---------- */

/* Hero — stronger atmospheric glow */
.aurora--hero {
  --aurora-color-a: oklch(72% 0.155 210 / 0.18);
  --aurora-color-b: oklch(52% 0.22 270 / 0.22);
}

/* Subtle — gentle whisper for body sections */
.aurora--subtle {
  --aurora-color-a: oklch(72% 0.155 210 / 0.05);
  --aurora-color-b: oklch(52% 0.22 270 / 0.07);
}

/* CTA — single centered glow (e.g. CTA-Closer) */
.aurora--cta {
  --aurora-color-a: transparent; /* unused */
  --aurora-color-b: oklch(52% 0.22 270 / 0.18);
}

.aurora--cta::before {
  background: radial-gradient(circle at center, var(--aurora-color-b), transparent 70%);
  animation: none; /* static glow — CTA shouldn't move */
}

/* ============================================================
   Dark-Mode — brand-400 / accent slightly lighter so glow remains
   visible on dark canvas without burning out
   ============================================================ */

[data-theme='dark'] .aurora {
  --aurora-color-a: oklch(78% 0.15 210 / 0.1);
  --aurora-color-b: oklch(62% 0.215 270 / 0.14);
}

[data-theme='dark'] .aurora--hero {
  --aurora-color-a: oklch(78% 0.15 210 / 0.2);
  --aurora-color-b: oklch(62% 0.215 270 / 0.26);
}

[data-theme='dark'] .aurora--subtle {
  --aurora-color-a: oklch(78% 0.15 210 / 0.04);
  --aurora-color-b: oklch(62% 0.215 270 / 0.08);
}

[data-theme='dark'] .aurora--cta {
  --aurora-color-b: oklch(62% 0.215 270 / 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .aurora {
    --aurora-color-a: oklch(78% 0.15 210 / 0.1);
    --aurora-color-b: oklch(62% 0.215 270 / 0.14);
  }
  :root:not([data-theme='light']) .aurora--hero {
    --aurora-color-a: oklch(78% 0.15 210 / 0.2);
    --aurora-color-b: oklch(62% 0.215 270 / 0.26);
  }
  :root:not([data-theme='light']) .aurora--subtle {
    --aurora-color-a: oklch(78% 0.15 210 / 0.04);
    --aurora-color-b: oklch(62% 0.215 270 / 0.08);
  }
  :root:not([data-theme='light']) .aurora--cta {
    --aurora-color-b: oklch(62% 0.215 270 / 0.24);
  }
}

/* ============================================================
   Mobile — dampen intensity (less GPU cost, less visual noise on small screens)
   ============================================================ */

@media (max-width: 767px) {
  .aurora::before {
    opacity: 0.65;
  }
}

/* ============================================================
   prefers-reduced-motion — animation off, gradient stays
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .aurora::before {
    animation: none;
    will-change: auto;
  }
}