/* Configuramos la pantalla completa */
body {
    margin: 0; height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; background-size: cover;
    background-position: center; transition: background-image 1s ease-in-out, background-position 2s ease-in-out; 
    font-family: 'Caveat', cursive; overflow: hidden; position: relative; background-color: #000;
}

#pantalla-inicio {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center;
    z-index: 100; transition: opacity 1s ease-in-out; color: white; text-align: center;
}
#pantalla-inicio h1 { font-size: 3.5rem; margin-bottom: 10px; }
#pantalla-inicio p { font-size: 1.8rem; margin-bottom: 30px; }
#boton-empezar {
    padding: 15px 40px; font-size: 1.8rem; font-family: 'Caveat', cursive;
    background-color: white; color: #333; border: none; border-radius: 30px;
    cursor: pointer; box-shadow: 0 0 20px rgba(255,255,255,0.5); transition: transform 0.2s;
}
#boton-empezar:hover { transform: scale(1.1); }

#fondo-galaxia-animado {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-size: cover; background-position: center;
    transition: transform 4s ease-in-out, opacity 1s ease-in-out; 
    transform-origin: center center; opacity: 0; pointer-events: none; z-index: 1; will-change: transform;
}

/* =========================================
   ✨ MEJORA VISUAL DE DIBUJOS (FILTROS)
   ========================================= */
#dibujo-animado, .rata-playa, .rata-voladora {
    filter: brightness(1.1) contrast(1.2) saturate(1.3) drop-shadow(4px 4px 6px rgba(139, 69, 19, 0.4)); 
    transition: opacity 0.5s ease, top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out, filter 0.5s;
    transform-origin: center center;
}

/* --- ESTILOS GENERALES DE LOS DIBUJOS --- */
#dibujo-animado { position: absolute; z-index: 15; /* Delante del texto */ }
.dibujo-platillo { max-width: 15vw; max-height: 15vh; }

/* Centrado base sin afectar tamaños */
.dibujo-estatico { 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
}

/* Clases que leen los tamaños separados del JS */
.tamanio-arbol { max-width: var(--escala-arbol) !important; max-height: var(--escala-arbol) !important; }
.tamanio-girasol { max-width: var(--escala-girasol) !important; max-height: var(--escala-girasol) !important; }

.esquina-top-left { top: 55px; left: 55px; transform: rotate(-10deg); }
.esquina-bottom-right { bottom: 15%; right: 75px; transform: rotate(15deg); }
.esquina-top-right { top: 55px; right: 75px; transform: rotate(5deg); }

.vuelo-libre { top: 50%; left: 50%; animation: volarPorAhi 12s ease-in-out infinite alternate; }
@keyframes volarPorAhi { 0% { transform: translate(0vw, 0vh) rotate(0deg); } 25% { transform: translate(30vw, -30vh) rotate(15deg); } 50% { transform: translate(-30vw, 20vh) rotate(-10deg); } 75% { transform: translate(20vw, 30vh) rotate(5deg); } 100% { transform: translate(-20vw, -20vh) rotate(-5deg); } }

/* --- ESTILOS DEL TEXTO (COORDENADAS CONTROLADAS POR JS) --- */
#contenedor-texto {
    position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; 
    z-index: 10; /* Siempre detrás de los dibujos */
    left: var(--pos-texto-x); 
    top: var(--pos-texto-y); 
    transform: translate(-50%, -50%);
    width: var(--ancho-cuadro-texto); height: var(--alto-cuadro-texto);
}
#texto-historia {
    font-size: 2.2rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.7); 
    padding: 25px; border-radius: 15px; width: 100%; height: 100%; box-sizing: border-box; transition: opacity 0.5s ease; overflow-y: auto;
}

