:root {
    --bg-dark: #12030a;
    --bg-medium: #220613;
    --bg-glass: rgba(34, 6, 19, 0.6);
    --border-glass: rgba(255, 182, 193, 0.18);
    --primary: #ff4b72;
    --primary-glow: rgba(255, 75, 114, 0.45);
    --secondary: #ff8da1;
    --accent-purple: #f497b7;
    --accent-gold: #ffe4e1;
    --text-main: #fff0f3;
    --text-muted: #e2b4bd;
    --font-sans: 'Outfit', sans-serif;
    --font-serif: 'Great Vibes', cursive;
    --font-heading: 'Montserrat', sans-serif;
    --font-nepali: 'Noto Sans Devanagari', sans-serif;
    --transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1);
    --spring: all 0.5s cubic-bezier(0.68,-0.6,0.27,1.55);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }

body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-sans);
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.6;
}

#particleCanvas {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    z-index:0; pointer-events:none;
    background: radial-gradient(circle at 50% 50%, #3a0d20 0%, #12020a 100%);
}

/* ====== STAGES ====== */
.stage {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    display:flex;
    flex-direction: column;
    z-index:10; opacity:0; pointer-events:none;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: scale(0.95);
    overflow-y: auto;
}
.stage.active-stage {
    opacity:1; pointer-events:all; transform:scale(1);
}
.stage-content {
    text-align:center; padding:40px 24px; max-width:800px; width:100%;
    position:relative; z-index:5;
    margin: auto;
}
.stage-content .btn {
    position:relative; z-index:20;
}

/* ====== GLASS CARD ====== */
.glass-card {
    background: var(--bg-glass);
    border:1px solid var(--border-glass);
    border-radius:24px;
    backdrop-filter:blur(16px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    position:relative; overflow:hidden;
}
.card-glow {
    position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle, rgba(255,117,140,0.06) 0%, transparent 60%);
    pointer-events:none;
}

/* ====== BUTTONS ====== */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px; padding:16px 36px; border-radius:50px;
    font-family:var(--font-sans); font-weight:700; font-size:1.1rem;
    cursor:pointer; border:none; outline:none;
    transition: var(--spring); position:relative; z-index:1;
    text-transform:none; letter-spacing:0.02em;
}
.btn:hover { transform:translateY(-4px) scale(1.03); }
.btn:active { transform:translateY(-1px) scale(0.98); }

.btn-celebrate, .btn-decorate, .btn-wish, .btn-important, .btn-party {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color:#fff; box-shadow: 0 6px 25px var(--primary-glow);
    animation: pulse 2s infinite;
}
.btn-yes {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
    color:#fff; box-shadow: 0 6px 20px rgba(86,171,47,0.4);
    font-size:1.2rem; padding:18px 44px;
}
.btn-no {
    background: linear-gradient(135deg, #e44d26, #ff6b6b);
    color:#fff; box-shadow: 0 6px 20px rgba(228,77,38,0.4);
    font-size:1.2rem; padding:18px 44px;
    transition: none !important;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 var(--primary-glow); }
    70%  { box-shadow: 0 0 0 18px rgba(255,117,140,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,117,140,0); }
}

