/* =========================================================================
   LDNR — Aurora Background
   Fixed, site-wide, z-index 0.

   Optimisation :
   - Le blur est appliqué UNE SEULE FOIS sur .aurora-blur-layer (pas sur
     chaque blob) → 1 seule passe GPU au lieu de 4.
   - Keyframes : uniquement translate3d + scale (propriétés composites GPU).
     Pas de rotateZ, pas d'opacity changeante → zéro repaint.
   - contain: layout paint sur le conteneur fixed.
   - will-change: transform sur les blobs, will-change: filter sur le calque flouté.
   ========================================================================= */

/* ── Conteneur (fixed, SANS filter) ──────────────────────────────
   iOS/iPadOS Safari a un bug connu : un filter:blur() posé directement
   sur un élément position:fixed n'est pas rendu (le blur est ignoré,
   les bords nets des blobs redeviennent visibles = liseré clair autour
   de la page). Le fix : le blur passe sur un enfant .aurora-blur-layer
   (position:absolute), jamais sur l'élément fixed lui-même — Safari
   blur correctement les éléments absolute/static. */
#aurora-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  /* z-index:-1 → l'aurora reste TOUJOURS derrière le contenu en flux normal,
     sur toutes les pages, sans devoir gérer le z-index page par page.
     En dark mode son fond est opaque : à z-index:0 elle recouvrait le texte
     des pages sans contexte d'empilement propre (titres, paragraphes, boutons).
     L'accueil reste correct : canvas 3D (z-index:1) et #primary (z-index:0)
     passent au-dessus. */
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;

  /* Fond de base (dark) — remplace le blur pour masquer les bords :
     posé directement ici (élément non filtré), il couvre tout le viewport
     sans dépendre du rendu du filter. */
  background: radial-gradient(ellipse at 50% 60%, #040313 0%, #01010e 70%);
  transition: background 0.6s ease;
}

/* Mode light : fond clair, blobs en multiply */
[data-theme="light"] #aurora-container {
  background: radial-gradient(ellipse at 50% 50%, #eef5fd 0%, #eef6ff 70%);
}

/* ── Calque flouté — débordement de 150px pour que le blur(72px) ne
   fasse pas apparaître de bord adouci à l'intérieur du viewport. ── */
.aurora-blur-layer {
  position: absolute;
  top: -150px; left: -150px;
  width: calc(100% + 300px); height: calc(100% + 300px);
  filter: blur(72px);
  will-change: filter;
}
[data-theme="light"] .aurora-blur-layer {
  mix-blend-mode: multiply;
}

/* ── Blobs communs ── */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
}

/* ── Blob 1 — Cyan (haut gauche) ── */
.blob-cyan {
  width: 42vw; height: 42vw;
  top: -8vw; left: -8vw;
  background: radial-gradient(circle, #012d3a 0%, transparent 80%);
  animation: aurora-float-1 22s ease-in-out infinite alternate;
}

/* ── Blob 2 — Violet (bas droite) ── */
.blob-purple {
  width: 46vw; height: 46vw;
  bottom: -12vw; right: -8vw;
  background: radial-gradient(circle, #1f0736 0%, transparent 80%);
  animation: aurora-float-2 28s ease-in-out infinite alternate;
}

/* ── Blob 3 — Teal (milieu droite) ── */
.blob-teal {
  width: 34vw; height: 34vw;
  top: 25vh; left: 45vw;
  background: radial-gradient(circle, #011a2e 0%, transparent 80%);
  animation: aurora-float-3 19s ease-in-out infinite alternate;
}

/* ── Blob 4 — Rose (bas gauche) ── */
.blob-pink {
  width: 30vw; height: 30vw;
  bottom: 15vh; left: 8vw;
  background: radial-gradient(circle, #28062c 0%, transparent 80%);
  animation: aurora-float-4 25s ease-in-out infinite alternate;
}

/* ── Mode light : couleurs plus saturées ── */
[data-theme="light"] .blob-cyan   { background: radial-gradient(circle, #c8e9fa 0%, transparent 70%); }
[data-theme="light"] .blob-purple { background: radial-gradient(circle, #e7d7ff 0%, transparent 70%); }
[data-theme="light"] .blob-teal   { background: radial-gradient(circle, #9df3e5 0%, transparent 70%); }
[data-theme="light"] .blob-pink   { background: radial-gradient(circle, #fcb9d5 0%, transparent 70%); }

/* ── Keyframes : UNIQUEMENT translate3d + scale
      → propriétés 100 % composites, zéro repaint, zéro layout recalc  ── */
@keyframes aurora-float-1 {
  0%   { transform: translate3d(0,    0,    0) scale(1.00); }
  33%  { transform: translate3d(12vw, 8vh,  0) scale(1.12); }
  66%  { transform: translate3d(6vw,  18vh, 0) scale(0.95); }
  100% { transform: translate3d(-4vw, 24vh, 0) scale(1.08); }
}

@keyframes aurora-float-2 {
  0%   { transform: translate3d(0,     0,     0) scale(1.05); }
  33%  { transform: translate3d(-18vw, -12vh, 0) scale(0.88); }
  66%  { transform: translate3d(-8vw,  -4vh,  0) scale(1.10); }
  100% { transform: translate3d(8vw,   4vh,   0) scale(0.92); }
}

@keyframes aurora-float-3 {
  0%   { transform: translate3d(0,     0,     0) scale(0.92); }
  33%  { transform: translate3d(-8vw,  12vh,  0) scale(1.08); }
  66%  { transform: translate3d(10vw,  6vh,   0) scale(0.85); }
  100% { transform: translate3d(16vw,  -8vh,  0) scale(1.05); }
}

@keyframes aurora-float-4 {
  0%   { transform: translate3d(0,     0,     0) scale(0.85); }
  33%  { transform: translate3d(18vw,  -14vh, 0) scale(1.05); }
  66%  { transform: translate3d(22vw,  -6vh,  0) scale(0.90); }
  100% { transform: translate3d(-8vw,  8vh,   0) scale(1.00); }
}

/* ── Accessibilité : stoppe les animations si l'utilisateur le demande ── */
@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
}