/* ================================================================
   FRAN96MC.ES — PORTADA · islas.css
   Fondo alternativo "Islas flotantes 3D": un mundo vertical de islas
   pixel-art que se recorre al hacer scroll, con perspectiva CSS real
   (las islas viven a distintas profundidades translateZ y la cámara
   solo se desplaza; el navegador hace la proyección).

   Se elige desde el panel del Menú (pestaña Portada → Fondo). El
   fondo clásico sigue intacto en #fondo: aquí solo se decide cuál de
   los dos se ve. portada/islas.js construye el DOM la primera vez
   que se activa; si nunca se activa, no cuesta nada.
   ================================================================ */

#mundoIslas{display:none}
body.fondo-islas #mundoIslas{display:block}
/* El escenario clásico se oculta entero (canvas incluido) */
body.fondo-islas #fondo{display:none}

#mundoIslas{
  position:fixed;inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  /* La perspectiva ES el efecto: todo lo que esté en translateZ
     negativo se mueve menos que la cámara al hacer scroll. */
  perspective:1000px;
  perspective-origin:50% 42%;
  background:transparent;
}

/* ----------------------------------------------------------------
   CIELO — degradado que "baja" contigo: arriba noche estrellada,
   abajo la cueva de cristales. islas.js desplaza background-position
   con el scroll (una sola propiedad por frame).
   ---------------------------------------------------------------- */
#miCielo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    #04051a 0%,      /* noche alta */
    #0b0d33 22%,
    #151a4a 42%,     /* azul medio */
    #1a1450 58%,
    #120d38 74%,
    #0a0620 86%,     /* boca de la cueva */
    #050210 100%);
  background-size:100% 300%;
  background-position:50% 0%;
}

