/* pandora-world.css — Pinapp · Monde Pandora Complet
   Nuit : Forêt bioluminescente UNIQUEMENT
   Jour : géré exclusivement par pandora-jour.css
   ================================================================ */

#pandora-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   MODE JOUR — étoiles masquées ; orbes + nuages actifs (halos doux animés)
══════════════════════════════════════════ */
body.mode-jour .pandora-stars,
html[data-theme='light'] .pandora-stars {
  display: none;
}

/* Grille jour — lignes teal / indigo + dérive lente */
body.mode-jour .holo-grid,
html[data-theme='light'] .holo-grid {
  background-image:
    linear-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.55;
  animation:
    grid-breathe 11s ease-in-out infinite,
    holo-grid-drift-jour 42s ease-in-out infinite;
}

@keyframes holo-grid-drift-jour {
  0%,
  100% {
    background-position:
      0 0,
      0 0;
  }
  33% {
    background-position:
      48px 28px,
      -32px 20px;
  }
  66% {
    background-position:
      -24px 52px,
      40px -16px;
  }
}

/* ══════════════════════════════════════════
   ORBES BIOLUMINESCENTES (NUIT SEULEMENT)
══════════════════════════════════════════ */

.pandora-orbs {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

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

/* — NUIT — */
body:not(.mode-jour) .orb-1 {
  width: 70vw;
  height: 60vh;
  background: radial-gradient(
    ellipse,
    rgba(0, 229, 204, 0.4) 0%,
    rgba(0, 120, 108, 0.08) 55%,
    transparent 72%
  );
  bottom: -15%;
  left: -10%;
  filter: blur(60px);
  animation: orb-1 14s ease-in-out infinite; /* 4× 3.5s — rythme « Light Returns » */
}
body:not(.mode-jour) .orb-2 {
  width: 60vw;
  height: 55vh;
  background: radial-gradient(
    ellipse,
    rgba(100, 80, 200, 0.14) 0%,
    rgba(40, 120, 108, 0.26) 45%,
    transparent 72%
  );
  top: -10%;
  right: -10%;
  filter: blur(60px);
  animation: orb-2 17.5s ease-in-out infinite -4s; /* 5× 3.5s */
}
body:not(.mode-jour) .orb-3 {
  width: 50vw;
  height: 45vh;
  background: radial-gradient(
    ellipse,
    rgba(72, 228, 195, 0.28) 0%,
    rgba(0, 229, 204, 0.1) 50%,
    transparent 72%
  );
  top: 30%;
  left: 20%;
  filter: blur(70px);
  animation: orb-3 14s ease-in-out infinite -6s; /* 4× 3.5s */
}
body:not(.mode-jour) .orb-4 {
  width: 35vw;
  height: 35vh;
  background: radial-gradient(
    ellipse,
    rgba(123, 79, 232, 0.12) 0%,
    rgba(100, 200, 175, 0.2) 48%,
    transparent 72%
  );
  bottom: 20%;
  right: 5%;
  filter: blur(80px);
  animation: orb-1 21s ease-in-out infinite -9s reverse; /* 6× 3.5s */
}

/* ── JOUR — orbes volumétriques (même moteur d’animation que la nuit) ── */
body.mode-jour .pandora-orbs,
html[data-theme='light'] .pandora-orbs {
  mix-blend-mode: multiply;
  opacity: 0.92;
}

body.mode-jour .orb-1,
html[data-theme='light'] .orb-1 {
  width: 68vw;
  height: 58vh;
  background: radial-gradient(
    ellipse,
    rgba(15, 118, 110, 0.22) 0%,
    rgba(100, 180, 200, 0.1) 48%,
    transparent 72%
  );
  bottom: -14%;
  left: -12%;
  filter: blur(58px);
  animation: orb-1 16s ease-in-out infinite;
}

body.mode-jour .orb-2,
html[data-theme='light'] .orb-2 {
  width: 58vw;
  height: 52vh;
  background: radial-gradient(
    ellipse,
    rgba(99, 102, 241, 0.14) 0%,
    rgba(45, 160, 180, 0.12) 50%,
    transparent 72%
  );
  top: -12%;
  right: -12%;
  filter: blur(58px);
  animation: orb-2 19s ease-in-out infinite -3s;
}

body.mode-jour .orb-3,
html[data-theme='light'] .orb-3 {
  width: 48vw;
  height: 44vh;
  background: radial-gradient(
    ellipse,
    rgba(20, 184, 166, 0.2) 0%,
    rgba(125, 180, 220, 0.1) 52%,
    transparent 72%
  );
  top: 28%;
  left: 18%;
  filter: blur(68px);
  animation: orb-3 14s ease-in-out infinite -5s;
}

body.mode-jour .orb-4,
html[data-theme='light'] .orb-4 {
  width: 38vw;
  height: 36vh;
  background: radial-gradient(
    ellipse,
    rgba(129, 140, 248, 0.12) 0%,
    rgba(15, 118, 110, 0.14) 50%,
    transparent 74%
  );
  bottom: 18%;
  right: 4%;
  filter: blur(72px);
  animation: orb-1 22s ease-in-out infinite -8s reverse;
}

@keyframes orb-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -25px) scale(1.08);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.94);
  }
}
@keyframes orb-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-25px, 30px) scale(1.06);
  }
  66% {
    transform: translate(20px, -18px) scale(0.96);
  }
}
@keyframes orb-3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(18px, -22px) scale(1.05);
  }
}

