/* PINAPP — pandora-jour.css — v6
   Fond Pandora JOUR — Océan Pandora (eau / bioluminescence, cahier graphique)
   Tempo : The Light Always Returns — 3.5s
   ================================================================= */

@import url('./pinapp-jour-waves.css');

/* =====================================================
   FOND JOUR — abyssal + photo Dylan Cole (teinte eau)
   ===================================================== */

body.mode-jour,
html[data-theme='light'] body {
  background-color: var(--fond-jour, #060d1f);
}

body.mode-jour::before,
html[data-theme='light'] body::before {
  background-image:
    radial-gradient(ellipse 75% 55% at 50% -8%, rgba(79, 195, 247, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 95% 18%, rgba(124, 77, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 48% at 8% 82%, rgba(13, 71, 161, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 48% 42% at 72% 62%, rgba(45, 212, 191, 0.06) 0%, transparent 58%),
    /* Voile : lisibilité texte + un peu plus de relief photo (relecture 2026) */
    linear-gradient(
        165deg,
        rgba(6, 13, 31, 0.7) 0%,
        rgba(13, 27, 62, 0.34) 48%,
        rgba(6, 13, 31, 0.64) 100%
      ),
    /* Chemin relatif au fichier CSS (assets/css/), pas à la racine du site */
    url('../images/bg-pandora-jour.png');
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    cover;
  background-position: center, center, center, center, center, center;
  background-repeat: no-repeat;
  animation: pandora-jour-drift 22s ease-in-out infinite alternate;
}

/* Dérive jour — lent souffle (photo + halos via filtre ; mouvement aussi via orbes / nuages / grille) */
@keyframes pandora-jour-drift {
  0% {
    filter: blur(20px) hue-rotate(-6deg) brightness(0.8) saturate(1.12);
  }
  50% {
    filter: blur(20px) hue-rotate(-2deg) brightness(0.84) saturate(1.18);
  }
  100% {
    filter: blur(20px) hue-rotate(-8deg) brightness(0.78) saturate(1.08);
  }
}

/* =====================================================
   FORMES ORGANIQUES FLOTTANTES — végétation Pandora
   ===================================================== */

.pandora-shapes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
body:not(.mode-jour) .pandora-shapes,
html[data-theme='dark'] .pandora-shapes {
  display: none;
}

.pandora-shape {
  position: absolute;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  filter: blur(65px);
  animation:
    shape-ascend var(--dur, 20s) ease-in-out infinite var(--delay, 0s),
    forest-sway calc(var(--dur, 20s) * 0.35) ease-in-out infinite;
  will-change: transform, opacity;
}

/* Végétation qui se balance — pendule Pandora, 5 keyframes pour la fluidité */
@keyframes forest-sway {
  0% {
    transform: rotate(0deg) translateX(0px);
  }
  18% {
    transform: rotate(2.2deg) translateX(5px);
  }
  36% {
    transform: rotate(-1.4deg) translateX(-3px);
  }
  55% {
    transform: rotate(1.8deg) translateX(4px);
  }
  73% {
    transform: rotate(-0.9deg) translateX(-2px);
  }
  100% {
    transform: rotate(0deg) translateX(0px);
  }
}

/* Shape 1 — teal brume */
.pandora-shape-1 {
  width: clamp(260px, 45vw, 500px);
  height: clamp(200px, 35vw, 400px);
  background: radial-gradient(
    ellipse,
    rgba(15, 118, 110, 0.22) 0%,
    rgba(45, 160, 180, 0.1) 55%,
    transparent 100%
  );
  filter: blur(clamp(45px, 8vw, 70px));
  top: -80px;
  left: -80px;
  --dur: 20s;
  --delay: -2s;
  --dx: 40px;
  --dy: -30px;
  --rot: 8deg;
}

/* Shape 2 — indigo très doux */
.pandora-shape-2 {
  width: clamp(280px, 55vw, 600px);
  height: clamp(180px, 30vw, 350px);
  background: radial-gradient(
    ellipse,
    rgba(99, 102, 241, 0.16) 0%,
    rgba(129, 140, 248, 0.08) 52%,
    transparent 100%
  );
  filter: blur(clamp(40px, 7vw, 65px));
  bottom: -60px;
  right: -60px;
  --dur: 25s;
  --delay: -10s;
  --dx: -35px;
  --dy: 25px;
  --rot: -6deg;
}

/* Shape 3 — cyan glacier */
.pandora-shape-3 {
  width: clamp(180px, 35vw, 400px);
  height: clamp(220px, 40vw, 500px);
  background: radial-gradient(
    ellipse,
    rgba(14, 165, 233, 0.14) 0%,
    rgba(15, 118, 110, 0.1) 55%,
    transparent 100%
  );
  filter: blur(clamp(40px, 7vw, 65px));
  top: 30%;
  right: 8%;
  --dur: 18s;
  --delay: -6s;
  --dx: -20px;
  --dy: -40px;
  --rot: 12deg;
}

/* Shape 4 — lavande ardoise */
.pandora-shape-4 {
  width: clamp(160px, 30vw, 350px);
  height: clamp(140px, 25vw, 300px);
  background: radial-gradient(
    ellipse,
    rgba(100, 116, 139, 0.12) 0%,
    rgba(79, 70, 229, 0.08) 52%,
    transparent 100%
  );
  filter: blur(clamp(40px, 7vw, 65px));
  bottom: 20%;
  left: 5%;
  --dur: 22s;
  --delay: -14s;
  --dx: 30px;
  --dy: 20px;
  --rot: -4deg;
}

/* Shape ascend — danse en 6 actes, comme une méduse montant dans l'eau */
@keyframes shape-ascend {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  8% {
    opacity: 0.7;
  }
  22% {
    opacity: 0.9;
    transform: translate(calc(var(--dx, 30px) * 0.4), calc(var(--dy, -20px) * 0.3)) scale(1.04)
      rotate(calc(var(--rot, 6deg) * 0.3));
  }
  42% {
    opacity: 1;
    transform: translate(calc(var(--dx, 30px) * 0.9), calc(var(--dy, -20px) * 0.8)) scale(1.1)
      rotate(calc(var(--rot, 6deg) * 0.8));
  }
  58% {
    opacity: 0.95;
    transform: translate(var(--dx, 30px), var(--dy, -20px)) scale(1.12) rotate(var(--rot, 6deg));
  }
  76% {
    opacity: 0.85;
    transform: translate(calc(var(--dx, 30px) * 0.6), calc(var(--dy, -20px) * 0.5)) scale(1.05)
      rotate(calc(var(--rot, 6deg) * 0.4));
  }
  92% {
    opacity: 0.1;
    transform: translate(calc(var(--dx, 30px) * 0.1), calc(var(--dy, -20px) * 0.1)) scale(1.01)
      rotate(calc(var(--rot, 6deg) * 0.1));
  }
  100% {
    opacity: 0;
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
}

@media (max-width: 767px) {
  .pandora-shape-3,
  .pandora-shape-4 {
    transform: scale(0.85);
    opacity: 0.85;
  }
}

/* =====================================================
   PARTICULES LUMIÈRE JOUR — spores Pandora dorés
   Points dorés flottants évoquant la poussière d'aube Dylan Cole
   ===================================================== */

.jour-spores {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: none; /* masqué en mode nuit */
}

body.mode-jour .jour-spores,
html[data-theme='light'] .jour-spores {
  display: block;
}

/* Particule individuelle — pseudo-élément */
.jour-spore {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.45);
  box-shadow:
    0 0 6px rgba(15, 118, 110, 0.35),
    0 0 12px rgba(99, 102, 241, 0.15);
  animation: spore-jour-float var(--dur, 18s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}

/* Trajectoire parabolique avec balancement (comme pollen dans un souffle de vent) */
@keyframes spore-jour-float {
  0% {
    transform: translate(0, 0) scale(0.7) rotate(0deg);
    opacity: 0;
  }
  6% {
    opacity: 0.8;
    transform: scale(1);
  }
  20% {
    transform: translate(calc(var(--dx, 18px) * 0.4), calc(var(--dy, -35px) * 0.3)) scale(1.1)
      rotate(8deg);
    opacity: 0.75;
  }
  40% {
    transform: translate(calc(var(--dx, 18px) * 0.9), calc(var(--dy, -35px) * 0.7)) scale(1.2)
      rotate(-6deg);
    opacity: 0.65;
  }
  60% {
    transform: translate(calc(var(--dx, 18px) * 1.2), calc(var(--dy, -35px) * 1.1)) scale(1.1)
      rotate(10deg);
    opacity: 0.55;
  }
  80% {
    transform: translate(calc(var(--dx, 18px) * 0.8), calc(var(--dy, -35px) * 1.6)) scale(0.9)
      rotate(-4deg);
    opacity: 0.3;
  }
  94% {
    opacity: 0.05;
  }
  100% {
    transform: translate(calc(var(--dx, 18px) * 0.3), calc(var(--dy, -35px) * 2)) scale(0.6)
      rotate(0deg);
    opacity: 0;
  }
}

/* Spore teal — résidu bioluminescent de la nuit */
.jour-spore-teal {
  width: 2px;
  height: 2px;
  background: rgba(60, 210, 170, 0.5);
  box-shadow:
    0 0 5px rgba(60, 210, 170, 0.35),
    0 0 10px rgba(0, 180, 150, 0.18);
}

/* Mobile — spores encore plus légères */
@media (max-width: 767px) {
  .jour-spore {
    width: 2px;
    height: 2px;
  }
}

/* =====================================================
   GRILLE HOLOGRAPHIQUE — visible mais subtile
   ===================================================== */

.holo-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 180, 216, 0.044) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 216, 0.044) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
  animation: grid-breathe 3.5s ease-in-out infinite;
}

/* Grille jour : pandora-world.css (teal/indigo + holo-grid-drift-jour) */

@media (prefers-reduced-motion: reduce) {
  .pandora-shape {
    animation: none !important;
  }
  .holo-grid {
    animation: none !important;
  }
}

/* =====================================================
   TOKENS MODE JOUR — alignés variables.css / pandora-jour-override
   ===================================================== */

body.mode-jour,
html[data-theme='light'] body {
  --ambre: #4fc3f7;
  --or: #7c4dff;
  --accent-ambre: #4fc3f7;
  --glow-teal: 0 0 16px rgba(79, 195, 247, 0.4), 0 0 48px rgba(79, 195, 247, 0.18);
  --glow-ambre: 0 0 18px rgba(124, 77, 255, 0.32), 0 0 44px rgba(124, 77, 255, 0.14);
}

/* =====================================================
   LOADER PANDORA — thème clair
   ===================================================== */

#pandora-loader {
  position: fixed;
  inset: 0;
  background: #010d12;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 400ms ease;
}
body.mode-jour #pandora-loader,
html[data-theme='light'] #pandora-loader {
  background: #060d1f;
}

