/*
 * aurora.css — sfondo "gas colorato" del design system paithon.
 *
 * Nuvole soffuse di colore (terracotta / petrolio / ocra) che derivano e si
 * fondono lentamente, come gas colorato, con una grana di carta editoriale
 * sopra. Costruito interamente sui token --pt-aurora-* di tokens.css, quindi
 * commuta da solo tra light e dark. Solo CSS e SOLO transform (composizione
 * GPU): i gradienti sono dipinti una volta su layer fissi oversized e la
 * deriva è un translate3d. Pausa completa su prefers-reduced-motion.
 *
 * FONTE UNICA condivisa: il sito (tema WordPress) e il libro (Jupyter Book)
 * importano questo file, così lo sfondo resta identico tra le due UI.
 *
 * Struttura a tre layer negativi (dietro il contenuto, pointer-events:none):
 *   html::before -> strato A del gas (48s, z -3)
 *   body::after  -> strato B del gas (61s, z -2: sotto la grana, sopra A)
 *   body::before -> grana di carta   (statica, z -1)
 * Il background-color del contenitore propaga al canvas (html non ne ha),
 * quindi i layer negativi restano sopra il fondo.
 */

/* ---------- Strato A: nuvole di gas (deriva lenta) ---------- */
html::before {
  content: "";
  position: fixed;
  inset: -14vmax;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(48vmax 46vmax at 18% 22%,
      rgba(var(--pt-aurora-1), var(--pt-aurora-alpha)) 0%, transparent 58%),
    radial-gradient(52vmax 50vmax at 82% 18%,
      rgba(var(--pt-aurora-2), var(--pt-aurora-alpha)) 0%, transparent 60%),
    radial-gradient(44vmax 44vmax at 62% 82%,
      rgba(var(--pt-aurora-3), calc(var(--pt-aurora-alpha) * 0.85)) 0%, transparent 62%);
  background-repeat: no-repeat;
  animation: pt-gas-a 48s ease-in-out infinite alternate;
}

@keyframes pt-gas-a {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(6vmax, 5vmax, 0); }
  100% { transform: translate3d(-4vmax, 8vmax, 0); }
}

/* ---------- Strato B: altre nuvole, verso e ritmo diversi ---------- */
body::after {
  content: "";
  position: fixed;
  inset: -14vmax;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(56vmax 54vmax at 72% 32%,
      rgba(var(--pt-aurora-1), calc(var(--pt-aurora-alpha) * 0.7)) 0%, transparent 60%),
    radial-gradient(50vmax 48vmax at 24% 74%,
      rgba(var(--pt-aurora-2), calc(var(--pt-aurora-alpha) * 0.7)) 0%, transparent 62%),
    radial-gradient(46vmax 44vmax at 42% 12%,
      rgba(var(--pt-aurora-3), calc(var(--pt-aurora-alpha) * 0.6)) 0%, transparent 64%);
  background-repeat: no-repeat;
  animation: pt-gas-b 61s ease-in-out infinite alternate;
}

@keyframes pt-gas-b {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-6vmax, 4vmax, 0); }
  100% { transform: translate3d(5vmax, -7vmax, 0); }
}

/* ---------- Grana di carta editoriale (statica, sopra il gas) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.10 0 0 0 0 0.10 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.025;
  mix-blend-mode: multiply;
}

[data-theme="dark"] body::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.86 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: screen;
}

/* ---------- Pausa completa per chi preferisce meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; }
  body::after  { animation: none; }
}