/* Estrellas CSS: puntos que titilan por turnos (baratas: solo opacity) */
.mi-estrella{
  position:absolute;
  width:2px;height:2px;
  background:#dfe6ff;
  opacity:.7;
}
.mi-estrella--gorda{width:3px;height:3px;background:#fff}
@media (prefers-reduced-motion:no-preference){
  .mi-estrella{animation:miTitila 3.2s ease-in-out infinite}
  .mi-estrella:nth-child(3n){animation-duration:4.1s;animation-delay:1.2s}
  .mi-estrella:nth-child(4n){animation-duration:2.6s;animation-delay:.6s}
  .mi-estrella:nth-child(5n){animation-duration:5s;animation-delay:2s}
}
@keyframes miTitila{
  0%,100%{opacity:.25}
  50%{opacity:.95}
}

/* ----------------------------------------------------------------
   ECLIPSE — el astro no es una luna quieta: un disco oscuro lo va
   cubriendo EN BUCLE, tan despacio que casi no se percibe (3 minutos
   por ciclo, medio píxel por segundo). En la totalidad aparece la
   corona solar —halo, anillo y penachos girando— con el destello de
   "anillo de diamante" justo al entrar y al salir, y el mundo entero
   se oscurece unos segundos. Todas las piezas comparten la misma
   duración, así que van siempre sincronizadas.
   Con las animaciones reducidas queda un creciente fijo y elegante.
   ---------------------------------------------------------------- */
.mi-eclipse{
  position:absolute;top:4.5vh;left:5vw;width:112px;height:112px;
  filter:drop-shadow(0 0 16px rgba(255,236,160,.4));
}
.mi-eclipse svg{width:100%;height:100%;display:block;overflow:visible}
.ec-luna{transform:translateX(16px)}          /* sin animación: creciente */
.ec-corona,.ec-diamante{opacity:0}
/* Velo de totalidad: cubre cielo e islas dentro del propio fondo */
.mi-eclipse-sombra{position:absolute;inset:0;background:#01010a;opacity:0;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .ec-luna{animation:miEclipseLuna 180s linear infinite}
  .ec-corona{transform-origin:50% 50%;animation:miEclipseCorona 180s ease-in-out infinite}
  .ec-corona-giro{transform-origin:50% 50%;animation:miGira 80s linear infinite}
  .ec-diamante{animation:miDiamante 180s linear infinite}
  .mi-eclipse-sombra{animation:miEclipseOscuro 180s ease-in-out infinite}
}
@keyframes miEclipseLuna{
  0%{transform:translateX(-46px)}
  44%{transform:translateX(-3px)}
  47%,53%{transform:translateX(0)}
  56%{transform:translateX(3px)}
  100%{transform:translateX(46px)}
}
@keyframes miEclipseCorona{
  0%,43.5%{opacity:0;transform:scale(.85)}
  47%,53%{opacity:1;transform:scale(1)}
  56.5%,100%{opacity:0;transform:scale(.88)}
}
@keyframes miEclipseOscuro{
  0%,40%{opacity:0}
  47%,53%{opacity:.5}
  60%,100%{opacity:0}
}
@keyframes miDiamante{
  0%,44.8%{opacity:0}
  45.8%{opacity:1}
  47.2%{opacity:0}
  52.8%{opacity:0}
  54.2%{opacity:1}
  55.2%,100%{opacity:0}
}

/* Nubes pixel que derivan en bucle por todo el ancho */
.mi-nube{position:absolute;opacity:.5}
.mi-nube svg{display:block}
@media (prefers-reduced-motion:no-preference){
  .mi-nube{animation:miNubeVa linear infinite}
  .mi-nube.n1{animation-duration:95s}
  .mi-nube.n2{animation-duration:120s;animation-delay:-40s}
  .mi-nube.n3{animation-duration:78s;animation-delay:-20s}
  .mi-nube.n4{animation-duration:140s;animation-delay:-90s}
}
@keyframes miNubeVa{
  from{transform:translateX(-30vw)}
  to{transform:translateX(115vw)}
}

/* Viajeros del cielo: el brujo en escoba y el búho mensajero cruzan
   en momentos distintos (duraciones y retardos que no coinciden).
   Ambos van ocultos hasta que su animación los trae. */
.mi-brujo{position:absolute;top:12vh;left:0;width:96px;height:66px;opacity:0}
.mi-brujo svg{width:100%;height:100%;display:block;overflow:visible}
.mi-buho{position:absolute;top:26vh;left:0;width:74px;height:64px;opacity:0}
.mi-buho svg{width:100%;height:100%;display:block;overflow:visible}

@media (prefers-reduced-motion:no-preference){
  .mi-brujo{animation:miBrujoViaje 47s linear infinite 5s}
  .mi-brujo .bru-capa{transform-origin:100% 15%;animation:miCapa .8s ease-in-out infinite alternate}
  .mi-brujo .bru-bufanda{transform-origin:100% 50%;animation:miCapa 1.1s ease-in-out infinite alternate-reverse}
  .mi-brujo .bru-monta{animation:miFlota 3.2s ease-in-out infinite;--flota-alto:-3px}
  .mi-brujo .bru-cola{transform-origin:0% 50%;animation:miCola 2.2s ease-in-out infinite}

  /* El búho vuela EN SENTIDO CONTRARIO y en otro momento */
  .mi-buho{animation:miBuhoViaje 61s linear infinite 27s}
  .mi-buho .ala{transform-origin:50% 90%;animation:miAleteo .45s ease-in-out infinite alternate}
  .mi-buho .bu-cuerpo{animation:miFlota 2.6s ease-in-out infinite;--flota-alto:-2px}
}
@keyframes miBrujoViaje{
  0%{transform:translate(-14vw,0);opacity:0}
  3%{opacity:1}
  30%{transform:translate(30vw,-6vh)}
  62%{transform:translate(66vw,2vh)}
  95%{transform:translate(106vw,-3vh);opacity:1}
  100%{transform:translate(112vw,-4vh);opacity:0}
}
@keyframes miBuhoViaje{
  0%{transform:translate(108vw,0);opacity:0}
  4%{opacity:1}
  40%{transform:translate(58vw,-6vh)}
  70%{transform:translate(26vw,1vh)}
  95%{transform:translate(-8vw,-2vh);opacity:1}
  100%{transform:translate(-12vw,-2vh);opacity:0}
}
@keyframes miAleteo{
  from{transform:rotate(-26deg)}
  to{transform:rotate(14deg)}
}
@keyframes miCapa{
  from{transform:skewX(-5deg) scaleX(1)}
  to{transform:skewX(11deg) scaleX(.88)}
}

/* ----------------------------------------------------------------
   EL MUNDO — contenedor que islas.js desplaza con la cámara.
   Cada isla es un hijo absoluto con su translateZ fijado en línea.
   ---------------------------------------------------------------- */
#miMundo{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.mi-isla{
  position:absolute;
  will-change:transform;
}
.mi-isla svg{display:block;width:100%;height:auto}

/* Vaivén de flotar: el translateZ/scale de colocación vive en el
   ELEMENTO (inline); el vaivén, en un envoltorio interior para no
   pelearse con él. Cada isla recibe una duración/retardo inline
   para que ninguna suba y baje a la vez. */
@media (prefers-reduced-motion:no-preference){
  .mi-flota{animation:miFlota var(--flota-dur,7s) ease-in-out infinite var(--flota-ini,0s)}
}
@keyframes miFlota{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(var(--flota-alto,-9px))}
}

/* Las islas lejanas se apagan un poco: profundidad atmosférica */
.mi-isla--lejos{filter:brightness(.72) saturate(.85)}
.mi-isla--medio{filter:brightness(.88)}

