/* Fond animé : « Aurora Background » (manuarora700), composant 21st.dev réécrit en CSS pur.
   S'ajoute dans un .backdrop (voir base.css). */

:root {
  --stripe: #ffffff;
  --aurora-invert: 1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --stripe: #000000;
    --aurora-invert: 0;
  }
}

.aurora {
  --stripes: repeating-linear-gradient(100deg, var(--stripe) 0%, var(--stripe) 7%, transparent 10%, transparent 12%, var(--stripe) 16%);
  --lights: repeating-linear-gradient(100deg, #3b82f6 10%, #a5b4fc 15%, #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%);
  position: absolute; inset: -10px;
  background-image: var(--stripes), var(--lights);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px) invert(var(--aurora-invert));
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 45% at 50% 0%, #000 20%, transparent 75%);
}
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--stripes), var(--lights);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
}
@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to { background-position: 350% 50%, 350% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::after { animation: none; }
}