/* ============================================================
   LA AVENTURA DEL SABER — FONDO GLOBAL COMPARTIDO · ESTABLE 1.1 — FASE 1
   Una sola escena animada para todas las pantallas de menú.
   Solo se animan transform y opacity en las capas principales.
   ============================================================ */

:root {
  --fg-cielo-a:#aee8fa;
  --fg-cielo-b:#d5f3f4;
  --fg-cielo-c:#fff1bd;
  --fg-cielo-d:#ffe29a;
}

#fondoGlobalJuego {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  background:linear-gradient(180deg,var(--fg-cielo-a) 0%,var(--fg-cielo-b) 44%,var(--fg-cielo-c) 76%,var(--fg-cielo-d) 100%);
  opacity:0;
  visibility:hidden;
  /* La entrada al menú no debe destapar un fotograma del fondo base. */
  transition:none;
  contain:layout paint style;
  isolation:isolate;
}

body.fondoGlobalVisible #fondoGlobalJuego { opacity:1; visibility:visible; }

.pantallaFondoGlobalEstable {
  background:transparent !important;
  position:relative !important;
  isolation:isolate;
}
.pantallaFondoGlobalEstable::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.055) 44%,rgba(255,248,227,.09));
}
.pantallaFondoGlobalEstable > * { position:relative; z-index:2; }

.fgCapa { position:absolute; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.fgSol {
  z-index:1; top:1.5vh; right:2.5vw; width:clamp(110px,13vw,195px); height:auto;
  transform:translate3d(0,0,0); transform-origin:center;
  animation:fgRespirarSol 7.8s ease-in-out infinite;
}
.fgNube { z-index:2; height:auto; opacity:.69; transform:translate3d(0,0,0); backface-visibility:hidden; }
.fgNube1 { width:clamp(180px,21vw,320px); top:8vh; left:-5.5vw; animation:fgNube1 24s ease-in-out infinite alternate; }
.fgNube2 { width:clamp(210px,26vw,390px); top:21vh; right:-7vw; opacity:.58; animation:fgNube2 31s ease-in-out infinite alternate; }
.fgNube3 { width:clamp(130px,15vw,225px); top:3vh; left:24vw; opacity:.50; animation:fgNube3 27s ease-in-out infinite alternate; }

.fgMontanas { z-index:3; left:-7%; bottom:25%; width:114%; height:auto; opacity:.90; }
.fgColinas { z-index:4; left:-7%; bottom:12%; width:114%; height:auto; opacity:.98; transform:translate3d(0,0,0); animation:fgColinas 22s ease-in-out infinite alternate; }

.fgCamino,.fgVegetacion { position:absolute; left:0; right:0; overflow:hidden; contain:paint; }
.fgCamino { z-index:5; bottom:-1.5vh; height:38vh; }
.fgVegetacion { z-index:7; bottom:-3.6vh; height:28vh; }
.fgTrack {
  position:absolute; inset-block:0; left:0; pointer-events:none;
  transform:translate3d(0,0,0); backface-visibility:hidden;
  contain:layout paint style;
  animation:fgDesplazar var(--fg-duracion,28s) linear infinite;
  width:calc(100% + var(--fg-paso,1500px));
}
.fgTrackCamino { --fg-paso:1500px; --fg-distancia:-1500px; --fg-escala-y:1.36; --fg-duracion:34s; background:url("imagenes/fondo-global/camino.webp") repeat-x 0 58%/auto 136%; }
.fgTrackVegetacion { --fg-paso:1250px; --fg-distancia:-1250px; --fg-escala-y:1; --fg-duracion:44s; background:url("imagenes/fondo-global/vegetacion.webp") repeat-x 0 100%/auto 100%; }

.fgMariposas { z-index:10; top:14vh; right:6vw; width:clamp(92px,10vw,145px); height:auto; opacity:.95; transform:translate3d(0,0,0); animation:fgMariposas 22s linear infinite; }
.fgHoja { z-index:9; width:clamp(20px,2vw,31px); height:auto; opacity:.85; transform:translate3d(0,0,0); }
.fgHoja1 { left:9%; top:20%; animation:fgHoja1 15s linear infinite; }
.fgHoja2 { right:14%; top:31%; animation:fgHoja2 18s 2s linear infinite; }
.fgEstrella { z-index:8; width:clamp(13px,1.35vw,21px); height:auto; opacity:.18; animation:fgBrillo 7s ease-in-out infinite; }
.fgEstrella1 { left:16%; top:19%; }
.fgEstrella2 { right:25%; top:16%; animation-delay:-2.4s; }

/* Promoción GPU solo mientras la escena está visible. */
body.fondoGlobalVisible .fgSol,
body.fondoGlobalVisible .fgNube,
body.fondoGlobalVisible .fgColinas,
body.fondoGlobalVisible .fgTrack,
body.fondoGlobalVisible .fgMariposas,
body.fondoGlobalVisible .fgHoja { will-change:transform; }
/* El camino y la vegetación no generan capas GPU mientras están congelados. */
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgTrack,
body[data-rendimiento="economico"] #fondoGlobalJuego .fgTrack { will-change:auto !important; }
body:not(.fondoGlobalVisible) #fondoGlobalJuego * { animation-play-state:paused !important; will-change:auto !important; }

/* Fase 6: los tres modos muestran el paisaje con movimiento.
   Antes equilibrado congelaba mariposas, colinas, hojas y estrellas;
   económico congelaba incluso el camino. Los controles de pausa por
   pestaña oculta, pantallas ocultas y modal siguen vigentes. */
body[data-rendimiento="economico"] #fondoGlobalJuego .fgHoja,
body[data-rendimiento="economico"] #fondoGlobalJuego .fgEstrella {
  will-change:auto;
}

