@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');
:root{--ink:#24152d;--purple:#382056;--gold:#ffc85b;--orange:#ff8b4a;--pink:#ff6f91;--cream:#fff8ec;--white:#fffdf8}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;font-family:"DM Sans",sans-serif;color:var(--ink);overflow:hidden}
.scene{display:none;min-height:100vh;width:100%;position:absolute;inset:0;overflow:auto;padding:70px 20px 90px;opacity:0;transform:scale(1.03);transition:.7s ease}
.scene.active{display:flex;align-items:center;justify-content:center;opacity:1;transform:scale(1);z-index:2}
h1,h2,h3,p{margin-top:0} h1,h2{font-family:"Playfair Display",serif} h1{font-size:clamp(3.2rem,8vw,6.5rem);line-height:.95;margin:.25em 0}h2{font-size:clamp(2.8rem,6vw,5.5rem);line-height:1.02;margin:.2em 0 .25em}h1 span,h2 span{color:var(--orange)}.eyebrow{letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--orange);margin-bottom:1.2rem}.lead,.subtext{font-size:1.05rem;line-height:1.7;max-width:600px}
.primary{border:0;border-radius:999px;background:linear-gradient(135deg,var(--orange),#f65d77);color:white;padding:16px 25px;font:600 1rem "DM Sans";cursor:pointer;box-shadow:0 14px 35px #f66b7840;transition:.25s;margin-top:1.5rem}.primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px #f66b7860}.primary span{margin-left:7px}.music-btn{position:fixed;right:20px;top:20px;z-index:20;border:1px solid #ffffff55;background:#ffffff18;backdrop-filter:blur(10px);color:white;border-radius:999px;padding:10px 14px;cursor:pointer}.music-btn span{font-size:.8rem;margin-left:4px}#progress{position:fixed;z-index:20;bottom:0;left:0;width:100%;height:4px;background:#00000012}#progress span{display:block;height:100%;width:16.66%;background:linear-gradient(90deg,var(--gold),var(--orange));transition:.6s}

.intro{background:radial-gradient(circle at 50% 45%,#3c235a 0,#20132e 42%,#100b1a 100%);color:white;text-align:center}.intro-content{position:relative;z-index:2}.stars,.final-stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 1px,transparent 1.5px),radial-gradient(circle,#ffc85b 1px,transparent 1.5px);background-size:70px 70px,110px 110px;background-position:10px 20px,40px 50px;opacity:.35;animation:drift 12s linear infinite}.diya-wrap{height:150px;position:relative;display:flex;align-items:flex-end;justify-content:center}.diya{font-size:5rem;filter:drop-shadow(0 0 25px #ffb347);animation:float 3s ease-in-out infinite}.flame{position:absolute;bottom:62px;width:16px;height:36px;background:#ffd66b;border-radius:100% 0 100% 100%;transform:rotate(45deg);box-shadow:0 0 30px #ffb347;animation:flicker 1.4s infinite}.tiny-sparkle{color:var(--gold);font-size:2rem;animation:twinkle 2s infinite}.lamp-btn{font-size:1.05rem}

.celebration{background:linear-gradient(135deg,#fff1dc,#ffe0d8 45%,#f7d9ff);text-align:center}.celebration-content{position:relative;z-index:3}.celebrate-text{font-size:1.15rem}.photo-frame{width:min(240px,60vw);aspect-ratio:1;margin:25px auto;border-radius:50%;padding:10px;background:linear-gradient(135deg,var(--gold),var(--pink),#9b6cff);box-shadow:0 0 0 8px #fff8,0 20px 45px #54235a33;animation:pop .8s .2s both}.photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:white}.burst{position:absolute;width:35vmax;height:35vmax;border-radius:50%;background:radial-gradient(circle,#fff 0 2%,#ffc85b44 3% 8%,transparent 9%);animation:burst 1.4s ease-out infinite}.fireworks i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #fff8,35px 15px 0 var(--gold),-28px 35px 0 var(--pink),15px -40px 0 #9b6cff,-42px -20px 0 #ff9e6d}.fireworks i:nth-child(1){left:15%;top:20%}.fireworks i:nth-child(2){right:17%;top:18%;transform:scale(.7)}.fireworks i:nth-child(3){left:12%;bottom:18%;transform:scale(.6)}.fireworks i:nth-child(4){right:12%;bottom:20%;transform:scale(.8)}.notes b{position:absolute;font-size:2rem;color:#9b6cff;animation:rise 5s infinite}.notes b:nth-child(1){left:10%;bottom:15%}.notes b:nth-child(2){right:13%;bottom:12%;animation-delay:1s}.notes b:nth-child(3){left:25%;top:15%;animation-delay:2s}.notes b:nth-child(4){right:27%;top:20%;animation-delay:3s}

.qualities{background:linear-gradient(145deg,#fffaf0,#f8eaff)}.content-card{width:min(900px,100%);text-align:center}.quality-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}.quality-grid article{background:#ffffffc9;border:1px solid #fff;padding:20px;border-radius:22px;box-shadow:0 10px 30px #4b286310;text-align:left;transition:.3s}.quality-grid article:hover{transform:translateY(-4px)}.quality-grid article>div{font-size:2rem}.quality-grid h3{margin:7px 0;font-size:1.1rem}.quality-grid p{font-size:.88rem;line-height:1.5;margin:0;color:#654d68}.quality-grid .wide{grid-column:span 2;background:linear-gradient(120deg,#fff4d7,#ffe8f0)}

.journey{background:radial-gradient(circle at 15% 20%,#59417d,#2b1a42 48%,#171021);color:white}.journey-content{width:min(760px,100%);text-align:center;position:relative;z-index:2}.journey .subtext{margin:0 auto 25px;color:#f2eafa}.video-card{width:min(620px,100%);margin:auto;border-radius:28px;overflow:hidden;position:relative;box-shadow:0 25px 60px #0006;cursor:pointer;border:1px solid #ffffff25}.video-card img{width:100%;display:block}.play{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#ffffffdd;color:#3b2457;font-size:1.4rem;padding-left:4px}.video-caption{position:absolute;bottom:0;left:0;right:0;padding:25px;background:linear-gradient(transparent,#10091f);display:flex;flex-direction:column;align-items:flex-start;text-align:left}.video-caption small{opacity:.75;margin-top:4px}.journey-message{line-height:1.7;max-width:600px;margin:25px auto 0}

.message-scene{background:linear-gradient(135deg,#fff6e6,#fce5ed,#eee0ff)}.message-content{text-align:center;width:min(700px,100%)}.envelope{position:relative;width:270px;height:185px;border:0;background:transparent;margin:25px auto 5px;cursor:pointer;display:block}.envelope-back{position:absolute;inset:0;background:#e98188;border-radius:8px}.envelope-front{position:absolute;inset:0;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);background:#f19aa0;border-radius:8px}.flap{position:absolute;left:0;right:0;top:0;height:110px;background:#ffb2b7;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:.7s}.seal{position:absolute;z-index:3;top:82px;left:calc(50% - 20px);width:40px;height:40px;background:var(--gold);border-radius:50%;display:grid;place-items:center;color:#7b4b16;transition:.5s}.letter{position:absolute;left:20px;right:20px;bottom:10px;height:145px;background:#fffdf7;border-radius:6px;padding:25px;font-size:1.6rem;transition:.7s;z-index:1}.letter small{font:600 .8rem "DM Sans";color:#7a6375}.envelope.open .flap{transform:rotateX(180deg);z-index:0}.envelope.open .letter{transform:translateY(-75px);z-index:2}.envelope.open .seal{opacity:0;transform:scale(.5)}.tap-text{font-size:.88rem;color:#806879}.letter-message{display:none;text-align:left;background:#fffdf9;padding:28px;border-radius:20px;box-shadow:0 15px 40px #6b3d591c;line-height:1.7;margin:25px 0;animation:reveal .7s ease}.letter-message.show{display:block}.signature{font-family:"Playfair Display",serif;color:var(--orange);font-size:1.05rem}.hidden{display:none}

.finale{background:radial-gradient(circle at 50% 40%,#56336f,#2b183e 55%,#160d20);color:white;text-align:center}.final-content{position:relative;z-index:2;width:min(780px,100%)}.big-diya{font-size:5rem;filter:drop-shadow(0 0 30px #ffb347);animation:float 3s ease-in-out infinite}.final-text{font-size:1.08rem;line-height:1.8;max-width:620px;margin:20px auto}.quote{display:inline-block;margin:15px auto;padding:15px 20px;border:1px solid #ffffff30;background:#ffffff10;border-radius:16px;font-family:"Playfair Display",serif;color:#ffe4a1}.diwali-wish{color:#eadcf3;line-height:1.7}

#toast{position:fixed;z-index:30;left:50%;bottom:30px;transform:translate(-50%,120px);background:#2d1a40;color:white;padding:13px 20px;border-radius:999px;font-size:.85rem;box-shadow:0 10px 30px #0003;transition:.4s}#toast.show{transform:translate(-50%,0)}
@keyframes float{50%{transform:translateY(-10px)}}@keyframes flicker{50%{transform:rotate(45deg) scale(.8,1.15)}}@keyframes twinkle{50%{opacity:.35;transform:scale(.6)}}@keyframes drift{to{background-position:80px 90px,120px 160px}}@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes burst{from{transform:scale(.2);opacity:.8}to{transform:scale(2);opacity:0}}@keyframes rise{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-70px);opacity:1}}@keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:600px){.scene{padding:55px 16px 75px}.quality-grid{grid-template-columns:1fr}.quality-grid .wide{grid-column:auto}.music-btn span{display:none}h1{font-size:3.5rem}.envelope{transform:scale(.9);margin-top:5px}}

.video-card video {
    width: 100%;
    display: block;
    border-radius: 28px;
    max-height: 500px;
    object-fit: contain;
}

/* Improved real video */
.video-card video {
    width: 100%;
    display: block;
    border-radius: 28px;
    max-height: 500px;
    object-fit: contain;
    background: #000;
    position: relative;
    z-index: 2;
}

.video-card .play {
    display: none;
}

.video-card .video-caption {
    position: relative;
    background: rgba(20, 10, 35, 0.9);
    padding: 16px 20px;
    pointer-events: none;
}


/* Continuous colorful Diwali celebration */
.celebration {
    background: linear-gradient(
        120deg,
        #fff1a8,
        #ffb3c7,
        #d9b3ff,
        #9ee8ff,
        #bff7d0,
        #ffd1a1
    );
    background-size: 400% 400%;
    animation: celebrationColors 12s ease infinite;
}

.celebration::before,
.celebration::after {
    content: "✦ ✨ ✦ ✨ ✦ ✨";
    position: absolute;
    font-size: 2rem;
    letter-spacing: 1.5rem;
    white-space: nowrap;
    animation: colorfulBurst 4s linear infinite;
    z-index: 1;
}

.celebration::before {
    top: 15%;
    left: -20%;
}

.celebration::after {
    bottom: 12%;
    right: -20%;
    animation-delay: 2s;
}

.fireworks i {
    animation: fireworkPop 2.5s ease-in-out infinite;
}

.fireworks i:nth-child(2) {
    animation-delay: .6s;
}

.fireworks i:nth-child(3) {
    animation-delay: 1.2s;
}

.fireworks i:nth-child(4) {
    animation-delay: 1.8s;
}

@keyframes celebrationColors {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes colorfulBurst {
    0% {
        transform: scale(.3) rotate(0deg);
        opacity: 0;
        color: #ff4f81;
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        color: #ffc400;
    }
    80% {
        opacity: 1;
        color: #9b6cff;
    }
    100% {
        transform: scale(2) rotate(360deg);
        opacity: 0;
        color: #20c997;
    }
}

@keyframes fireworkPop {
    0%, 100% {
        transform: scale(.5);
        opacity: .3;
    }
    50% {
        transform: scale(1.8);
        opacity: 1;
    }
}


/* ✨ Gentle celebration bursts throughout the entire surprise */
.scene::after {
    content: "✦  ✨  •  ✦  ✨  •  ✦";
    position: absolute;
    left: -10%;
    bottom: 8%;
    width: 120%;
    font-size: 1.4rem;
    letter-spacing: 2rem;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: gentleCelebration 7s linear infinite;
}

/* Keep the actual content above the background celebration */
.scene > * {
    position: relative;
    z-index: 2;
}

@keyframes gentleCelebration {
    0% {
        transform: translateY(40px) scale(.5);
        opacity: 0;
        color: #ff5c8a;
    }

    20% {
        opacity: .8;
    }

    40% {
        color: #ffc107;
    }

    60% {
        color: #9b6cff;
    }

    80% {
        opacity: .7;
        color: #27c5d9;
    }

    100% {
        transform: translateY(-80vh) scale(1.4);
        opacity: 0;
        color: #ff8b4a;
    }
}

.scene:nth-child(even)::after {
    animation-delay: 2s;
    animation-duration: 9s;
}

/* 🎵 Music is now ready */
.music-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Gentle reminder for the full experience */
.music-reminder {
    position: fixed;
    top: 85px;
    right: 24px;
    max-width: 230px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: #5b2c6f;
    font-size: 0.85rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    animation: reminderGlow 2s ease-in-out infinite;
}

.music-reminder.hide {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: 0.6s ease;
}

@keyframes reminderGlow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}


/* 🎉 Birthday and celebration-style falling confetti */
.confetti-piece {
    position: fixed;
    top: -30px;
    z-index: 50;
    pointer-events: none;
    border-radius: 2px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-30px) rotate(0deg);
        opacity: 1;
    }

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


/* 🪔 Keep the Diwali celebration beautifully centered */
.celebration-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.celebration-content {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.celebration-content h2,
.celebration-content p {
    text-align: center;
}

.celebration-content .photo-frame {
    margin-left: auto;
    margin-right: auto;
}


/* 🎵 First-page music invitation */
.first-page-music-hint {
    position: fixed;
    top: 75px;
    right: 24px;
    z-index: 1001;
    max-width: 250px;
    padding: 13px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    color: #5b2c6f;
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    animation: musicHintGlow 2s ease-in-out infinite;
}

@keyframes musicHintGlow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.first-page-music-hint.hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}