/*
 * Animated abstract backdrops — loaded ONLY when the visitor/site picked one
 * (see inc/enqueue.php), so a site running the plain backdrop pays nothing.
 *
 * Performance contract, deliberately strict — this paints behind EVERY page:
 *   - only `transform` and `opacity` are animated: both run on the compositor,
 *     so there is no layout and no repaint per frame;
 *   - colour comes from soft radial gradients, never `filter: blur()` — a blur
 *     over a full-screen layer is the one thing that melts weak GPUs;
 *   - at most 3 moving layers, each a huge slow shape (40-90s loops) — cheap to
 *     composite and calm to look at;
 *   - `contain: strict` + `pointer-events: none` keep it out of hit-testing and
 *     out of the rest of the page's layout work;
 *   - animation freezes on `prefers-reduced-motion` and on phones, where the
 *     battery cost is real and the effect is barely visible behind content.
 *
 * Hue follows the accent the visitor already chose (--accent-h), so the backdrop
 * always matches the UI instead of being a second, clashing colour control.
 */

.bg-atmos[data-fx]:not([data-fx="off"]) {
  contain: strict;
  overflow: hidden;
}

/* Shared shape layer. Two pseudo-elements + one child = 3 movers max. */
.bg-atmos[data-fx]:not([data-fx="off"]) .bg-fx,
.bg-atmos[data-fx]:not([data-fx="off"])::before,
.bg-atmos[data-fx]:not([data-fx="off"])::after {
  pointer-events: none;
}
.bg-fx {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}
.bg-fx span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

/* ---------------------------------------------------------------- aurora
   Two wide ribbons of light drifting across the top, like a slow northern sky. */
[data-fx="aurora"] .bg-fx span {
  width: 90vw; height: 60vh;
  filter: none;
  opacity: 0.55;
  mix-blend-mode: screen;
}
[data-fx="aurora"] .bg-fx span:nth-child(1) {
  left: -20vw; top: -18vh;
  background: radial-gradient(ellipse at center,
    oklch(0.62 0.2 var(--accent-h, 285) / 0.55), transparent 65%);
  animation: fxAuroraA 46s ease-in-out infinite alternate;
}
[data-fx="aurora"] .bg-fx span:nth-child(2) {
  right: -25vw; top: -8vh;
  background: radial-gradient(ellipse at center,
    oklch(0.6 0.18 calc(var(--accent-h, 285) + 55) / 0.45), transparent 65%);
  animation: fxAuroraB 62s ease-in-out infinite alternate;
}
[data-fx="aurora"] .bg-fx span:nth-child(3) {
  left: 15vw; top: 30vh;
  background: radial-gradient(ellipse at center,
    oklch(0.55 0.16 calc(var(--accent-h, 285) - 45) / 0.35), transparent 60%);
  animation: fxAuroraC 78s ease-in-out infinite alternate;
}
@keyframes fxAuroraA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vw, 6vh, 0) scale(1.15); }
}
@keyframes fxAuroraB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-14vw, 10vh, 0) scale(1); }
}
@keyframes fxAuroraC {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vw, -12vh, 0) scale(1.2); }
}

/* ------------------------------------------------------------------ orbs
   Three soft spheres floating on long, unequal orbits. */
[data-fx="orbs"] .bg-fx span {
  opacity: 0.5;
  mix-blend-mode: screen;
}
[data-fx="orbs"] .bg-fx span:nth-child(1) {
  width: 46vw; height: 46vw; left: -8vw; top: -10vh;
  background: radial-gradient(circle at 35% 35%,
    oklch(0.65 0.21 var(--accent-h, 285) / 0.6), transparent 62%);
  animation: fxOrbA 54s ease-in-out infinite alternate;
}
[data-fx="orbs"] .bg-fx span:nth-child(2) {
  width: 38vw; height: 38vw; right: -6vw; top: 22vh;
  background: radial-gradient(circle at 60% 40%,
    oklch(0.62 0.19 calc(var(--accent-h, 285) + 70) / 0.5), transparent 62%);
  animation: fxOrbB 71s ease-in-out infinite alternate;
}
[data-fx="orbs"] .bg-fx span:nth-child(3) {
  width: 30vw; height: 30vw; left: 34vw; bottom: -12vh;
  background: radial-gradient(circle at 50% 50%,
    oklch(0.58 0.17 calc(var(--accent-h, 285) - 60) / 0.45), transparent 62%);
  animation: fxOrbC 88s ease-in-out infinite alternate;
}
@keyframes fxOrbA {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(16vw, 14vh, 0); }
}
@keyframes fxOrbB {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-18vw, -10vh, 0); }
}
@keyframes fxOrbC {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10vw, -16vh, 0) scale(1.25); }
}