/* La introducción conserva el paisaje en movimiento detrás de su marco.
   Configuración sigue congelándolo para evitar repintados sin valor visual. */
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgTrack,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgColinas,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgMariposas,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgHoja,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgEstrella {
  animation-play-state:paused !important;
  will-change:auto !important;
}

body.rendimientoPausado #fondoGlobalJuego * { animation-play-state:paused !important; will-change:auto !important; }

@keyframes fgRespirarSol { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,-2px,0) scale(1.025)} }
@keyframes fgNube1 { from{transform:translate3d(-18px,1px,0)} to{transform:translate3d(44px,-5px,0)} }
@keyframes fgNube2 { from{transform:translate3d(30px,-2px,0)} to{transform:translate3d(-38px,4px,0)} }
@keyframes fgNube3 { from{transform:translate3d(-24px,3px,0)} to{transform:translate3d(34px,-3px,0)} }
@keyframes fgColinas { from{transform:translate3d(6px,0,0) scale(1.003)} to{transform:translate3d(-6px,0,0) scale(1.006)} }
@keyframes fgDesplazar { from{transform:translate3d(0,0,0)} to{transform:translate3d(var(--fg-distancia,-1200px),0,0)} }
@keyframes fgMariposas { 0%{transform:translate3d(5vw,3px,0);opacity:0} 8%{opacity:.95} 50%{transform:translate3d(-14vw,-5px,0)} 92%{opacity:.95} 100%{transform:translate3d(-32vw,2px,0);opacity:0} }
@keyframes fgHoja1 { 0%{transform:translate3d(-6vw,-8vh,0) rotate(0);opacity:0} 12%{opacity:.8} 100%{transform:translate3d(62vw,70vh,0) rotate(520deg);opacity:0} }
@keyframes fgHoja2 { 0%{transform:translate3d(5vw,-8vh,0) rotate(0);opacity:0} 12%{opacity:.7} 100%{transform:translate3d(-56vw,66vh,0) rotate(-470deg);opacity:0} }
@keyframes fgBrillo { 0%,100%{opacity:.12} 50%{opacity:.62} }

@media (max-width:700px) {
  .fgMariposas{width:clamp(78px,21vw,112px);right:2vw;top:15vh}
  .fgTrackCamino{--fg-duracion:40s}.fgTrackVegetacion{--fg-duracion:50s}
}

@media (prefers-reduced-motion:reduce) {
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgTrack,
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgColinas,
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgMariposas,
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgHoja,
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgEstrella { animation-play-state:paused !important; }
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgNube1{animation-duration:45s}
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgNube2{animation-duration:52s}
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgNube3{animation-duration:48s}
  html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgSol{animation-duration:14s}
}

/* ------------------------------------------------------------
   ESTABLE 1.6.2 - FONDO COMPARTIDO REVELADO EN TODOS LOS MENÚS.
   Algunos estilos históricos #pantallaMenu.pantallaMenu:not(.oculto)
   tenían un degradado !important que tapaba el fondo único.
   No afecta mapas, preguntas, editor, ni la decoración interna.
   ------------------------------------------------------------ */
body.fondoGlobalVisible :is(
  #pantallaInicio, #pantallaPerfiles, #pantallaBienvenida,
  #pantallaMenu, #pantallaNivelCompletado, #pantallaRecompensas,
  #pantallaPerfilJugador
).pantallaFondoGlobalEstable:not(.oculto) {
  background-color:transparent !important;
  background-image:none !important;
}