/* --- CONFIGURACIÓN GENERAL --- */
body {
    background: #fff;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

div { transform-style: preserve-3d; }

/* --- ESCENA 1: ATARDECER (Sunset) --- */
.world { perspective: 600px; position: relative; transition: filter 1.5s ease; }
.world.blur-bg { filter: blur(10px) brightness(0.4); } /* Clase para oscurecer el fondo */

.sun {
    position: absolute;
    top: calc(50% + 40px); left: calc(50% - 50px);
    width: 100px; height: 55px;
    border-radius: 100px 100px 0 0;
    background: linear-gradient(0deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%);
    z-index: 999;
    filter: blur(4px) contrast(2);
}

.bg {
    position: absolute;
    top: calc(50% - 150px); left: calc(50% - 400px);
    width: 800px; height: 300px;
    background: #ffff00;
    filter: blur(5px) contrast(100);
}

.wave {
    position: absolute;
    top: calc(50% + 87px); left: calc(50% - 60px);
    width: 120px; height: 12px;
    background: #fff;
    border-radius: 100%;
}
.wave:not(:first-child) { animation: wave 2000ms infinite linear; }
.wave:nth-child(2) { animation-delay: -500ms; }
.wave:nth-child(3) { animation-delay: -1000ms; }
.wave:nth-child(4) { animation-delay: -1500ms; }
.wave:nth-child(5) { animation-delay: -1500ms; }
.wave:nth-child(6) { animation-delay: -2000ms; }

@keyframes wave {
    0% { transform: translateY(0) scale(1) rotateZ(0); }
    50% { transform: translateY(40px) scale(0.5) rotateZ(5deg); }
    100% { transform: translateY(30px) scale(0) rotateZ(-40deg); }
}

.sea {
    position: absolute;
    top: calc(50% + 80px); left: calc(50% - 400px);
    width: 800px; height: 70px;
    background: radial-gradient(ellipse at top, rgba(255,255,255, 1) 0%, rgba(255,215,0, 0.1) 10%, rgba(210,105,30, 1) 100%);
}

.sky {
    position: absolute;
    top: calc(50% - 150px); left: calc(50% - 400px);
    width: 800px; height: 240px;
    background: radial-gradient(ellipse at bottom, rgba(255,255,0, 1) 0%, rgba(240,230,140, 1) 15%, rgba(255,165,0, 1) 100%);
}

.horizon {
    position: absolute; top: 50%;
    width: 800px; height: 200px;
    border-radius: 100%;
    background: radial-gradient(ellipse at center, rgba(255,255,255, 0.4) 0%, rgba(255,255,255, 0) 70%);
    filter: blur(10px);
}

.sunset {
    position: relative; width: 800px; height: 300px;
    overflow: hidden; border-radius: 7px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.line {
    position: absolute; top: 50%; left: calc(50% - 7px);
    width: 14px; height: 150px;
    background: white;
}
.line.-left { transform: translateZ(300px) translateX(-70px) translateY(-50%); }
.line.-right { transform: translateZ(300px) translateX(70px) translateY(-50%); }

/* PÁJAROS */
.birdposition { position: absolute; top: calc(50% + 60px); left: calc(50% - 40px); }
.bird { position: absolute; width: 80px; animation: fly 8s linear infinite; }
.wing {
    position: absolute; width: 50%; height: 20px;
    border-top: 4px solid black; border-radius: 100%;
}
.wing.-left { transform-origin: 100% 50%; animation: wingLeft 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate; }
.wing.-right { right: 0; transform-origin: 0 50%; animation: wingRight 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate; }

@keyframes fly {
    0% { opacity: 0; transform: translateZ(500px); }
    20% { opacity: 1; transform: translateZ(400px); }
    100% { transform: translateZ(0px) scale(0); }
}
@keyframes wingLeft { 0% { transform: rotateZ(30deg); } 100% { transform: rotateZ(-20deg); } }
@keyframes wingRight { 0% { transform: rotateZ(-30deg); } 100% { transform: rotateZ(20deg); } }

/* --- CUERDA --- */
.rope-container {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    cursor: grab; z-index: 1000;
}
.rope-container:active { cursor: grabbing; }
.rope-line {
    width: 8px; height: 180px;
    background: repeating-linear-gradient(45deg, #5d4037, #5d4037 4px, #3e2723 4px, #3e2723 8px);
    position: relative; transition: height 0.1s linear;
}
.rope-end {
    width: 16px; height: 20px; background: #5d4037;
    border-radius: 0 0 8px 8px; margin-top: -2px;
}
.rope-bounce .rope-line { animation: bounceRope 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes bounceRope { 0% { height: 350px; } 50% { height: 160px; } 100% { height: 180px; } }

/* --- ESCENA 2: FOTOS Y TEXTOS --- */
#scene-middle {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2000;
    display: flex; justify-content: center; align-items: center;
    pointer-events: none; /* Permitir clicks pass-through si es necesario */
}
.hidden { opacity: 0; pointer-events: none; }

.middle-content {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 90%;
}

.title-script {
    font-family: 'Great Vibes', cursive; font-size: 5rem;
    color: #f1c40f; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin: 0 0 30px 0;
}

.names-text {
    font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 3rem;
    color: white; margin: 0 20px; letter-spacing: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.photos-row {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    margin-bottom: 20px;
}

/* Polaroids */
.photo-wrapper {
    opacity: 0; transform: translateY(100vh); /* Empiezan abajo */
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.polaroid-frame {
    background: #fff; padding: 10px 10px 35px 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    transform: rotate(var(--rotation));
}
.polaroid-frame img {
    display: block; width: 140px; height: auto;
    filter: sepia(0.2) contrast(1.1);
}

/* Rotaciones y Animaciones */
.p1 { --rotation: -8deg; }
.p2 { --rotation: 6deg; }
.p3 { --rotation: -3deg; }

.animate-up { opacity: 1 !important; transform: translateY(0) !important; }
.fade-in-text { opacity: 0; animation: fadeInSimple 2s forwards 0.5s; }
.delay-text { animation-delay: 1.5s; }

@keyframes fadeInSimple { to { opacity: 1; } }