/* ===== ROMANTIC LOVE LETTER STYLES ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Baloo 2', cursive;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
}

/* ===== SCENE MANAGEMENT ===== */
.scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1;
}

.scene.active {
    display: flex;
    opacity: 1;
    z-index: 10;
}

/* ===== COMMON ELEMENTS ===== */
.continue-btn {
    position: absolute;
    bottom: 40px;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8a80 50%, #ffab91 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 107, 157, 0.4);
    transition: all 0.3s ease;
    z-index: 100;
}

.continue-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 107, 157, 0.6);
}

.hidden {
    display: none !important;
}

/* Back Button */
.back-btn {
    position: absolute;
    bottom: 40px;
    left: 40px;
    padding: 12px 30px;
    font-size: 1rem;
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateX(-5px);
}

/* Music Control Button */
.music-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    font-size: 1rem;
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8a80 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(255, 107, 157, 0.5);
    transition: all 0.3s ease;
}

.music-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 107, 157, 0.7);
}

.music-btn.playing {
    animation: musicPulse 1s ease-in-out infinite;
}

@keyframes musicPulse {

    0%,
    100% {
        box-shadow: 0 5px 20px rgba(255, 107, 157, 0.5);
    }

    50% {
        box-shadow: 0 5px 30px rgba(255, 107, 157, 0.9), 0 0 50px rgba(255, 107, 157, 0.4);
    }
}

/* ===== STARS BACKGROUND ===== */
.stars-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1a1a2e 0%, #090a0f 100%);
    overflow: hidden;
}

.stars-bg::before,
.stars-bg::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow:
        100px 50px white, 200px 150px white, 300px 80px white,
        400px 200px white, 500px 120px white, 600px 180px white,
        700px 60px white, 800px 220px white, 150px 300px white,
        250px 350px white, 450px 280px white, 550px 320px white,
        650px 380px white, 750px 340px white, 50px 400px white,
        350px 450px white, 150px 500px white, 550px 520px white,
        100px 600px white, 300px 650px white, 500px 580px white,
        700px 620px white, 200px 700px white, 400px 750px white;
    animation: twinkle 3s infinite;
}

.stars-bg::after {
    animation-delay: 1.5s;
    box-shadow:
        80px 100px white, 180px 200px white, 280px 130px white,
        380px 250px white, 480px 170px white, 580px 230px white,
        680px 110px white, 780px 270px white, 130px 350px white,
        230px 400px white, 430px 330px white, 530px 370px white;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ===== SCENE 1: NAME UNLOCK ===== */
.unlock-container {
    text-align: center;
    z-index: 10;
    padding: 40px;
}

.unlock-title {
    font-family: 'Dancing Script', cursive;
    font-size: 3.5rem;
    color: #ff6b9d;
    text-shadow: 0 0 30px rgba(255, 107, 157, 0.5);
    margin-bottom: 20px;
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {

    0%,
    100% {
        text-shadow: 0 0 30px rgba(255, 107, 157, 0.5);
    }

    50% {
        text-shadow: 0 0 60px rgba(255, 107, 157, 0.8), 0 0 80px rgba(255, 138, 128, 0.6);
    }
}

.unlock-subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.name-input {
    padding: 18px 40px;
    font-size: 1.4rem;
    font-family: 'Dancing Script', cursive;
    border: 3px solid rgba(255, 107, 157, 0.5);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #ff6b9d;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
    width: 350px;
}

.name-input::placeholder {
    color: rgba(255, 107, 157, 0.5);
}

.name-input:focus {
    border-color: #ff6b9d;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 30px rgba(255, 107, 157, 0.4);
}

.hint-text {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.unlock-btn {
    margin-top: 25px;
    padding: 18px 40px;
    font-size: 1.3rem;
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8a80 50%, #ffab91 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(255, 107, 157, 0.5);
    transition: all 0.3s ease;
    animation: pulse 2s ease-in-out infinite;
}

.unlock-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(255, 107, 157, 0.7);
}

.unlock-btn:active {
    transform: scale(0.98);
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-10px);
    }

    40% {
        transform: translateX(10px);
    }

    60% {
        transform: translateX(-10px);
    }

    80% {
        transform: translateX(10px);
    }
}

.name-hearts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.name-hearts .heart {
    position: absolute;
    font-size: 2rem;
    animation: floatUp 3s ease-out forwards;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-300px) scale(0.5);
    }
}

/* ===== SCENE 2: ENVELOPE ===== */
.envelope-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 30%, #f48fb1 60%, #ec407a 100%);
    position: relative;
    overflow: hidden;
}

