/* ============================================================
   Gaienju · aurora background
   ============================================================
   Drop <div class="aurora-stage" data-phase="calm"> ... </div>
   anywhere and put your UI inside .aurora-overlay. The stage
   manages: bg color, ambient halos, drifting aurora curtains.

   Phases switch by changing data-phase. Variables come from
   colors_and_type.css.
   ============================================================ */

.aurora-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--phase-bg);
  transition: background var(--dur-phase) var(--ease-calm);
}
.aurora-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none;
}

/* · Ambient halos (the lava-lamp layer) · */
.aurora-bg .halo {
  position: absolute; border-radius: 50%;
  /* Perf : blur 160px→64px. Le coût d'un flou croît avec le CARRÉ du rayon →
     160px était un gouffre GPU (saccades sur machine modeste). 64px garde un
     halo doux pour ~6× moins cher. */
  filter: blur(64px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  /* No `transition: background` — Chromium won't fire a background-color
     transition driven by a var() substitution, so it latches one phase
     behind. The halo color JUMPS on phase change, exactly like the curtains
     (background-image) and the stage bg already do → all switch in sync. */
}
@keyframes halo-drift-a { 0%,100% { transform: scale(1) translate(0,0);     opacity: 0.40; } 50% { transform: scale(1.15) translate(40px,-30px); opacity: 0.55; } }
@keyframes halo-drift-b { 0%,100% { transform: scale(1) translate(0,0);     opacity: 0.35; } 50% { transform: scale(1.20) translate(-50px,40px); opacity: 0.50; } }
@keyframes halo-drift-c { 0%,100% { transform: scale(1) translate(0,0);     opacity: 0.40; } 50% { transform: scale(1.10) translate(60px,30px);  opacity: 0.55; } }

.aurora-bg .halo-1 { background: var(--phase-glow-1); top:  -5%; left: -10%; width: 850px; height: 850px; animation: halo-drift-a 75s ease-in-out infinite; }
.aurora-bg .halo-2 { background: var(--phase-glow-2); top:  25%; right:-10%; width: 750px; height: 750px; animation: halo-drift-b 95s ease-in-out infinite -10s; }
.aurora-bg .halo-3 { background: var(--phase-glow-3); bottom: -15%; left: 25%; width: 700px; height: 700px; animation: halo-drift-c 105s ease-in-out infinite -25s; opacity: 0.6; }
.aurora-bg .halo-4 { background: var(--phase-glow-4); top:  35%; left: 35%; width: 650px; height: 650px; animation: halo-drift-a 125s ease-in-out infinite -15s; opacity: 0.55; }

/* · Aurora curtains · vertical drifting bands, mix-blend-mode: screen · */
.aurora-bg .curtain {
  position: absolute; top: -15%; height: 130%; width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  will-change: transform, opacity;
  transition: background var(--dur-phase) var(--ease-calm);
}
@keyframes curtain-1 { 0% { transform: translateX(-100%) skewX(0deg) scaleY(1); } 50% { transform: translateX(50%)  skewX( 4deg) scaleY(1.04); } 100% { transform: translateX(200%) skewX(0deg) scaleY(1); } }
@keyframes curtain-2 { 0% { transform: translateX(-100%) skewX(0deg) scaleY(1); } 50% { transform: translateX(50%)  skewX(-5deg) scaleY(1.06); } 100% { transform: translateX(200%) skewX(0deg) scaleY(1); } }
@keyframes curtain-3 { 0% { transform: translateX(-100%) skewX(0deg) scaleY(1); } 50% { transform: translateX(50%)  skewX( 6deg) scaleY(0.96); } 100% { transform: translateX(200%) skewX(0deg) scaleY(1); } }
@keyframes curtain-4 { 0% { transform: translateX( 200%) skewX(0deg) scaleY(1); } 50% { transform: translateX(50%)  skewX(-4deg) scaleY(1.03); } 100% { transform: translateX(-100%) skewX(0deg) scaleY(1); } }
@keyframes curtain-5 { 0% { transform: translateX( 200%) skewX(0deg) scaleY(1); } 50% { transform: translateX(50%)  skewX( 5deg) scaleY(1.05); } 100% { transform: translateX(-100%) skewX(0deg) scaleY(1); } }

[data-phase="calm"]    .curtain-1 { background: radial-gradient(ellipse 280px 85% at 20% 50%, var(--mer-profonde)    0%, var(--mer-profonde)    25%, transparent 85%); animation: curtain-1  75s linear infinite; }
[data-phase="calm"]    .curtain-2 { background: radial-gradient(ellipse 220px 85% at 35% 50%, var(--petrole)         0%, var(--petrole)         30%, transparent 88%); animation: curtain-2 100s linear infinite -20s; }
[data-phase="calm"]    .curtain-3 { background: radial-gradient(ellipse 320px 85% at 50% 50%, var(--bleu-electrique) 0%, var(--bleu-electrique) 20%, transparent 85%); opacity: 0.4; animation: curtain-3 120s linear infinite -45s; }
[data-phase="calm"]    .curtain-4 { background: radial-gradient(ellipse 200px 85% at 60% 50%, var(--lueur-turquoise) 0%, var(--lueur-turquoise) 30%, transparent 90%); animation: curtain-4  90s linear infinite -30s; }
[data-phase="calm"]    .curtain-5 { background: radial-gradient(ellipse 260px 85% at 75% 50%, var(--vert-aurore)     0%, var(--vert-aurore)     25%, transparent 88%); opacity: 0.45; animation: curtain-5 110s linear infinite -60s; }
[data-phase="calm"]    .curtain-6 { background: radial-gradient(ellipse 180px 80% at 85% 50%, var(--halo-cyan)       0%, var(--halo-cyan)       35%, transparent 85%); animation: curtain-1 130s linear infinite -85s; }

[data-phase="trouble"] .curtain-1 { background: radial-gradient(ellipse 280px 85% at 20% 50%, var(--pourpre)          0%, var(--pourpre)          25%, transparent 85%); animation: curtain-1  75s linear infinite; }
[data-phase="trouble"] .curtain-2 { background: radial-gradient(ellipse 220px 85% at 35% 50%, var(--aubergine)        0%, var(--aubergine)        30%, transparent 88%); animation: curtain-2 100s linear infinite -20s; }
[data-phase="trouble"] .curtain-3 { background: radial-gradient(ellipse 320px 85% at 50% 50%, var(--magenta-profond)  0%, var(--magenta-profond)  22%, transparent 85%); opacity: 0.4; animation: curtain-3 120s linear infinite -45s; }
[data-phase="trouble"] .curtain-4 { background: radial-gradient(ellipse 200px 85% at 60% 50%, var(--lueur-ambree)     0%, var(--lueur-ambree)     30%, transparent 90%); animation: curtain-4  90s linear infinite -30s; }
[data-phase="trouble"] .curtain-5 { background: radial-gradient(ellipse 240px 85% at 75% 50%, var(--pourpre)          0%, var(--pourpre)          25%, transparent 85%); animation: curtain-5 110s linear infinite -60s; }
[data-phase="trouble"] .curtain-6 { background: radial-gradient(ellipse 180px 80% at 85% 50%, var(--magenta-profond)  0%, var(--magenta-profond)  32%, transparent 88%); opacity: 0.35; animation: curtain-1 130s linear infinite -85s; }

[data-phase="burn"]    .curtain-1 { background: radial-gradient(ellipse 280px 85% at 20% 50%, var(--aur-feu-profond) 0%, var(--aur-feu-profond) 25%, transparent 85%); animation: curtain-1  65s linear infinite; }
[data-phase="burn"]    .curtain-2 { background: radial-gradient(ellipse 220px 85% at 35% 50%, var(--aur-feu-braise)  0%, var(--aur-feu-braise)  28%, transparent 88%); animation: curtain-2  85s linear infinite -18s; }
[data-phase="burn"]    .curtain-3 { background: radial-gradient(ellipse 320px 85% at 50% 50%, var(--aur-feu-corail)  0%, var(--aur-feu-corail)  22%, transparent 85%); opacity: 0.4; animation: curtain-3 105s linear infinite -40s; }
[data-phase="burn"]    .curtain-4 { background: radial-gradient(ellipse 200px 85% at 60% 50%, var(--aur-feu-or)      0%, var(--aur-feu-or)      32%, transparent 90%); animation: curtain-4  80s linear infinite -25s; }
[data-phase="burn"]    .curtain-5 { background: radial-gradient(ellipse 240px 85% at 75% 50%, var(--aur-feu-rose)    0%, var(--aur-feu-rose)    25%, transparent 85%); opacity: 0.4; animation: curtain-5 100s linear infinite -55s; }
[data-phase="burn"]    .curtain-6 { background: radial-gradient(ellipse 180px 80% at 85% 50%, var(--aur-feu-braise)  0%, var(--aur-feu-braise)  35%, transparent 85%); animation: curtain-1 125s linear infinite -80s; }

/* Halos : couleur pleine pilotée par var(--phase-glow-N), enregistrée via
   @property (cf. colors_and_type.css) pour que le crossfade 3s s'anime. Pas
   de règles literal par phase ici — elles court-circuiteraient le chemin
   registered-property et re-figeraient le halo (transition background-color
   non déclenchée par une substitution de custom property NON enregistrée). */

.aurora-overlay { position: relative; z-index: 1; }

/* · Helper: insert a full aurora-bg with all six curtains and four halos · */
/* Use <div class="aurora-bg" data-aurora></div> + JS, or paste the divs manually. */

/* · Reduced motion: freeze the aurora · */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg .halo, .aurora-bg .curtain { animation: none !important; }
}