/* ====== STAGE 1 - HERO ====== */
.cake-icon { font-size:3.5rem; animation: bounce 2s infinite; margin-bottom:10px; }
@keyframes bounce {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-14px); }
}
.hero-title {
    font-family:var(--font-heading); font-size:3.4rem; font-weight:900;
    line-height:1.1; margin-bottom:14px;
    background: linear-gradient(135deg, #fff 10%, #ffd1df 40%, var(--primary) 80%, var(--secondary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    filter: drop-shadow(0 2px 20px rgba(255,117,140,0.2));
}
.name-highlight {
    font-family:var(--font-serif); font-size:4.5rem;
    background: linear-gradient(135deg, var(--accent-gold), var(--primary), var(--accent-purple));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.sweet-line {
    font-size:1.1rem; color:var(--text-muted); max-width:550px;
    margin:0 auto 28px; line-height:1.7;
}

/* ====== STAGE 2 - FUNNY TRANSITION ====== */
.funny-emojis { display:flex; justify-content:center; gap:16px; margin-bottom:20px; }
.spin-emoji {
    font-size:3.2rem; display:inline-block;
    animation: spinBounce 1.5s infinite;
}
.spin-emoji.delay1 { animation-delay:0.2s; }
.spin-emoji.delay2 { animation-delay:0.4s; }
.spin-emoji.delay3 { animation-delay:0.6s; }
@keyframes spinBounce {
    0%   { transform:rotate(0) scale(1); }
    25%  { transform:rotate(15deg) scale(1.2); }
    50%  { transform:rotate(-15deg) scale(1); }
    75%  { transform:rotate(10deg) scale(1.15); }
    100% { transform:rotate(0) scale(1); }
}
.stage-title {
    font-family:var(--font-heading); font-size:2.4rem; font-weight:800;
    margin-bottom:12px;
    background: linear-gradient(135deg, #fff 30%, var(--secondary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.stage-subtitle {
    font-size:1.05rem; color:var(--text-muted); margin-bottom:28px; line-height:1.7;
}

/* ====== STAGE 3 - DECORATED ROOM ====== */
.decorated-room {
    width:100vw; height:100vh; position:relative; overflow-y:auto;
    background: linear-gradient(180deg, #2c0a18 0%, #1d050f 40%, #300d1d 100%);
    display:flex; flex-direction:column; align-items:center;
    padding-bottom: 40px;
}

/* Banner Flags */
.banner-flags {
    display:flex; justify-content:center; gap:4px;
    padding-top:16px; flex-wrap:wrap;
}
.flag {
    width:38px; height:46px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading); font-weight:900; font-size:1.1rem; color:#fff;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    animation: flagDrop 0.6s ease forwards;
    opacity:0; transform:translateY(-60px);
}
.flag-spacer { width:14px; background:transparent !important; clip-path:none; }
.flag:nth-child(odd) { background: linear-gradient(135deg, #ff758c, #ff7eb3); }
.flag:nth-child(even) { background: linear-gradient(135deg, var(--accent-gold), var(--secondary)); }
.flag:nth-child(3n) { background: linear-gradient(135deg, var(--accent-purple), #fbc2eb); }

@keyframes flagDrop {
    to { opacity:1; transform:translateY(0) rotate(var(--rot, 0deg)); }
}
.flag-1  { animation-delay:0.1s; --rot:-3deg; }
.flag-2  { animation-delay:0.15s; --rot:2deg; }
.flag-3  { animation-delay:0.2s; --rot:-1deg; }
.flag-4  { animation-delay:0.25s; --rot:3deg; }
.flag-5  { animation-delay:0.3s; --rot:-2deg; }
.flag-6  { animation-delay:0.4s; --rot:2deg; }
.flag-7  { animation-delay:0.45s; --rot:-3deg; }
.flag-8  { animation-delay:0.5s; --rot:1deg; }
.flag-9  { animation-delay:0.55s; --rot:-2deg; }
.flag-10 { animation-delay:0.6s; --rot:3deg; }
.flag-11 { animation-delay:0.65s; --rot:-1deg; }
.flag-12 { animation-delay:0.7s; --rot:2deg; }
.flag-13 { animation-delay:0.75s; --rot:-3deg; }

/* String Lights */
.string-lights {
    display:flex; justify-content:center; gap:22px; margin-top:4px;
    padding:0 20px;
}
.light {
    width:14px; height:14px; border-radius:50%;
    animation: glow 1.5s infinite alternate;
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}
.light-red    { background:#ff4444; color:#ff4444; animation-delay:0s; }
.light-yellow { background:#ffdd44; color:#ffdd44; animation-delay:0.2s; }
.light-blue   { background:#44aaff; color:#44aaff; animation-delay:0.4s; }
.light-green  { background:#44ff88; color:#44ff88; animation-delay:0.6s; }
.light-pink   { background:#ff77aa; color:#ff77aa; animation-delay:0.8s; }
@keyframes glow {
    0%  { opacity:0.4; transform:scale(0.8); }
    100%{ opacity:1; transform:scale(1.2); }
}

/* Photo Wall */
.photo-wall {
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:12px; padding:14px 16px; max-width:950px; margin:0 auto;
}
.photo-frame {
    width:105px; background:#fff; padding:6px 6px 22px;
    border-radius:4px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    transition: var(--spring);
    animation: frameIn 0.8s ease forwards;
    opacity:0; transform:scale(0.5) rotate(0deg);
}
.photo-frame:hover {
    transform:scale(1.15) rotate(0deg) !important;
    box-shadow: 0 15px 45px rgba(255,117,140,0.3);
    z-index:10;
}
.tilt-left { --tilt:-5deg; }
.tilt-right { --tilt:5deg; }
.photo-frame img {
    width:100%; height:95px; object-fit:cover; border-radius:2px;
}
.frame-label {
    font-family:var(--font-serif); font-size:0.85rem; color:#382442;
    text-align:center; margin-top:4px;
}
@keyframes frameIn {
    to { opacity:1; transform:scale(1) rotate(var(--tilt, 0deg)); }
}
.frame-1 { animation-delay:0.2s; }
.frame-2 { animation-delay:0.35s; }
.frame-3 { animation-delay:0.5s; }
.frame-4 { animation-delay:0.65s; }
.frame-5 { animation-delay:0.8s; }
.frame-6 { animation-delay:0.95s; }
.frame-7 { animation-delay:1.1s; }
.frame-8 { animation-delay:1.25s; }
.frame-9 { animation-delay:1.4s; }
.frame-10 { animation-delay:1.55s; }

/* Balloons */
.balloons-container {
    position:absolute; bottom:0; left:0; width:100%; height:100%;
    pointer-events:none; overflow:hidden;
}
.balloon {
    position:absolute; bottom:-80px; font-size:3rem;
    animation: floatUp 6s infinite ease-in;
}
.balloon-red    { left:10%; animation-delay:0s; }
.balloon-pink   { left:30%; animation-delay:1.2s; }
.balloon-purple { left:50%; animation-delay:0.6s; }
.balloon-gold   { left:70%; animation-delay:1.8s; }
.balloon-blue   { left:85%; animation-delay:0.3s; }
@keyframes floatUp {
    0%   { transform:translateY(0) rotate(0); opacity:0.8; }
    50%  { opacity:1; }
    100% { transform:translateY(-110vh) rotate(20deg); opacity:0; }
}

.center-cake {
    font-size:2.8rem; text-align:center; margin:6px 0;
    animation: bounce 2s infinite;
}

.btn-wish {
    position:relative; z-index:20; margin:24px auto 12px;
}

/* ====== STAGE 4 - WISH ====== */
.wish-envelope {
    font-size:5rem; margin-bottom:16px;
    animation: envelopeOpen 1s ease forwards;
}
@keyframes envelopeOpen {
    0%   { transform:scale(0) rotateY(180deg); }
    60%  { transform:scale(1.2) rotateY(0); }
    100% { transform:scale(1) rotateY(0); }
}
.wish-card {
    padding:36px 32px; margin:24px auto; max-width:600px; text-align:left;
}
.wish-text {
    font-size:1.05rem; line-height:1.9; color:var(--text-main);
}
.wish-signature {
    font-family:'Dancing Script', cursive; font-size:1.8rem; font-weight:700;
    color:var(--primary); display:block; margin-top:8px;
}
.btn-important { margin-top:28px; }

/* ====== STAGE 5 - NEPALI ====== */
.laughing-emojis {
    display:flex; justify-content:center; gap:16px; margin-bottom:24px;
}
.bounce-emoji {
    font-size:3.5rem; display:inline-block;
    animation: laughBounce 0.8s infinite;
}
.bounce-emoji.delay1 { animation-delay:0.15s; }
.bounce-emoji.delay2 { animation-delay:0.3s; }
@keyframes laughBounce {
    0%,100% { transform:translateY(0) rotate(0); }
    25% { transform:translateY(-15px) rotate(-10deg); }
    75% { transform:translateY(-10px) rotate(10deg); }
}
.nepali-card {
    padding:40px 32px; margin:0 auto 20px; max-width:600px;
}
.nepali-text {
    font-family:var(--font-nepali); font-size:1.8rem; font-weight:700;
    color:var(--accent-gold); line-height:1.6; margin-bottom:12px;
}
.nepali-subtext {
    font-size:1rem; color:var(--text-muted); font-style:italic;
}
.old-lady-emoji {
    font-size:5rem; margin:16px 0;
    animation: wobble 2s infinite;
}
@keyframes wobble {
    0%,100% { transform:rotate(0); }
    25% { transform:rotate(-12deg); }
    75% { transform:rotate(12deg); }
}

/* ====== STAGE 6 - PARTY ====== */
.party-title {
    font-size:3rem !important;
}
.party-buttons {
    display:flex; justify-content:center; gap:30px;
    margin-top:36px; flex-wrap:wrap;
}
.yes-result {
    text-align:center;
    margin-top:30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 200px;
}
.clean-message {
    font-size: 2.2rem;
    font-family: var(--font-sans);
    font-weight: 800;
    background: linear-gradient(135deg, #fff 20%, var(--accent-gold) 60%, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    line-height: 1.5;
    margin: 10px auto;
    padding: 10px 20px;
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.1));
    animation: cleanPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.rose-bouquet-wrapper {
    margin: 15px auto;
    position: relative;
    display: inline-block;
    animation: floatBouquet 3s ease-in-out infinite alternate;
}
.rose-bouquet-img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 75, 114, 0.45);
    box-shadow: 0 0 35px rgba(255, 75, 114, 0.65);
    transition: var(--transition);
    cursor: pointer;
}
.rose-bouquet-img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 45px rgba(255, 75, 114, 0.85);
}
@keyframes floatBouquet {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-10px) rotate(2deg); }
}
.last-page-messages {
    text-align: center;
    margin: 15px auto;
    animation: cleanPop 0.8s ease forwards;
}
.nepali-msg {
    font-family: var(--font-nepali);
    font-size: 1.45rem;
    color: var(--accent-gold);
    margin: 8px 0;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.nepali-msg .eng-text {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--text-main);
}
.nepali-msg .funny-note {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 400;
    font-style: italic;
    color: var(--secondary);
    margin-top: 4px;
    opacity: 0.85;
}
.thanks-card {
    padding: 24px 30px;
    margin: 10px auto;
    max-width: 500px;
    border: 1px solid rgba(255, 182, 193, 0.22);
    background: rgba(34, 6, 19, 0.55);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: cleanPop 1s ease forwards;
}
.thanks-text {
    font-size: 1.25rem;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.6;
}
.thanks-subtext {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--primary);
    margin-top: 12px;
}

@keyframes cleanPop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.hidden { display:none !important; }

/* Emoji rain */
.emoji-rain { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:0; }
.emoji-drop {
    position:absolute; top:-50px; font-size:2rem;
    animation: emojifall linear forwards;
    pointer-events:none;
}
@keyframes emojifall {
    to { transform:translateY(110vh) rotate(360deg); opacity:0; }
}

/* ====== TRANSITIONS ====== */
.stage.slide-out-left {
    transform:translateX(-100vw) scale(0.8); opacity:0;
}
.stage.slide-in-right {
    transform:translateX(100vw); opacity:0;
}
.stage.zoom-out {
    transform:scale(1.5); opacity:0;
}
.stage.spin-out {
    transform:rotate(360deg) scale(0); opacity:0;
}

/* ====== RESPONSIVE ====== */
@media (max-width:768px) {
    .hero-title { font-size:2.6rem; }
    .name-highlight { font-size:3.5rem; }
    .stage-title { font-size:2rem; }
    .flag { width:32px; height:42px; font-size:1rem; }
    .photo-frame { width:100px; }
    .photo-frame img { height:90px; }
    .nepali-text { font-size:1.3rem; }
    .party-title { font-size:2.2rem !important; }
    .btn { padding:14px 28px; font-size:1rem; }
    .wish-card { padding:24px 20px; }
}
@media (max-width:480px) {
    .hero-title { font-size:2rem; }
    .name-highlight { font-size:2.8rem; }
    .photo-wall { gap:12px; }
    .photo-frame { width:80px; }
    .photo-frame img { height:70px; }
    .banner-flags { gap:3px; }
    .flag { width:24px; height:34px; font-size:0.8rem; }
}