/* ==========================================================================
   Fond "aurora" animé — vagues de dégradé
   Composant réutilisable : se place en première position dans un conteneur
   en `position: relative; overflow: hidden`. Le contenu passe au-dessus
   via un z-index supérieur.

   Perf : seules `transform` et `opacity` sont animées (compositing GPU).
   Le flou est statique. Désactivé si l'utilisateur réduit les animations.
   ========================================================================== */

.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Base sombre + lueur froide en bas, dans l'esprit de la maquette */
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(28, 224, 200, 0.35) 0%, transparent 60%),
    radial-gradient(100% 70% at 0% 100%, rgba(35, 120, 255, 0.30) 0%, transparent 55%),
    #050509;
}

/* --- Blobs de couleur (les "vagues") --- */
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.7;
  will-change: transform, translate;
  /* Parallaxe souris : `translate` (propriété indépendante) se compose avec
     le `transform` des keyframes -> la dérive continue par-dessus le décalage.
     --mx/--my sont fournis par main.js (plage ~ -1..1), --depth règle la
     profondeur de chaque blob. Valeurs par défaut nulles => aucun décalage. */
  translate: calc(var(--mx, 0) * var(--depth, 30px))
             calc(var(--my, 0) * var(--depth, 30px));
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cyan — grande masse basse gauche */
.aurora__blob--1 {
  --depth: 34px;
  width: 60vw;
  height: 60vw;
  left: -10vw;
  bottom: -22vw;
  background: radial-gradient(circle at 50% 50%, #19e3d0 0%, rgba(25, 227, 208, 0) 70%);
  animation: drift-1 22s ease-in-out infinite alternate;
}

/* Bleu électrique — centre */
.aurora__blob--2 {
  --depth: 52px;
  width: 55vw;
  height: 55vw;
  left: 25vw;
  bottom: -18vw;
  background: radial-gradient(circle at 50% 50%, #1e5bff 0%, rgba(30, 91, 255, 0) 70%);
  animation: drift-2 27s ease-in-out infinite alternate;
}

/* Indigo / violet — droite, plus haut */
.aurora__blob--3 {
  --depth: 68px;
  width: 48vw;
  height: 48vw;
  right: -12vw;
  top: -10vw;
  background: radial-gradient(circle at 50% 50%, #6a3cff 0%, rgba(106, 60, 255, 0) 70%);
  animation: drift-3 31s ease-in-out infinite alternate;
}

/* Vert Ether — accent mobile, traverse le bas */
.aurora__blob--4 {
  --depth: 44px;
  width: 42vw;
  height: 42vw;
  left: 35vw;
  bottom: -24vw;
  background: radial-gradient(circle at 50% 50%, #2fe3a0 0%, rgba(47, 227, 160, 0) 70%);
  animation: drift-4 19s ease-in-out infinite alternate;
}

/* --- Voile ondulant par-dessus : seconde couche de vagues lentes --- */
.aurora__veil {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 30% at 30% 70%, rgba(25, 227, 208, 0.18) 0%, transparent 60%),
    radial-gradient(35% 28% at 70% 60%, rgba(106, 60, 255, 0.16) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: veil-wave 16s ease-in-out infinite alternate;
  will-change: transform;
}

/* --- Trajectoires (mouvement de vague : translation + échelle + rotation) --- */
@keyframes drift-1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(8vw, -6vw) scale(1.18) rotate(8deg); }
  100% { transform: translate(-4vw, 4vw) scale(1.05) rotate(-6deg); }
}

@keyframes drift-2 {
  0%   { transform: translate(0, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate(-10vw, -8vw) scale(0.9) rotate(-10deg); }
  100% { transform: translate(6vw, 2vw) scale(1.2) rotate(6deg); }
}

@keyframes drift-3 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-8vw, 10vw) scale(1.15) rotate(12deg); }
  100% { transform: translate(4vw, -4vw) scale(0.95) rotate(-8deg); }
}

@keyframes drift-4 {
  0%   { transform: translate(0, 0) scale(0.95); }
  50%  { transform: translate(-12vw, -5vw) scale(1.25); }
  100% { transform: translate(10vw, 3vw) scale(1); }
}

@keyframes veil-wave {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, -3%) scale(1.08); }
}

/* --- Accessibilité : on fige tout si l'utilisateur le demande --- */
@media (prefers-reduced-motion: reduce) {
  .aurora__blob,
  .aurora__veil {
    animation: none;
  }
}