/* ------------------------------------------------------------------ mesh
   One big multi-stop gradient sheet, rotating very slowly. Reads as a living
   colour wash rather than distinct shapes. */
[data-fx="mesh"] .bg-fx {
  inset: -50%;
  background:
    radial-gradient(circle at 22% 28%, oklch(0.6 0.2 var(--accent-h, 285) / 0.5), transparent 45%),
    radial-gradient(circle at 78% 26%, oklch(0.58 0.18 calc(var(--accent-h, 285) + 60) / 0.42), transparent 45%),
    radial-gradient(circle at 60% 78%, oklch(0.55 0.17 calc(var(--accent-h, 285) - 55) / 0.4), transparent 48%),
    radial-gradient(circle at 26% 74%, oklch(0.5 0.14 calc(var(--accent-h, 285) + 25) / 0.32), transparent 46%);
  animation: fxMesh 120s linear infinite;
  opacity: 0.75;
}
@keyframes fxMesh {
  from { transform: rotate(0deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}

/* ----------------------------------------------------------------- beams
   A slow conic sweep — like a lighthouse behind frosted glass. */
[data-fx="beams"] .bg-fx {
  inset: -60%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    oklch(0.6 0.19 var(--accent-h, 285) / 0.28) 25deg,
    transparent 60deg,
    oklch(0.58 0.16 calc(var(--accent-h, 285) + 50) / 0.22) 150deg,
    transparent 200deg,
    oklch(0.55 0.15 calc(var(--accent-h, 285) - 40) / 0.2) 290deg,
    transparent 330deg);
  animation: fxBeams 90s linear infinite;
  opacity: 0.7;
}
@keyframes fxBeams {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------- waves
   Wide diagonal bands gliding sideways — quiet, and the cheapest of the set. */
[data-fx="waves"] .bg-fx {
  inset: -30% -60%;
  background: repeating-linear-gradient(115deg,
    transparent 0 12vh,
    oklch(0.6 0.18 var(--accent-h, 285) / 0.16) 12vh 22vh,
    transparent 22vh 40vh,
    oklch(0.55 0.15 calc(var(--accent-h, 285) + 45) / 0.13) 40vh 50vh,
    transparent 50vh 76vh);
  animation: fxWaves 60s linear infinite;
  opacity: 0.8;
}
@keyframes fxWaves {
  from { transform: translate3d(-12vw, 0, 0); }
  to   { transform: translate3d(12vw, 0, 0); }
}

/* Light scheme: the same shapes, dialled down — on white they would shout. */
html[data-theme="light"] [data-fx] .bg-fx { opacity: 0.42; }
html[data-theme="light"] [data-fx] .bg-fx span { mix-blend-mode: multiply; opacity: 0.3; }

/* Phones: keep the colour, drop the motion. A full-screen animation is the last
   thing a battery needs, and behind a scrolling feed nobody sees it move. */
@media (max-width: 640px) {
  [data-fx] .bg-fx,
  [data-fx] .bg-fx span { animation: none !important; }
}

/* Honour the OS setting — freeze, never remove (the colour is part of the design). */
@media (prefers-reduced-motion: reduce) {
  [data-fx] .bg-fx,
  [data-fx] .bg-fx span { animation: none !important; }
}