/* ══════════════════════════════════════════
   SPORES
══════════════════════════════════════════ */

.spore {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes spore-rise {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--dx), -60vh) scale(0.6);
    opacity: 0;
  }
}

@keyframes spore-wind {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.7);
    opacity: 0;
  }
}

/* ══════════════════════════════════════════
   ÉTOILES NUIT
══════════════════════════════════════════ */

.pandora-stars {
  position: absolute;
  inset: 0;
  transition: opacity 600ms ease;
}
body.mode-jour .pandora-stars {
  opacity: 0;
}

.star {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: var(--op-min);
    transform: scale(1);
  }
  50% {
    opacity: var(--op-max);
    transform: scale(1.4);
  }
}

/* ══════════════════════════════════════════
   NUAGES JOUR
══════════════════════════════════════════ */

.pandora-clouds {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
body.mode-jour .pandora-clouds,
html[data-theme='light'] .pandora-clouds {
  opacity: 1;
}

.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  background: rgba(255, 248, 240, 0.18);
}

body.mode-jour .cloud,
html[data-theme='light'] .cloud {
  background: rgba(255, 255, 255, 0.45);
  filter: blur(56px);
}
.cloud-1 {
  width: 50vw;
  height: 25vh;
  bottom: 5%;
  left: 10%;
  animation: cloud-drift 25s linear infinite;
}
.cloud-2 {
  width: 40vw;
  height: 20vh;
  bottom: 15%;
  right: -5%;
  animation: cloud-drift 35s linear infinite -12s;
}
.cloud-3 {
  width: 30vw;
  height: 15vh;
  bottom: 25%;
  left: 40%;
  animation: cloud-drift 20s linear infinite -7s;
}
@keyframes cloud-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-120vw);
  }
}

/* ══════════════════════════════════════════
   TURBULENCE JOUR — léger souffle (mobile inclus)
══════════════════════════════════════════ */
body.mode-jour #pandora-world,
html[data-theme='light'] #pandora-world {
  animation: ikran-jour 18s ease-in-out infinite;
}

@keyframes ikran-jour {
  0%,
  100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(2px, -4px);
  }
  66% {
    transform: translate(-3px, 3px);
  }
}

/* ══════════════════════════════════════════
   GRILLE HOLOGRAPHIQUE
══════════════════════════════════════════ */

.holo-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 204, 0.065) 1px, rgba(2, 8, 8, 0.04) 1px),
    linear-gradient(90deg, rgba(123, 79, 232, 0.045) 1px, rgba(2, 8, 8, 0.04) 1px);
  background-size: 80px 80px;
  opacity: 0.44;
  animation: grid-breathe 9s ease-in-out infinite;
}
/* .holo-grid jour : défini plus haut avec holo-grid-drift-jour */
@keyframes grid-breathe {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.4;
  }
}

/* ══════════════════════════════════════════
   MOBILE — performances CSS
══════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Turbulence jour conservée (ikran-jour) — mouvement léger sur mobile */

  body:not(.mode-jour) .orb-1,
  html:not([data-theme='light']) body .orb-1,
  body:not(.mode-jour) .orb-2,
  html:not([data-theme='light']) body .orb-2 {
    width: 300px !important;
    height: 300px !important;
  }

  body:not(.mode-jour) .orb-3,
  html:not([data-theme='light']) body .orb-3,
  body:not(.mode-jour) .orb-4,
  html:not([data-theme='light']) body .orb-4 {
    display: none;
  }

  body.mode-jour .orb-3,
  html[data-theme='light'] body .orb-3 {
    opacity: 0.75;
  }
  body.mode-jour .orb-4,
  html[data-theme='light'] body .orb-4 {
    opacity: 0.65;
  }

  body:not(.mode-jour) .orb,
  html:not([data-theme='light']) body .orb {
    filter: blur(50px) !important;
  }

  .cloud {
    max-width: 70vw;
  }
}

@media (max-width: 390px) {
  /* Grille visible en jour (très légère) pour garder du mouvement */
  body:not(.mode-jour) .holo-grid,
  html:not([data-theme='light']) body .holo-grid {
    display: none;
  }
  body.mode-jour .holo-grid,
  html[data-theme='light'] body .holo-grid {
    opacity: 0.35;
    background-size: 56px 56px;
  }
}

/* ══════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .orb,
  .cloud,
  .spore,
  .star,
  .holo-grid,
  #pandora-world {
    animation: none !important;
    transition: none !important;
  }
}