/* ==========================================================================
   KodeshWay — Aurora backdrop (web port of the iOS aura-under-glass)
   CANONICAL SOURCE — sync via build/sync_design.sh.

   Usage: place .kw-aurora as the FIRST child of a positioned container, with
   glass + content stacked above it:

     <section class="kw-hero">
       <div class="kw-aurora" data-kw-aurora></div>   <!-- drifts beneath -->
       <div class="kw-glass"> ...content... </div>
     </section>

   aurora.js finds [data-kw-aurora] and renders drifting blooms on a <canvas>,
   palette chosen by local time of day (matching iOS KodeshWaySky).
   When JS is absent or the user prefers reduced motion, the CSS gradient below
   provides a static resting field — never a blank box.
   ========================================================================== */

.kw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.kw-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Static resting field (no-JS / reduced-motion fallback). aurora.js paints
     over this with a live canvas when motion is allowed. */
  background:
    radial-gradient(60% 60% at 25% 20%, rgba(102, 179, 255, 0.30), transparent 70%),
    radial-gradient(55% 55% at 80% 30%, rgba(230, 102, 128, 0.22), transparent 72%),
    radial-gradient(70% 70% at 50% 95%, rgba(77, 77, 153, 0.28), transparent 75%);
}

/* Trinity static field — Father gold · Son flame · Ruach teal (matches the
   trinity palette in aurora.js for no-JS / reduced-motion). */
.kw-aurora[data-kw-aurora="trinity"] {
  background:
    radial-gradient(58% 58% at 24% 22%, rgba(196, 144, 64, 0.26), transparent 70%),
    radial-gradient(55% 55% at 80% 30%, rgba(245, 145, 90, 0.24), transparent 72%),
    radial-gradient(70% 70% at 52% 95%, rgba(91, 182, 181, 0.26), transparent 75%);
}
.kw-aurora[data-kw-aurora="twilight"] {
  background:
    radial-gradient(58% 58% at 22% 20%, rgba(88, 86, 214, 0.28), transparent 70%),
    radial-gradient(55% 55% at 82% 30%, rgba(230, 110, 150, 0.22), transparent 72%),
    radial-gradient(70% 70% at 50% 96%, rgba(80, 170, 210, 0.24), transparent 75%);
}
/* Ember + teal — warm amber/gold glow with a deep-teal complement, to set off
   the orange burning bush on the home hero (matches the ember palette in JS). */
.kw-aurora[data-kw-aurora="ember"] {
  background:
    radial-gradient(58% 58% at 24% 22%, rgba(232, 150, 70, 0.28), transparent 70%),
    radial-gradient(55% 55% at 80% 30%, rgba(212, 160, 80, 0.24), transparent 72%),
    radial-gradient(70% 70% at 50% 95%, rgba(46, 140, 140, 0.26), transparent 75%);
}
/* Azure — cool royal-blue · indigo · teal (the complement to the warm burning
   bush). No warm bloom, so nothing fights the bush. Shared with the .com home. */
.kw-aurora[data-kw-aurora="azure"] {
  background:
    radial-gradient(58% 58% at 24% 22%, rgba(65, 105, 225, 0.26), transparent 70%),
    radial-gradient(55% 55% at 80% 30%, rgba(88, 86, 214, 0.22), transparent 72%),
    radial-gradient(70% 70% at 52% 95%, rgba(91, 182, 181, 0.24), transparent 75%);
}

.kw-aurora canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The glass/content sit above the aurora. */
.kw-hero > .kw-glass,
.kw-hero > .kw-hero-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* aurora.js also honours this and renders a single static frame, but keep
     the CSS field as the guaranteed floor. */
  .kw-aurora canvas { display: none; }
}