/* ==========================================================================
   JARDÍN PSICOPEDAGÓGICO BEBÉS DISNEY — FONDO INTERACTIVO DEL CASTILLO MÁGICO
   Escena viva: Cielo día/noche, Sol/Luna interactivos, Nubes realistas volumétricas,
   y la Fachada Real del Castillo Medieval en primer plano con sincronización perfecta.
   ========================================================================== */

:root {
    --bd-sky-top-day: #bae6fd;
    --bd-sky-bottom-day: #fefce8;
    --bd-sky-top-night: #090d16;
    --bd-sky-bottom-night: #172554;

    --bd-transition-theme: 1.2s ease;
}

body {
    background-color: transparent !important;
}

.mr-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* ---------- 1. Cielo Día / Noche ---------- */
.mr-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, var(--bd-sky-top-day) 0%, var(--bd-sky-bottom-day) 85%);
    transition: background var(--bd-transition-theme);
}

[data-theme="dark"] .mr-sky {
    background: linear-gradient(180deg, var(--bd-sky-top-night) 0%, var(--bd-sky-bottom-night) 90%);
}

.mr-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity var(--bd-transition-theme);
    background-repeat: no-repeat;
    background-image:
        radial-gradient(1.6px 1.6px at 8% 14%, #fff, transparent),
        radial-gradient(1.8px 1.8px at 22% 8%, #fef08a, transparent),
        radial-gradient(1.2px 1.2px at 34% 20%, #fff, transparent),
        radial-gradient(2px 2px at 48% 12%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 61% 25%, #bae6fd, transparent),
        radial-gradient(1.8px 1.8px at 73% 10%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 85% 18%, #fef08a, transparent),
        radial-gradient(1.6px 1.6px at 93% 9%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 15% 32%, #fff, transparent),
        radial-gradient(1.8px 1.8px at 40% 28%, #fef08a, transparent),
        radial-gradient(1.4px 1.4px at 66% 36%, #fff, transparent),
        radial-gradient(2px 2px at 82% 30%, #bae6fd, transparent);
}

[data-theme="dark"] .mr-stars {
    opacity: 1;
}

/* ---------- 2. Sol y Luna Realistas ---------- */
.mr-celestial {
    position: absolute;
    top: 2.5%;
    right: 5%;
    width: 145px;
    height: 145px;
    will-change: transform;
    z-index: 1;
}

.mr-sun,
.mr-moon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity var(--bd-transition-theme), transform var(--bd-transition-theme);
}

/* Sol Real: Brillo solar pulsante y rotación suave de los rayos solares */
.mr-sun {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 25px rgba(253, 224, 71, 0.85)) drop-shadow(0 0 65px rgba(245, 158, 11, 0.5));
}

.real-sun-rays {
    transform-origin: 120px 120px;
    animation: realSunRaysRotate 55s linear infinite;
}

@keyframes realSunRaysRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.real-sun-glow-outer {
    transform-origin: 120px 120px;
    animation: realSunGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes realSunGlowPulse {
    0% { transform: scale(0.95); opacity: 0.85; }
    100% { transform: scale(1.06); opacity: 1; }
}

/* Luna Real: Halo plateado, flotación sutil */
.mr-moon {
    opacity: 0;
    transform: scale(0.85);
    filter: drop-shadow(0 0 22px rgba(199, 210, 254, 0.9)) drop-shadow(0 0 55px rgba(129, 140, 248, 0.45));
}

[data-theme="dark"] .mr-sun {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
    pointer-events: none;
}

[data-theme="dark"] .mr-moon {
    opacity: 1;
    transform: scale(1);
    animation: realMoonFloat 6s ease-in-out infinite alternate;
}

.real-moon-glow-outer {
    transform-origin: 120px 120px;
    animation: realMoonGlowPulse 5s ease-in-out infinite alternate;
}

@keyframes realMoonFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-5px); }
}

@keyframes realMoonGlowPulse {
    0% { opacity: 0.75; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1.05); }
}

/* ---------- 3. Nubes Flotantes Realistas ---------- */
.mr-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.mr-cloud {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.05));
    transition: opacity var(--bd-transition-theme), filter var(--bd-transition-theme);
}

.mr-cloud .cloud-day-fill {
    opacity: 1;
    transition: opacity var(--bd-transition-theme);
}
.mr-cloud .cloud-night-fill {
    opacity: 0;
    transition: opacity var(--bd-transition-theme);
}

[data-theme="dark"] .mr-cloud {
    filter: drop-shadow(0 12px 35px rgba(0, 0, 0, 0.35));
}
[data-theme="dark"] .mr-cloud .cloud-day-fill {
    opacity: 0;
}
[data-theme="dark"] .mr-cloud .cloud-night-fill {
    opacity: 0.85;
}

/* Posición, escala y trayectoria de cada nube */
.mr-cloud-1 {
    top: 4%;
    left: 6%;
    width: clamp(300px, 32vw, 500px);
    height: auto;
    opacity: 0.88;
    animation: magicCloudDrift1 75s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: -16s;
}

.mr-cloud-2 {
    top: 13%;
    left: 48%;
    width: clamp(340px, 38vw, 560px);
    height: auto;
    opacity: 0.82;
    animation: magicCloudDrift2 95s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: -52s;
}

.mr-cloud-3 {
    top: 20%;
    left: 22%;
    width: clamp(260px, 28vw, 420px);
    height: auto;
    opacity: 0.78;
    animation: magicCloudDrift3 115s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: -86s;
}

.mr-cloud-4 {
    top: 26%;
    left: -4%;
    width: clamp(320px, 35vw, 520px);
    height: auto;
    opacity: 0.85;
    animation: magicCloudDrift4 86s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: -38s;
}

/* Animaciones de Flotación con Oleaje Vertical Realista */
@keyframes magicCloudDrift1 {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(calc(30vw + 100px), -10px, 0); }
    50%  { transform: translate3d(calc(60vw + 200px), 4px, 0); }
    75%  { transform: translate3d(calc(90vw + 300px), -8px, 0); }
    100% { transform: translate3d(calc(120vw + 400px), 0, 0); }
}