/* Floating flowers background */
.envelope-container::before {
    content: '🌸 🌷 🌺 💐 🌹 🌸 🌷 🌺 💐 🌹 🌸 🌷';
    position: absolute;
    top: 5%;
    left: 0;
    width: 200%;
    font-size: 2rem;
    letter-spacing: 30px;
    opacity: 0.3;
    animation: floatFlowers 20s linear infinite;
}

.envelope-container::after {
    content: '🌷 🌹 🌸 💐 🌺 🌷 🌹 🌸 💐 🌺 🌷 🌹';
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 200%;
    font-size: 2rem;
    letter-spacing: 30px;
    opacity: 0.3;
    animation: floatFlowers 25s linear infinite reverse;
}

@keyframes floatFlowers {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Falling rose petals */
.envelope-flowers {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.rose-petal {
    position: absolute;
    font-size: 1.5rem;
    animation: fallPetal linear infinite;
    opacity: 0.7;
}

@keyframes fallPetal {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.3;
    }
}

/* Envelope title */
.envelope-title {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 5px 30px rgba(0, 0, 0, 0.3), 0 0 60px rgba(255, 107, 157, 0.5);
    margin-bottom: 30px;
    z-index: 10;
    animation: floatTitle 3s ease-in-out infinite;
}

@keyframes floatTitle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.envelope {
    width: 500px;
    height: 350px;
    position: relative;
    perspective: 1000px;
    z-index: 10;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(135deg, #ff6b9d 0%, #ec407a 50%, #d81b60 100%);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    transform-origin: top;
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 3;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.envelope-flap::before {
    content: '💌';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
}

.envelope.open .envelope-flap {
    transform: rotateX(-180deg);
}

.envelope-body {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 75%;
    background: linear-gradient(180deg, #ffab91 0%, #ff8a80 50%, #ff6b9d 100%);
    border-radius: 0 0 15px 15px;
    overflow: visible;
    box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.1);
}

.envelope-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.letter {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    height: auto;
    min-height: 200px;
    max-height: 280px;
    background: linear-gradient(180deg, #fffef9 0%, #fff8e7 100%);
    border-radius: 8px;
    padding: 25px 30px;
    transform: translateY(120%);
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(255, 182, 193, 0.1);
    overflow-y: auto;
    border: 2px solid rgba(255, 107, 157, 0.2);
}

.letter::before {
    content: '🌹';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    opacity: 0.5;
}

.letter::after {
    content: '🌹';
    position: absolute;
    bottom: 10px;
    left: 15px;
    font-size: 1.5rem;
    opacity: 0.5;
}

.envelope.open .letter {
    transform: translateY(-30px);
}

.letter-greeting {
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
    color: #d81b60;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    border-bottom: 2px dotted rgba(216, 27, 96, 0.3);
    padding-bottom: 15px;
}

.letter-content {
    font-family: 'Dancing Script', cursive;
    font-size: 1.3rem;
    color: #5d4037;
    line-height: 1.8;
    text-align: left;
}

.letter-signature {
    font-family: 'Pacifico', cursive;
    font-size: 1.5rem;
    color: #d81b60;
    margin-top: 20px;
    text-align: right;
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid #ff6b9d;
    animation: blink 0.7s infinite;
}

@keyframes blink {

    0%,
    100% {
        border-color: #ff6b9d;
    }

    50% {
        border-color: transparent;
    }
}

/* ===== SCENE 3: BUTTERFLIES ===== */
.butterfly-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a1a2e 0%, #2d1b4e 50%, #4a2c6a 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.butterfly {
    position: absolute;
    font-size: 2rem;
    transition: all 0.3s ease;
    cursor: pointer;
    animation: flutter 0.5s ease-in-out infinite;
}

@keyframes flutter {

    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(0.7);
    }
}

.butterfly-message {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: #e0b0ff;
    text-shadow: 0 0 20px rgba(224, 176, 255, 0.5);
    z-index: 10;
}

.butterfly-hint {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    z-index: 10;
}

.heart-pop {
    position: absolute;
    font-size: 2rem;
    animation: popHeart 1s ease-out forwards;
    pointer-events: none;
}

@keyframes popHeart {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(2) translateY(-50px);
        opacity: 0;
    }
}

/* ===== SCENE 4: FALLING PETALS ===== */
.petal-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fce4ec 0%, #f8bbd9 50%, #f48fb1 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.petal {
    position: absolute;
    font-size: 1.5rem;
    animation: fall linear forwards;
    opacity: 0.8;
}

