/* ══════════ VARIABLES & RESET ══════════ */
:root{--rose:#b76e79;--pink:#ff6b9d;--gold:#ffd700;--deep-rose:#e91e63;--bg:#0a0a0a;--glass:rgba(255,255,255,.05);--glass-b:rgba(255,255,255,.1);--glow-p:0 0 30px rgba(255,107,157,.4);--glow-g:0 0 30px rgba(255,215,0,.3)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Cormorant Garamond',serif;background:var(--bg);color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.section{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;overflow:hidden}

/* ══════════ PARTICLES CANVAS ══════════ */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ══════════ MUSIC TOGGLE ══════════ */
#music-toggle{position:fixed;top:20px;right:20px;z-index:9999;width:48px;height:48px;border-radius:50%;border:1px solid var(--glass-b);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:18px;cursor:pointer;transition:.3s;box-shadow:var(--glow-p);display:flex;align-items:center;justify-content:center}
#music-toggle:hover{transform:scale(1.1);box-shadow:0 0 40px rgba(255,107,157,.6)}
.music-waves{display:flex;gap:2px;align-items:flex-end;height:16px}
.music-waves span{width:3px;background:var(--pink);border-radius:2px;animation:wave .6s ease-in-out infinite alternate}
.music-waves span:nth-child(2){animation-delay:.2s;height:12px}
.music-waves span:nth-child(3){animation-delay:.4s}
.music-icon{display:none}
.muted .music-icon{display:block}
.muted .music-waves{display:none}
@keyframes wave{0%{height:4px}100%{height:16px}}

/* ══════════ PRELOADER ══════════ */
#preloader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.preloader-content{text-align:center}
.heart-svg{width:80px;height:80px;color:var(--pink);filter:drop-shadow(0 0 20px rgba(255,107,157,.6));animation:heartbeat 1.2s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}25%{transform:scale(1.15)}40%{transform:scale(1)}60%{transform:scale(1.1)}}
.preloader-text{margin-top:30px;font-size:1.1rem;color:rgba(255,255,255,.6);letter-spacing:2px;animation:fadeInUp 1.5s ease forwards;font-style:italic}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ══════════ INTRO OVERLAY ══════════ */
#intro-overlay{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;align-items:center;justify-content:center;pointer-events:none}
.intro-text{position:absolute;font-family:'Great Vibes',cursive;font-size:clamp(1.8rem,6vw,4rem);text-align:center;opacity:0;text-shadow:0 0 40px rgba(255,107,157,.5),0 0 80px rgba(255,107,157,.2);padding:0 20px;line-height:1.4}

/* ══════════ HERO ══════════ */
#hero{min-height:100vh;background:radial-gradient(ellipse at center,rgba(183,110,121,.1) 0%,transparent 70%)}
.hero-glow{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,157,.15) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulseGlow 4s ease-in-out infinite;pointer-events:none}
@keyframes pulseGlow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}}
.hero-content{position:relative;z-index:2;text-align:center}
.hero-title{margin-bottom:30px}
.hero-line{display:block;font-family:'Playfair Display',serif;font-size:clamp(1.4rem,5vw,3rem);font-weight:700;letter-spacing:2px;opacity:0}
.hero-name{font-family:'Great Vibes',cursive;font-size:clamp(2.5rem,8vw,5rem);color:var(--pink);text-shadow:0 0 30px rgba(255,107,157,.5);margin:10px 0}
.hero-heart{font-size:clamp(2rem,6vw,3.5rem);display:inline-block;animation:heartbeat 1.5s ease-in-out infinite}
.hero-subtitle{font-size:clamp(1rem,3vw,1.5rem);color:rgba(255,255,255,.7);font-style:italic;letter-spacing:1px;opacity:0}
.hero-divider{display:flex;align-items:center;gap:15px;margin-top:30px;opacity:0}
.divider-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--rose),transparent)}
.divider-heart{color:var(--pink);font-size:1.2rem;animation:heartbeat 2s ease-in-out infinite}
.floating-hearts-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.floating-heart{position:absolute;bottom:-50px;font-size:1.5rem;opacity:.6;animation:floatUp linear forwards;pointer-events:none}
@keyframes floatUp{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:.7}50%{opacity:1}100%{transform:translateY(-110vh) rotate(360deg) scale(.3);opacity:0}}

/* ══════════ GLASS CARD ══════════ */
.glass-card{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-b);border-radius:20px;padding:30px;box-shadow:0 8px 32px rgba(0,0,0,.3)}

/* ══════════ SECTION HEADERS ══════════ */
.section-header{text-align:center;margin-bottom:50px;z-index:2;position:relative}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,5vw,2.8rem);font-weight:700;margin-bottom:10px}
.glow-text{text-shadow:0 0 20px rgba(255,107,157,.4),0 0 60px rgba(255,107,157,.15)}
.section-sub{font-size:clamp(.9rem,2.5vw,1.2rem);color:rgba(255,255,255,.6);font-style:italic}