/* ----------------------------------------------------------------
   PIEZAS ANIMADAS DENTRO DE LOS SVG
   (transform-box para que cada pieza gire/escale sobre sí misma)
   ---------------------------------------------------------------- */
#mundoIslas svg g,#mundoIslas svg rect,#mundoIslas svg polygon,
#mundoIslas svg circle,#mundoIslas svg path{transform-box:fill-box}

@media (prefers-reduced-motion:no-preference){

  /* Ventanas: velas que parpadean a destiempo */
  .mi-vt{animation:miVela 3.4s ease-in-out infinite}
  .mi-vt:nth-child(2n){animation-delay:.9s;animation-duration:2.8s}
  .mi-vt:nth-child(3n){animation-delay:1.7s;animation-duration:4.2s}

  /* Banderas al viento */
  .mi-bandera{transform-origin:0% 50%;animation:miBandera 1.6s ease-in-out infinite}

  /* Cascadas: columnas de agua cayendo + espuma en el borde */
  .mi-agua{animation:miAguaCae 1.1s linear infinite}
  .mi-agua.a2{animation-delay:-.35s}
  .mi-agua.a3{animation-delay:-.7s}
  .mi-espuma{animation:miEspuma 1.1s linear infinite}

  /* Portales: anillo que gira y corazón que late */
  .mi-portal-giro{transform-origin:50% 50%;animation:miGira 9s linear infinite}
  .mi-portal-nucleo{transform-origin:50% 50%;animation:miLate 2.2s ease-in-out infinite}

  /* Círculo de runas: gira despacio y destella */
  .mi-runas-giro{transform-origin:50% 50%;animation:miGira 22s linear infinite}
  .mi-runa{animation:miTitila 2.8s ease-in-out infinite}
  .mi-runa:nth-child(2n){animation-delay:.7s}
  .mi-runa:nth-child(3n){animation-delay:1.4s}

  /* Dragón: alas, cola y cabeza */
  .mi-ala-i{transform-origin:100% 80%;animation:miAlaBate 1.1s ease-in-out infinite}
  .mi-ala-d{transform-origin:0% 80%;animation:miAlaBateD 1.1s ease-in-out infinite}
  .mi-cola{transform-origin:0% 50%;animation:miCola 3.6s ease-in-out infinite}
  .mi-cabeza{transform-origin:50% 100%;animation:miCabeza 5s ease-in-out infinite}
  .mi-fuego{transform-origin:0% 50%;animation:miFuego 5s ease-in-out infinite}

  /* Caldero: burbujas que suben y humo */
  .mi-burbuja{animation:miBurbujaSube 1.6s linear infinite}
  .mi-burbuja.b2{animation-delay:-.5s}
  .mi-burbuja.b3{animation-delay:-1.05s}
  .mi-humo{animation:miHumo 3.2s ease-in-out infinite}

  /* Pantallas tech: parpadeo de escaneo + robot que ladea la cabeza */
  .mi-scan{animation:miScan 2.4s steps(2,jump-none) infinite}
  .mi-robot-cabeza{transform-origin:50% 100%;animation:miRobot 4.5s ease-in-out infinite}
  .mi-robot-ojo{animation:miVela 3s steps(2,jump-none) infinite}

  /* Cristales y tesoros que destellan */
  .mi-cristal{animation:miCristal 2.6s ease-in-out infinite}
  .mi-cristal.c2{animation-delay:.8s}
  .mi-cristal.c3{animation-delay:1.6s}
  .mi-moneda{animation:miTitila 1.8s ease-in-out infinite}

  /* Camino de juego: estrellas que se encienden en oleada */
  .mi-hito{animation:miHito 3.6s ease-in-out infinite}

  /* Libro flotante de la biblioteca */
  .mi-libro{animation:miLibroFlota 3.4s ease-in-out infinite}

  /* Globo aerostático: balanceo suave */
  .mi-globo-vaiven{transform-origin:50% 0%;animation:miGloboVaiven 6s ease-in-out infinite}

  /* Neón de la ciudad IA + arcoíris */
  .mi-neon{animation:miNeon 3.5s ease-in-out infinite}
  .mi-neon.n2{animation-delay:1.1s}
  .mi-arcoiris{animation:miArcoiris 4s ease-in-out infinite}

  /* Reloj del castillo: péndulo de la aguja */
  .mi-aguja{transform-origin:50% 90%;animation:miGira 60s linear infinite}

  /* Carteles con brillo que recorre el texto */
  .mi-cartel-brillo{animation:miTitila 4s ease-in-out infinite}
}