@keyframes fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0.2;
    }
}

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: gold;
    border-radius: 50%;
    animation: sparkle 2s ease-in-out infinite;
    box-shadow: 0 0 10px gold, 0 0 20px gold;
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.petal-message {
    text-align: center;
    z-index: 10;
}

.petal-text {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: #880e4f;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

.petal-text.delay-1 {
    animation-delay: 1s;
}

.petal-text.delay-2 {
    animation-delay: 2s;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SCENE 5: HEARTBEAT ===== */
.heartbeat-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.big-heart {
    font-size: 8rem;
    animation: heartbeat 1s ease-in-out infinite;
    text-shadow: 0 0 50px rgba(255, 107, 157, 0.8);
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.15);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.1);
    }
}

.heartbeat-message {
    margin-top: 30px;
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
    color: #ff6b9d;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 107, 157, 0.5);
}

.pulse-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 3px solid rgba(255, 107, 157, 0.5);
    border-radius: 50%;
    animation: pulse 2s ease-out infinite;
}

.pulse-ring.delay {
    animation-delay: 1s;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ===== SCENE 6: SLIDESHOW ===== */
.slideshow-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.slideshow-title {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: #ff6b9d;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 107, 157, 0.5);
}

.slideshow {
    position: relative;
    width: 95%;
    max-width: 1200px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    overflow: hidden;
}

.slide {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    height: 280px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: none;
}

.slide.visible {
    display: block;
    opacity: 0.6;
    transform: scale(0.85);
}

.slide.active {
    display: block;
    opacity: 1;
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 20px 50px rgba(255, 107, 157, 0.4);
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    text-align: center;
}

.slideshow-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.nav-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255, 107, 157, 0.8);
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8a80 100%);
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(255, 107, 157, 0.5);
}

.nav-btn:hover {
    background: linear-gradient(135deg, #ff8a80 0%, #ff6b9d 100%);
    transform: scale(1.15);
    box-shadow: 0 8px 30px rgba(255, 107, 157, 0.7);
}

#slideCounter {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    background: rgba(255, 107, 157, 0.3);
    padding: 10px 20px;
    border-radius: 25px;
}

/* ===== SCENE 7: SHOOTING STAR ===== */
.star-container {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1a1a2e 0%, #090a0f 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#starCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.star-message {
    text-align: center;
    z-index: 10;
}

.star-text {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

.star-text.delay-2 {
    animation-delay: 2s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.heart-constellation {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 0;
    animation: showConstellation 3s ease forwards 4s;
}

@keyframes showConstellation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ===== SCENE 8: GIFT BOX ===== */
.gift-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gift-intro {
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
    color: #ff6b9d;
    margin-bottom: 30px;
}

.gift-box {
    width: 200px;
    height: 200px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gift-box:hover {
    transform: scale(1.05);
}

.gift-lid {
    position: absolute;
    top: -30px;
    left: -10px;
    width: 220px;
    height: 60px;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8a80 100%);
    border-radius: 10px;
    transition: all 0.8s ease;
    z-index: 2;
}

.gift-bow {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 50px;
    background: #ffab91;
    border-radius: 50%;
}

.gift-bow::before,
.gift-bow::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 40px;
    background: #ffab91;
    border-radius: 50%;
    top: 10px;
}

.gift-bow::before {
    left: -15px;
    transform: rotate(-30deg);
}

.gift-bow::after {
    right: -15px;
    transform: rotate(30deg);
}

.gift-base {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(135deg, #ff8a80 0%, #ff6b9d 100%);
    border-radius: 10px;
}

.gift-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 100%;
    background: #ffab91;
}

.gift-box.opened .gift-lid {
    transform: translateY(-100px) rotateX(-45deg);
    opacity: 0;
}

.gift-content {
    text-align: center;
    margin-top: 30px;
}

.gift-message {
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
    color: #ff6b9d;
    animation: fadeInUp 1s ease;
}

.gift-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin-top: 20px;
}

/* ===== SCENE 9: BUNNY ===== */
.bunny-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bunny {
    position: relative;
    width: 150px;
    height: 180px;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.bunny-ear {
    position: absolute;
    top: -60px;
    width: 30px;
    height: 80px;
    background: #ffb6c1;
    border-radius: 50px;
}

.bunny-ear.left {
    left: 30px;
    transform: rotate(-10deg);
}

.bunny-ear.right {
    right: 30px;
    transform: rotate(10deg);
}

.bunny-ear::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 50px;
    background: #ffc0cb;
    border-radius: 50px;
}

