/* PINAPP — aurora-mobile.css — v5
   Aurora orbes CSS — visibles sur TOUTES tailles d'écran
   Complètent le canvas pandora-night.js (qui gère sa propre taille)
   Colorimétrie : Parc Avatar Disney (nuit) + Dylan Cole (jour)
   ================================================================= */

.aurora-mobile {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* =====================================================
   NUIT — 4 orbes bioluminescents
   (fallback CSS si canvas désactivé ou slow device)
   ===================================================== */

body:not(.mode-jour) .aurora-orb-1,
html:not([data-theme='light']) body .aurora-orb-1 {
  width: clamp(280px, 50vw, 480px);
  height: clamp(280px, 50vw, 480px);
  background: rgba(0, 160, 210, 0.22);
  filter: blur(clamp(60px, 10vw, 100px));
  top: -15%;
  left: -10%;
  animation: aurora-float-a 9s ease-in-out infinite;
}
body:not(.mode-jour) .aurora-orb-2,
html:not([data-theme='light']) body .aurora-orb-2 {
  width: clamp(240px, 45vw, 400px);
  height: clamp(240px, 45vw, 400px);
  background: rgba(90, 10, 150, 0.18);
  filter: blur(clamp(50px, 9vw, 90px));
  bottom: 8%;
  right: -8%;
  animation: aurora-float-b 11s ease-in-out infinite;
}
body:not(.mode-jour) .aurora-orb-3,
html:not([data-theme='light']) body .aurora-orb-3 {
  width: clamp(200px, 40vw, 360px);
  height: clamp(200px, 40vw, 360px);
  background: rgba(0, 210, 170, 0.16);
  filter: blur(clamp(50px, 8vw, 80px));
  top: 40%;
  left: 15%;
  animation: aurora-float-c 7s ease-in-out infinite;
}
body:not(.mode-jour) .aurora-orb-4,
html:not([data-theme='light']) body .aurora-orb-4 {
  width: clamp(180px, 35vw, 300px);
  height: clamp(180px, 35vw, 300px);
  background: rgba(180, 20, 140, 0.09);
  filter: blur(clamp(60px, 10vw, 100px));
  top: 62%;
  right: -5%;
  animation: aurora-float-a 13s ease-in-out infinite reverse;
}

/* =====================================================
   JOUR — 3 orbes or/pêche/jade
   ===================================================== */

body.mode-jour .aurora-orb-1,
html[data-theme='light'] body .aurora-orb-1 {
  width: clamp(280px, 50vw, 480px);
  height: clamp(280px, 50vw, 480px);
  background: rgba(20, 184, 166, 0.18);
  filter: blur(clamp(60px, 10vw, 100px));
  top: -15%;
  left: -10%;
  animation: aurora-float-a 9s ease-in-out infinite;
}
body.mode-jour .aurora-orb-2,
html[data-theme='light'] body .aurora-orb-2 {
  width: clamp(240px, 45vw, 400px);
  height: clamp(240px, 45vw, 400px);
  background: rgba(99, 102, 241, 0.14);
  filter: blur(clamp(50px, 9vw, 90px));
  bottom: 8%;
  right: -8%;
  animation: aurora-float-b 11s ease-in-out infinite;
}
body.mode-jour .aurora-orb-3,
html[data-theme='light'] body .aurora-orb-3 {
  width: clamp(200px, 40vw, 360px);
  height: clamp(200px, 40vw, 360px);
  background: rgba(56, 189, 248, 0.12);
  filter: blur(clamp(50px, 8vw, 80px));
  top: 40%;
  left: 15%;
  animation: aurora-float-c 7s ease-in-out infinite;
}
body.mode-jour .aurora-orb-4,
html[data-theme='light'] body .aurora-orb-4 {
  display: block;
  width: clamp(160px, 34vw, 280px);
  height: clamp(160px, 34vw, 280px);
  background: rgba(15, 118, 110, 0.12);
  filter: blur(clamp(48px, 8vw, 88px));
  top: 58%;
  right: -4%;
  animation: aurora-float-a 14s ease-in-out infinite reverse;
}

/* =====================================================
   ANIMATIONS FLOTTEMENT
   ===================================================== */

@keyframes aurora-float-a {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(28px, -35px) scale(1.07);
  }
}
@keyframes aurora-float-b {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-22px, 30px) scale(0.93);
  }
}
@keyframes aurora-float-c {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(18px, -18px) scale(1.05);
  }
}

/* =====================================================
   MOBILE — plafond du flou (Safari / thermique, HIG performance)
   ===================================================== */

@media (max-width: 767px) {
  .aurora-mobile .aurora-orb {
    filter: blur(52px) !important;
  }
}

/* =====================================================
   REDUCED MOTION — orbes statiques
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .aurora-orb {
    animation: none !important;
  }
}