/* ══════════ COUNTDOWN ══════════ */
#countdown{background:radial-gradient(ellipse at bottom,rgba(255,215,0,.05) 0%,transparent 60%)}
.countdown-card{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,25px);padding:30px clamp(15px,4vw,50px);margin-bottom:30px}
.countdown-item{text-align:center}
.countdown-num{display:block;font-family:'Playfair Display',serif;font-size:clamp(2rem,8vw,4rem);font-weight:700;background:linear-gradient(180deg,#fff,var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,107,157,.3))}
.countdown-label{font-size:clamp(.6rem,2vw,.9rem);text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.5)}
.countdown-sep{font-size:clamp(1.5rem,5vw,3rem);color:var(--pink);opacity:.5;animation:blink 1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.5}50%{opacity:1}}
.days-counter{display:flex;align-items:center;gap:10px;padding:15px 25px;font-size:clamp(.9rem,2.5vw,1.1rem)}
.days-num{font-weight:700;color:var(--pink);font-size:clamp(1.1rem,3vw,1.4rem)}

/* ══════════ POLAROID GALLERY ══════════ */
#polaroid-gallery{background:radial-gradient(ellipse at top,rgba(183,110,121,.08) 0%,transparent 60%)}
.polaroid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;max-width:900px;width:100%;z-index:2;position:relative}
.polaroid{background:#fff;padding:12px 12px 40px;border-radius:4px;transform:rotate(calc(var(--tilt,0) * 1deg));box-shadow:0 10px 40px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .5s;cursor:pointer;opacity:0}
.polaroid:hover{transform:rotate(0deg) scale(1.05) translateY(-10px);box-shadow:0 20px 60px rgba(255,107,157,.3)}
.polaroid-img{width:100%;aspect-ratio:1;overflow:hidden;border-radius:2px}
.polaroid-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.polaroid:hover .polaroid-img img{transform:scale(1.1)}
.polaroid-caption{text-align:center;color:#333;font-size:.85rem;margin-top:12px;font-style:italic}

/* ══════════ PHOTO SLIDER ══════════ */
#photo-slider{background:radial-gradient(ellipse at center,rgba(255,215,0,.04) 0%,transparent 60%)}
.slider-wrapper{width:100%;max-width:500px;position:relative;z-index:2;overflow:hidden;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.slider-track{display:flex;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.slide{min-width:100%;position:relative}
.slide img{width:100%;aspect-ratio:3/4;object-fit:cover}
.slide-overlay{position:absolute;bottom:0;left:0;right:0;padding:40px 20px 20px;background:linear-gradient(transparent,rgba(0,0,0,.8));text-align:center}
.slide-overlay p{font-style:italic;font-size:1rem;color:rgba(255,255,255,.9)}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:.3s;border:none}
.slider-dot.active{background:var(--pink);box-shadow:0 0 10px var(--pink)}

/* ══════════ TIMELINE ══════════ */
.timeline{position:relative;max-width:700px;width:100%;z-index:2}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--rose),var(--pink),var(--rose),transparent);transform:translateX(-50%)}
.timeline-item{width:50%;padding:20px;position:relative;opacity:0}
.timeline-item.left{padding-right:40px;text-align:right}
.timeline-item.right{margin-left:50%;padding-left:40px}
.timeline-item::after{content:'♡';position:absolute;top:30px;width:20px;height:20px;font-size:14px;color:var(--pink);display:flex;align-items:center;justify-content:center;z-index:3}
.timeline-item.left::after{right:-10px}
.timeline-item.right::after{left:-10px}
.timeline-card{overflow:hidden;padding:0}
.timeline-card img{width:100%;height:150px;object-fit:cover}
.timeline-info{padding:15px}
.timeline-info h3{font-family:'Playfair Display',serif;font-size:1rem;margin-bottom:5px;color:var(--pink)}
.timeline-info p{font-size:.85rem;color:rgba(255,255,255,.6);font-style:italic}

/* ══════════ LOVE MESSAGE ══════════ */
#love-message{overflow:hidden}
.love-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.15;filter:blur(4px)}
.love-content{position:relative;z-index:2;text-align:center;max-width:600px}
.typing-container{min-height:80px;margin-bottom:40px}
.typing-text{font-family:'Great Vibes',cursive;font-size:clamp(1.8rem,5vw,3rem);color:var(--pink);text-shadow:0 0 30px rgba(255,107,157,.4)}
.typing-cursor{font-weight:100;font-size:clamp(1.8rem,5vw,3rem);color:var(--pink);animation:cursorBlink .8s ease-in-out infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.love-paragraphs{display:flex;flex-direction:column;gap:20px}
.love-p{font-size:clamp(1rem,3vw,1.3rem);color:rgba(255,255,255,.85);opacity:0;transform:translateY(20px);transition:all .8s ease;line-height:1.6;padding:12px 20px;border-radius:12px;background:rgba(255,107,157,.05);border:1px solid rgba(255,107,157,.1)}
.love-p.visible{opacity:1;transform:translateY(0)}
.rose-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.petal{position:absolute;top:-30px;font-size:1.2rem;opacity:.7;animation:petalFall linear forwards;pointer-events:none}
@keyframes petalFall{0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:.7}50%{transform:translateY(50vh) rotate(180deg) translateX(50px);opacity:.5}100%{transform:translateY(110vh) rotate(360deg) translateX(-30px);opacity:0}}