@keyframes miVela{
  0%,100%{opacity:1}
  45%{opacity:.55}
  55%{opacity:.9}
  70%{opacity:.45}
}
@keyframes miBandera{
  0%,100%{transform:skewY(0deg) scaleX(1)}
  50%{transform:skewY(-7deg) scaleX(.92)}
}
@keyframes miAguaCae{
  from{transform:translateY(-6px);opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  to{transform:translateY(26px);opacity:0}
}
@keyframes miEspuma{
  0%,100%{opacity:.4;transform:scaleX(.8)}
  50%{opacity:1;transform:scaleX(1.15)}
}
@keyframes miGira{to{transform:rotate(360deg)}}
@keyframes miLate{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.14);opacity:1}
}
@keyframes miAlaBate{
  0%,100%{transform:rotate(6deg)}
  50%{transform:rotate(-24deg)}
}
@keyframes miAlaBateD{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(24deg)}
}
@keyframes miCola{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(8deg)}
}
@keyframes miCabeza{
  0%,88%,100%{transform:rotate(0)}
  92%{transform:rotate(-7deg)}
  96%{transform:rotate(3deg)}
}
@keyframes miFuego{
  0%,78%,100%{opacity:0;transform:scaleX(.3)}
  84%{opacity:1;transform:scaleX(1)}
  92%{opacity:.8;transform:scaleX(1.15)}
  97%{opacity:0;transform:scaleX(.4)}
}
@keyframes miBurbujaSube{
  from{transform:translateY(0);opacity:0}
  25%{opacity:1}
  80%{opacity:1}
  to{transform:translateY(-11px);opacity:0}
}
@keyframes miHumo{
  0%{transform:translateY(0) scale(.7);opacity:0}
  30%{opacity:.5}
  100%{transform:translateY(-16px) scale(1.3);opacity:0}
}
@keyframes miScan{
  0%,100%{opacity:.35}
  50%{opacity:.9}
}
@keyframes miRobot{
  0%,70%,100%{transform:rotate(0)}
  78%{transform:rotate(-9deg)}
  90%{transform:rotate(6deg)}
}
@keyframes miCristal{
  0%,100%{opacity:.7;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.6)}
}
@keyframes miHito{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.25)}
}
@keyframes miLibroFlota{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-5px) rotate(3deg)}
}
@keyframes miGloboVaiven{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}
@keyframes miNeon{
  0%,100%{opacity:.75;filter:drop-shadow(0 0 3px #59e0ff)}
  50%{opacity:1;filter:drop-shadow(0 0 9px #59e0ff)}
}

/* --- Piezas finas de la versión detallada --- */
@media (prefers-reduced-motion:no-preference){
  /* Segundo anillo del portal girando al revés */
  .mi-portal-giro2{transform-origin:50% 50%;animation:miGiraInv 7s linear infinite}
  /* Llamas de vela y antorcha */
  .mi-llama{transform-origin:50% 100%;animation:miLlama .45s ease-in-out infinite alternate}
  .mi-llama.f2{animation-delay:-.2s;animation-duration:.6s}
  /* LEDs de los racks tech parpadeando a destiempo */
  .mi-led{animation:miVela 1.6s steps(2,jump-none) infinite}
  .mi-led.l2{animation-delay:.4s}
  .mi-led.l3{animation-delay:.8s}
  .mi-led.l4{animation-delay:1.2s}
  /* Murciélagos de la cueva revoloteando */
  .mi-murcielago{animation:miMurci 11s ease-in-out infinite}
  .mi-murcielago.m2{animation-delay:-5s}
  .mi-murcielago .ala{transform-origin:50% 50%;animation:miAleteo .3s ease-in-out infinite alternate}
  /* Deslizador de la ciudad IA */
  .mi-coche{animation:miCoche 9s ease-in-out infinite}
  /* Haz de luz vertical (círculo de runas, portal) */
  .mi-rayo{animation:miTitila 3.1s ease-in-out infinite}
  /* Segunda chimenea con su propio ritmo */
  .mi-humo2{animation:miHumo 4.1s ease-in-out infinite 1.3s}
  /* Esquirlas orbitando el portal */
  .mi-orbita{transform-origin:50% 50%;animation:miGira 12s linear infinite}
  .mi-orbita.o2{animation:miGiraInv 16s linear infinite}
}
@keyframes miGiraInv{to{transform:rotate(-360deg)}}
@keyframes miLlama{
  from{transform:scaleY(1) scaleX(1)}
  to{transform:scaleY(1.4) scaleX(.8)}
}
@keyframes miMurci{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(26px,-10px)}
  50%{transform:translate(8px,-20px)}
  75%{transform:translate(-14px,-8px)}
}
@keyframes miCoche{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(34px,-6px)}
}
@keyframes miArcoiris{
  0%,100%{opacity:.55}
  50%{opacity:.95}
}

/* En pantallas pequeñas el mundo se estrecha: las islas laterales se
   acercan al centro (islas.js reduce su separación), y las decorativas
   muy lejanas se ocultan para no amontonar. */
@media (max-width:640px){
  .mi-isla--extra{display:none}
}