.bunny-face {
    position: absolute;
    bottom: 0;
    width: 150px;
    height: 140px;
    background: #ffb6c1;
    border-radius: 50%;
}

.bunny-eye {
    position: absolute;
    top: 40px;
    width: 15px;
    height: 20px;
    background: #333;
    border-radius: 50%;
}

.bunny-eye.left {
    left: 35px;
}

.bunny-eye.right {
    right: 35px;
}

.bunny-eye::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
}

.bunny-nose {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 12px;
    background: #ff69b4;
    border-radius: 50%;
}

.bunny-mouth {
    position: absolute;
    top: 82px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 15px;
    border: 3px solid #333;
    border-top: none;
    border-radius: 0 0 50% 50%;
}

.bunny-speech {
    margin-top: 30px;
    padding: 20px 40px;
    background: white;
    border-radius: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.bunny-speech::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: 15px solid transparent;
    border-bottom-color: white;
}

.bunny-speech p {
    font-family: 'Baloo 2', cursive;
    font-size: 1.3rem;
    color: #ff6b9d;
    font-weight: 600;
}

/* ===== SCENE 10: RING ===== */
.ring-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ring-title {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: #ff6b9d;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(255, 107, 157, 0.5);
}

.ring-box {
    width: 200px;
    height: 180px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

.ring-box-lid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
    border-radius: 10px 10px 0 0;
    transform-origin: bottom;
    transition: transform 1s ease;
    z-index: 2;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

.ring-box.opened .ring-box-lid {
    transform: rotateX(-120deg);
}

.ring-box-base {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ring-box-base::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background: #4a0000;
    border-radius: 50%;
}

.ring {
    position: relative;
    width: 80px;
    height: 80px;
    margin-top: 20px;
    z-index: 10;
    animation: ringFloat 2s ease-in-out infinite;
}

@keyframes ringFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.ring-box.opened .ring {
    animation: ringReveal 1s ease forwards, ringFloat 2s ease-in-out infinite 1s;
}

@keyframes ringReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ring-band {
    width: 80px;
    height: 80px;
    border: 10px solid gold;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, transparent 100%);
}

.ring-diamond {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    animation: sparkleRing 1s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}

@keyframes sparkleRing {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.2);
    }
}

.ring-message {
    margin-top: 30px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    max-width: 400px;
}

/* ===== SCENE 11: QUESTION ===== */
.question-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8a80 50%, #ffab91 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.floating-hearts {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-heart {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: floatHeart 10s linear infinite;
}

@keyframes floatHeart {
    0% {
        transform: translateY(100vh) rotate(0deg);
    }

    100% {
        transform: translateY(-100px) rotate(360deg);
    }
}

.question-title {
    font-family: 'Dancing Script', cursive;
    font-size: 3.5rem;
    color: white;
    text-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    z-index: 10;
}

.question-text {
    font-family: 'Pacifico', cursive;
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    z-index: 10;
}

.question-subtext {
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    z-index: 10;
}

.answer-buttons {
    display: flex;
    gap: 30px;
    z-index: 10;
}

.answer-btn {
    padding: 20px 60px;
    font-size: 1.5rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.answer-btn.yes {
    background: white;
    color: #ff6b9d;
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.4);
}

.answer-btn.yes:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 50px rgba(255, 255, 255, 0.6);
}

.answer-btn.no {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
    transition: all 0.1s ease;
    z-index: 100;
}

.answer-btn.no:hover {
    transform: scale(0.9);
    cursor: not-allowed;
}

/* ===== SCENE 12: CELEBRATION ===== */
.celebration-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8a80 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#confettiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.celebration-content {
    text-align: center;
    z-index: 10;
}

.celebration-title {
    font-family: 'Pacifico', cursive;
    font-size: 5rem;
    color: white;
    text-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    animation: celebrateBounce 0.5s ease infinite;
}

@keyframes celebrateBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.celebration-message {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 15px;
}

.celebration-promise {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ===== SCENE 13: FOREVER ===== */
.forever-container {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1a1a2e 0%, #090a0f 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stars-falling {
    position: absolute;
    width: 100%;
    height: 100%;
}

.falling-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: fallingStar 3s linear infinite;
    box-shadow: 0 0 10px white, 0 0 20px white;
}

@keyframes fallingStar {
    0% {
        transform: translateY(-100px) translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) translateX(100px);
        opacity: 0;
    }
}

.forever-content {
    text-align: center;
    z-index: 10;
}