/* Écran d’entrée : logo officiel + barre (nuit / jour) */
.pinapp-entry-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vh, 36px);
  padding: 24px;
}

.pinapp-entry-logo {
  width: auto;
  height: auto;
  max-width: min(220px, 58vw);
  max-height: 56px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.35));
}

body.mode-jour .pinapp-entry-logo,
html[data-theme='light'] .pinapp-entry-logo {
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
}

.pinapp-entry-progress-track {
  width: min(280px, 72vw);
  height: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

body.mode-jour .pinapp-entry-progress-track,
html[data-theme='light'] .pinapp-entry-progress-track {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.12) inset;
}

.pinapp-entry-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #7b4fe8 0%, #00e5cc 100%);
  transition: width 0.18s ease-out;
}

body.mode-jour .pinapp-entry-progress-bar,
html[data-theme='light'] .pinapp-entry-progress-bar {
  background: linear-gradient(90deg, #4fc3f7 0%, #7c4dff 55%, #2dd4bf 100%);
}

@media (prefers-reduced-motion: reduce) {
  .pinapp-entry-progress-bar {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — pandora-jour
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Jour mobile — drift plus lent (mouvement conservé, GPU modéré) */
  body.mode-jour::before,
  html[data-theme='light'] body::before {
    animation: pandora-jour-drift 32s ease-in-out infinite alternate;
    filter: blur(22px) saturate(118%) brightness(0.82) hue-rotate(-6deg);
  }

  /* Ne pas couper la grille animée (nuit + jour) — réduction via pandora-world / reduced-motion */

  /* pandora-shapes — animation très lente (pas de zéro qui cache) */
  .pandora-shape {
    animation:
      shape-ascend-mobile 40s ease-in-out infinite,
      forest-sway 14s ease-in-out infinite;
  }
}

/* Keyframe mobile simplifié — pas de opacity:0 aux extrêmes */
@keyframes shape-ascend-mobile {
  0% {
    opacity: 0.45;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.65;
    transform: translate(var(--dx, 20px), var(--dy, -12px)) scale(1.05);
  }
  100% {
    opacity: 0.45;
    transform: translate(0, 0) scale(1);
  }
}