#boton-magico {
    position: fixed; bottom: 20px; padding: 12px 24px; font-size: 1.3rem; font-family: 'Caveat', cursive; cursor: pointer; background-color: rgba(255, 255, 255, 0.85);
    border: none; border-radius: 20px; z-index: 60; transition: transform 0.2s, opacity 0.5s ease; display: none; animation: latidoResplandor 2s infinite;
}
#boton-magico:hover { transform: scale(1.05); background-color: white; animation: none; }
@keyframes latidoResplandor { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* =========================================
   🏝️ COREOGRAFÍA PLAYA (MOVIMIENTO LIBRE CON FLIPS)
   ========================================= */
.rata-playa { position: absolute; max-width: var(--escala-ratas-playa); max-height: var(--escala-ratas-playa); z-index: 16; bottom: 15%; will-change: transform; }
#rata1 { left: 0; } #rata2 { right: 0; }
.rata-caminando { animation-duration: 15s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
#rata1.rata-caminando { animation-name: caminarLibreR1_v2; } #rata2.rata-caminando { animation-name: caminarLibreR2_v2; }
@keyframes caminarLibreR1_v2 { 0% { transform: translate(0vw, 0vh) scaleX(1); } 32% { transform: translate(30vw, -5vh) scaleX(1); } 33% { transform: translate(30vw, -5vh) scaleX(-1); } 65% { transform: translate(15vw, 5vh) scaleX(-1); } 66% { transform: translate(15vw, 5vh) scaleX(1); } 100% { transform: translate(45vw, 0vh) scaleX(1); } }
@keyframes caminarLibreR2_v2 { 0% { transform: translate(0vw, 0vh) scaleX(1); } 32% { transform: translate(-30vw, 5vh) scaleX(1); } 33% { transform: translate(-30vw, 5vh) scaleX(-1); } 65% { transform: translate(-15vw, -5vh) scaleX(-1); } 66% { transform: translate(-15vw, -5vh) scaleX(1); } 100% { transform: translate(-45vw, 0vh) scaleX(1); } }
.rata1-corre-al-beso { animation: correrR1 3s ease-in-out forwards; } .rata2-corre-al-beso { animation: correrR2 3s ease-in-out forwards; }
@keyframes correrR1 { 0% { transform: translateX(15vw); } 100% { transform: translateX(calc(50vw - 100%)); } }
@keyframes correrR2 { 0% { transform: translateX(-15vw); } 100% { transform: translateX(calc(-50vw + 100%)); } }
.pequeño-beso { animation-duration: 0.5s; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 3s; }
#rata1.pequeño-beso { animation-name: besoR1; } #rata2.pequeño-beso { animation-name: besoR2; }
@keyframes besoR1 { 0% { transform: translateX(calc(50vw - 100%)) rotate(0deg); } 100% { transform: translateX(calc(50vw - 90%)) rotate(-10deg); } }
@keyframes besoR2 { 0% { transform: translateX(calc(-50vw + 100%)) rotate(0deg); } 100% { transform: translateX(calc(-50vw + 90%)) rotate(10deg); } }

/* =========================================
   🌻 COREOGRAFÍA: RATAS VOLADORAS (MÁS ALTO)
   ========================================= */
.camara-siguiendo { animation: seguirRatas 12s ease-in-out infinite alternate; will-change: background-position; }
@keyframes seguirRatas { 0% { background-position: 50% 50%; } 50% { background-position: 100% 0%; } 100% { background-position: 0% 100%; } }
.rata-voladora { position: absolute; z-index: 16; will-change: transform; max-width: var(--escala-ratas-voladoras); max-height: var(--escala-ratas-voladoras); }
#Rataconhalas1 { left: 0; } #Rataconhalas2 { right: 0; }
.rata-volando-libre { animation-duration: 12s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
#Rataconhalas1.rata-volando-libre { animation-name: volarR1_v2; } #Rataconhalas2.rata-volando-libre { animation-name: volarR2_v2; }
@keyframes volarR1_v2 { 0% { transform: translate(-10vw, -10vh) rotate(5deg); } 50% { transform: translate(40vw, -30vh) rotate(15deg); } 100% { transform: translate(-10vw, -50vh) rotate(-5deg); } }
@keyframes volarR2_v2 { 0% { transform: translate(10vw, -50vh) rotate(-5deg); } 50% { transform: translate(-40vw, -20vh) rotate(-15deg); } 100% { transform: translate(10vw, -10vh) rotate(5deg); } }

.rata1-corre-al-beso-volador { animation: correrVoladorR1 3s ease-in-out forwards; }
.rata2-corre-al-beso-volador { animation: correrVoladorR2 3s ease-in-out forwards; }
@keyframes correrVoladorR1 { 0% { transform: translate(-10vw, -50vh) rotate(-5deg); } 100% { transform: translate(calc(50vw - 100%), -33vh) rotate(0deg); } }
@keyframes correrVoladorR2 { 0% { transform: translate(10vw, -10vh) rotate(5deg); } 100% { transform: translate(calc(-50vw + 100%), -33vh) rotate(0deg); } }

.pequeño-beso-volador { animation-duration: 0.5s; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 3s; }
#Rataconhalas1.pequeño-beso-volador { animation-name: besoVoladorR1; }
#Rataconhalas2.pequeño-beso-volador { animation-name: besoVoladorR2; }
@keyframes besoVoladorR1 { 0% { transform: translate(calc(50vw - 100%), -33vh) rotate(0deg); } 100% { transform: translate(calc(50vw - 90%), -33vh) rotate(-10deg); } }
@keyframes besoVoladorR2 { 0% { transform: translate(calc(-50vw + 100%), -33vh) rotate(0deg); } 100% { transform: translate(calc(-50vw + 90%), -33vh) rotate(10deg); } }