@keyframes magicCloudDrift2 {
    0%   { transform: translate3d(0, 0, 0); }
    30%  { transform: translate3d(calc(35vw + 120px), 9px, 0); }
    65%  { transform: translate3d(calc(75vw + 240px), -12px, 0); }
    100% { transform: translate3d(calc(125vw + 480px), 0, 0); }
}

@keyframes magicCloudDrift3 {
    0%   { transform: translate3d(0, 0, 0); }
    35%  { transform: translate3d(calc(38vw + 100px), -12px, 0); }
    70%  { transform: translate3d(calc(75vw + 200px), 7px, 0); }
    100% { transform: translate3d(calc(115vw + 350px), 0, 0); }
}

@keyframes magicCloudDrift4 {
    0%   { transform: translate3d(0, 0, 0); }
    28%  { transform: translate3d(calc(34vw + 110px), 6px, 0); }
    62%  { transform: translate3d(calc(70vw + 220px), -10px, 0); }
    100% { transform: translate3d(calc(120vw + 420px), 0, 0); }
}

/* ==========================================================================
   4. ESCENA ARQUITECTÓNICA DEL CASTILLO DE BEBÉS DISNEY (DÍA Y NOCHE SINCRONIZADOS)
   Silueta COMPLETA con puntas de torres y banderas 100% visibles, sin recortes.
   ========================================================================== */
.bd-castle-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: filter var(--bd-transition-theme);
}

.bd-castle-real-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

.bd-castle-real-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-width: 100%;
    display: block;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out, filter 0.8s ease-in-out;
}

/* Modo Día: Castillo amarillo cálido soleado */
.bd-castle-img-day {
    opacity: 1;
    z-index: 2;
    filter: saturate(1.22) brightness(1.04) drop-shadow(0 -8px 25px rgba(15, 23, 42, 0.12));
}

/* Modo Noche: Oculto en modo día */
.bd-castle-img-night {
    opacity: 0;
    z-index: 1;
    filter: drop-shadow(0 -10px 30px rgba(0, 0, 0, 0.65));
}

/* Modo Noche Activo: Desvanece el de día y enciende el castillo nocturno con luces prendidas */
[data-theme="dark"] .bd-castle-img-day {
    opacity: 0;
    z-index: 1;
}

[data-theme="dark"] .bd-castle-img-night {
    opacity: 1;
    z-index: 2;
    filter: drop-shadow(0 -12px 35px rgba(0, 0, 0, 0.8));
}

/* ---------- 6. Canvas de Chispas Mágicas / Pixie Dust ---------- */
/* ---------- 6. Canvas de Chispas Mágicas / Pixie Dust (POR ENCIMA DE TODO) ---------- */
.mr-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 9999999 !important; /* Por encima de fotos, cuadros informativos y tarjetas */
}

/* ---------- 7. Responsive: Ajuste Automático en Móviles y Tablets ---------- */
@media (max-width: 1024px) {
    .bd-castle-real-img {
        width: 100%;
        height: auto;
    }
    .mr-celestial {
        width: 110px;
        height: 110px;
        right: 4%;
        top: 2%;
    }
}

@media (max-width: 768px) {
    .bd-castle-real-img {
        width: 100%;
        height: auto;
    }
    .mr-celestial {
        width: 85px;
        height: 85px;
        top: 1.5rem;
        right: 1.2rem;
        z-index: 4;
    }
    .mr-clouds {
        z-index: 2;
    }
    .mr-cloud-1 { top: 7%; left: -25vw; width: 220px; opacity: 0.68; }
    .mr-cloud-2 { top: 14%; left: 25vw; width: 250px; opacity: 0.62; }
    .mr-cloud-3 { top: 20%; left: -10vw; width: 200px; opacity: 0.58; }
    .mr-cloud-4 { top: 26%; left: 15vw; width: 230px; opacity: 0.65; }
}

@media (max-width: 480px) {
    .bd-castle-real-img {
        width: 100%;
        height: auto;
    }
    .mr-celestial {
        width: 75px;
        height: 75px;
        top: 1.2rem;
    }
}