/* ══════════ SURPRISE SECTION ══════════ */
#surprise{background:radial-gradient(ellipse at center,rgba(233,30,99,.05) 0%,transparent 60%)}
.surprise-content{text-align:center;z-index:2;position:relative}
.surprise-button{position:relative;padding:20px 50px;font-family:'Playfair Display',serif;font-size:clamp(1.1rem,3vw,1.4rem);color:#fff;background:linear-gradient(135deg,var(--deep-rose),var(--pink));border:none;border-radius:50px;cursor:pointer;margin-top:30px;overflow:hidden;transition:all .3s;box-shadow:0 0 30px rgba(233,30,99,.4)}
.surprise-button:hover{transform:scale(1.05);box-shadow:0 0 50px rgba(233,30,99,.6)}
.btn-glow{position:absolute;inset:-2px;border-radius:52px;background:linear-gradient(45deg,var(--pink),var(--gold),var(--deep-rose),var(--pink));background-size:400%;animation:glowRotate 3s linear infinite;z-index:-1;filter:blur(8px);opacity:.7}
@keyframes glowRotate{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn-sparkle{position:absolute;inset:0;overflow:hidden;border-radius:50px}
.surprise-reveal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.9)}
.surprise-reveal.active{display:flex;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.giant-text{font-family:'Great Vibes',cursive;font-size:clamp(2rem,8vw,5rem);text-align:center;background:linear-gradient(135deg,var(--pink),var(--gold),var(--deep-rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(255,107,157,.5));animation:giantPulse 2s ease-in-out infinite;padding:0 20px}
@keyframes giantPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.giant-heart{font-size:clamp(3rem,10vw,6rem);animation:heartbeat 1s ease-in-out infinite;margin-top:20px}
#fireworks-canvas{position:fixed;inset:0;z-index:9997;pointer-events:none}

/* ══════════ FINALE ══════════ */
#finale{min-height:100vh}
.finale-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3}
.finale-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg),rgba(10,10,10,.6),var(--bg))}
.finale-content{position:relative;z-index:2;text-align:center}
.finale-text{font-family:'Great Vibes',cursive;font-size:clamp(1.5rem,5vw,3rem);margin:20px 0;opacity:0;text-shadow:0 0 30px rgba(255,107,157,.4)}
.finale-t1{color:var(--pink)}
.finale-t2{color:rgba(255,255,255,.8);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1rem,3vw,1.6rem)}
.finale-t3{color:var(--gold);text-shadow:0 0 30px rgba(255,215,0,.4)}
.finale-heart-container{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.floating-lanterns{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lantern{position:absolute;bottom:-60px;width:20px;height:30px;background:radial-gradient(ellipse,rgba(255,200,50,.8),rgba(255,150,30,.4));border-radius:40% 40% 50% 50%;box-shadow:0 0 20px rgba(255,200,50,.5);animation:lanternFloat linear forwards;pointer-events:none}
@keyframes lanternFloat{0%{transform:translateY(0) translateX(0);opacity:.8}100%{transform:translateY(-120vh) translateX(30px);opacity:0}}

/* ══════════ LIGHTBOX ══════════ */
.lightbox{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.lightbox.active{display:flex;animation:fadeIn .4s ease}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:12px;box-shadow:0 0 60px rgba(255,107,157,.3)}
.lightbox-close{position:absolute;top:20px;right:20px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;z-index:10;width:44px;height:44px;display:flex;align-items:center;justify-content:center}

/* ══════════ EASTER EGG ══════════ */
.easter-egg{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(200px);z-index:10000;max-width:350px;width:90%;text-align:center;transition:transform .6s cubic-bezier(.34,1.56,.64,1);padding:25px}
.easter-egg.show{transform:translateX(-50%) translateY(0)}
.easter-msg{color:var(--pink);margin-top:10px;font-style:italic;font-size:.95rem;line-height:1.6}

/* ══════════ TOUCH PARTICLES ══════════ */
#touch-particles{position:fixed;inset:0;z-index:9990;pointer-events:none}
.touch-particle{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;animation:touchPop .8s ease-out forwards}
@keyframes touchPop{0%{transform:scale(1);opacity:1}100%{transform:scale(0) translate(var(--tx),var(--ty));opacity:0}}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:768px){
.polaroid-grid{grid-template-columns:repeat(2,1fr);gap:15px}
.polaroid{padding:8px 8px 30px}
.timeline::before{left:20px}
.timeline-item{width:100%;padding-left:50px!important;padding-right:10px!important;text-align:left!important}
.timeline-item.right{margin-left:0}
.timeline-item::after{left:11px!important;right:auto!important}
.countdown-card{padding:20px 12px}
.glass-card{padding:20px}
}
@media(max-width:480px){
.polaroid-grid{grid-template-columns:1fr;max-width:280px}
.hero-name{font-size:clamp(2rem,10vw,3.5rem)}
}