.forever-text {
    font-family: 'Dancing Script', cursive;
    font-size: 3rem;
    color: white;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    opacity: 0;
    margin-bottom: 15px;
}

.forever-text.line1 {
    animation: fadeInUp 1s ease forwards 0.5s;
}

.forever-text.line2 {
    animation: fadeInUp 1s ease forwards 1.5s;
}

.forever-text.line3 {
    animation: fadeInUp 1s ease forwards 2.5s;
}

.couple-names {
    margin-top: 40px;
    opacity: 0;
    animation: fadeIn 1s ease forwards 3.5s;
}

.couple-names .name {
    font-family: 'Pacifico', cursive;
    font-size: 2.5rem;
}

.couple-names .name.his {
    color: #64b5f6;
}

.couple-names .name.hers {
    color: #ff6b9d;
}

.couple-names .heart {
    font-size: 2rem;
    margin: 0 20px;
    animation: heartbeat 1s ease-in-out infinite;
}

.forever-date {
    margin-top: 30px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    animation: fadeIn 1s ease forwards 4.5s;
}

.floating-hearts-forever {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ===== LOVE JAR ===== */
.love-jar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.love-jar .jar {
    font-size: 3rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.love-jar .jar:hover {
    transform: scale(1.1) rotate(10deg);
}

.jar-message {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 250px;
    padding: 15px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    font-family: 'Dancing Script', cursive;
    font-size: 1.2rem;
    color: #ff6b9d;
    display: none;
}

.jar-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: #999;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .unlock-title {
        font-size: 2.2rem;
    }

    .name-input {
        width: 280px;
        font-size: 1.2rem;
        padding: 15px 25px;
    }

    .envelope {
        width: 320px;
        height: 230px;
    }

    .envelope-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }

    .letter {
        padding: 15px 20px;
        min-height: 150px;
        max-height: 200px;
    }

    .letter-greeting {
        font-size: 1.4rem;
    }

    .letter-content {
        font-size: 1rem;
    }

    .letter-signature {
        font-size: 1.1rem;
    }

    .butterfly-message {
        font-size: 1.8rem;
        text-align: center;
        padding: 0 20px;
    }

    .slideshow {
        height: 280px;
        gap: 8px;
    }

    .slide {
        width: 120px;
        height: 170px;
    }

    .slide.active {
        transform: scale(1.05);
    }

    .slideshow-title {
        font-size: 1.8rem;
    }

    .nav-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .question-title {
        font-size: 1.8rem;
        padding: 0 20px;
        text-align: center;
    }

    .question-text {
        font-size: 1.6rem;
    }

    .answer-buttons {
        flex-direction: column;
        gap: 20px;
    }

    .answer-btn {
        padding: 18px 50px;
        font-size: 1.3rem;
        min-width: 180px;
    }

    .celebration-title {
        font-size: 2.5rem;
    }

    .forever-text {
        font-size: 1.6rem;
        padding: 0 20px;
    }

    .couple-names .name {
        font-size: 1.5rem;
    }

    .continue-btn {
        padding: 12px 30px;
        font-size: 1rem;
        bottom: 25px;
    }

    .back-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        bottom: 25px;
        left: 20px;
    }

    .ring-box {
        width: 160px;
        height: 150px;
    }

    .ring {
        width: 60px;
        height: 60px;
    }

    .ring-band {
        width: 60px;
        height: 60px;
        border-width: 8px;
    }

    .ring-diamond {
        font-size: 2rem;
        top: -15px;
    }

    .star-text {
        font-size: 1.6rem;
        padding: 0 20px;
        text-align: center;
    }

    .gift-box {
        width: 150px;
        height: 180px;
    }

    .bunny {
        transform: scale(0.7);
    }

    .bunny-speech {
        padding: 15px 25px;
    }

    .bunny-speech p {
        font-size: 1.1rem;
    }
}

/* Extra small phones */
@media (max-width: 400px) {
    .unlock-title {
        font-size: 1.8rem;
    }

    .name-input {
        width: 240px;
    }

    .envelope {
        width: 280px;
        height: 200px;
    }

    .slide {
        width: 90px;
        height: 130px;
    }

    .question-title {
        font-size: 1.5rem;
    }

    .answer-btn {
        padding: 15px 40px;
        font-size: 1.1rem;
    }
}

/* fadeOut animation for mobile messages */
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* ===== FIREWORK EFFECT ===== */
.firework {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: explode 1s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes explode {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(30);
        opacity: 0;
    }
}