/* ===== DESIGN SYSTEM & GLOBAL STYLES ===== */
:root {
    --gold: #FFD700; --gold-light: #FFEC80; --gold-dark: #B8960C;
    --pink: #FF6B9D; --pink-light: #FF9DC2; --pink-dark: #C44569;
    --blue: #4FC3F7; --blue-light: #81D4FA; --blue-dark: #0288D1;
    --bg-dark: #0A0A1A; --bg-darker: #060612;
    --bg-card: rgba(255,255,255,0.06); --bg-card-hover: rgba(255,255,255,0.1);
    --text-primary: #FFFFFF; --text-secondary: #B8B8D4; --text-muted: #7A7A9E;
    --gradient-gold: linear-gradient(135deg, #FFD700, #FFA500);
    --gradient-pink: linear-gradient(135deg, #FF6B9D, #C44569);
    --gradient-blue: linear-gradient(135deg, #4FC3F7, #2196F3);
    --gradient-hero: linear-gradient(135deg, #FFD700 0%, #FF6B9D 50%, #4FC3F7 100%);
    --glass-bg: rgba(255,255,255,0.05); --glass-border: rgba(255,255,255,0.1);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --font-cursive: 'Dancing Script', cursive;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Poppins', sans-serif;
    --section-padding: 100px 5%; --card-radius: 16px;
    --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--pink) var(--bg-dark)}
body{font-family:var(--font-sans);background:var(--bg-dark);color:var(--text-primary);overflow-x:hidden;min-height:100vh;line-height:1.6}
body.no-scroll{overflow:hidden}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-dark)}
::-webkit-scrollbar-thumb{background:var(--pink);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* Canvases */
#particles-canvas,#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}
#particles-canvas{z-index:1}
#confetti-canvas{z-index:9999}

/* Music Button */
.music-btn{position:fixed;top:20px;right:20px;z-index:10000;width:50px;height:50px;border-radius:50%;border:2px solid var(--glass-border);background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);overflow:hidden}
.music-btn:hover{background:var(--bg-card-hover);border-color:var(--gold);transform:scale(1.1)}
.music-icon{font-size:20px}
.music-bars{display:none;align-items:flex-end;gap:3px;height:18px}
.music-bars span{display:block;width:3px;background:var(--gold);border-radius:2px;animation:musicBar 0.8s ease-in-out infinite alternate}
.music-bars span:nth-child(1){height:6px;animation-delay:0s}
.music-bars span:nth-child(2){height:12px;animation-delay:0.15s}
.music-bars span:nth-child(3){height:8px;animation-delay:0.3s}
.music-bars span:nth-child(4){height:14px;animation-delay:0.45s}
.music-btn.playing .music-icon{display:none}
.music-btn.playing .music-bars{display:flex}

/* Sections */
.section{min-height:100vh;padding:var(--section-padding);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.section-header{text-align:center;margin-bottom:60px}
.section-title{font-family:var(--font-cursive);font-size:clamp(2.5rem,6vw,4rem);background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.section-subtitle{font-size:1.1rem;color:var(--text-secondary);font-weight:300}

/* Glass Card */
.glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--card-radius);box-shadow:var(--glass-shadow);transition:var(--transition)}
.glass-card:hover{background:var(--bg-card-hover);border-color:rgba(255,215,0,0.2);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}

/* Images */
.section-image{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;position:relative;z-index:2}
.image-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,107,157,0.15),rgba(79,195,247,0.15));border-radius:inherit;color:var(--text-secondary);font-size:0.9rem;z-index:1;pointer-events:none}
.image-placeholder span{font-size:2rem}
/* Hide placeholder when image is loaded (img.loaded sibling exists) */
.section-image.loaded ~ .image-placeholder{display:none}
/* Ensure all image containers have position context for placeholder */
.hero-image-frame,.timeline-image-frame,.gallery-item,.finale-image-frame,.video-wrapper{position:relative;overflow:hidden}

/* Hero */
.hero-section{background:radial-gradient(ellipse at 50% 30%,rgba(255,215,0,0.08) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(255,107,157,0.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(79,195,247,0.06) 0%,transparent 50%);padding-top:120px}
.hero-content{text-align:center;max-width:800px}
.hero-badge{display:inline-block;padding:8px 24px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:50px;font-size:0.9rem;color:var(--gold);letter-spacing:1px;margin-bottom:24px;backdrop-filter:blur(10px)}
.hero-title{margin-bottom:16px}
.hero-line1{display:block;font-family:var(--font-serif);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:400;color:var(--text-primary);margin-bottom:8px}
.hero-name{display:block;font-family:var(--font-cursive);font-size:clamp(3rem,10vw,6rem);font-weight:700;background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;filter:drop-shadow(0 0 30px rgba(255,215,0,0.3))}
.hero-subtitle{font-size:1.2rem;color:var(--text-secondary);font-weight:300;margin-bottom:40px}
.hero-image-frame{position:relative;width:320px;height:320px;margin:0 auto;border-radius:50%;overflow:hidden;padding:4px;background:var(--gradient-hero);box-shadow:0 0 40px rgba(255,215,0,0.2),0 0 80px rgba(255,107,157,0.1)}
.hero-image-frame .section-image,.hero-image-frame .image-placeholder{border-radius:50%}
.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:0.85rem;animation:float 2s ease-in-out infinite}
.scroll-arrow{width:24px;height:40px;border:2px solid var(--text-muted);border-radius:12px;position:relative}
.scroll-arrow::after{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--gold);border-radius:2px;animation:scrollDot 1.5s ease-in-out infinite}

/* Timeline */
.timeline{position:relative;max-width:800px;width:100%;padding:20px 0}
.timeline::before{content:'';position:absolute;left:30px;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--gold),var(--pink),var(--blue),var(--gold));border-radius:2px}
.timeline-item{position:relative;padding-left:80px;margin-bottom:60px}
.timeline-marker{position:absolute;left:14px;width:36px;height:36px;border-radius:50%;background:var(--bg-dark);border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:16px;z-index:2;box-shadow:0 0 20px rgba(255,215,0,0.3)}
.timeline-content{padding:24px}
.timeline-date{font-size:0.85rem;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.timeline-content h3{font-family:var(--font-serif);font-size:1.4rem;margin-bottom:10px;color:var(--text-primary)}
.timeline-content p{color:var(--text-secondary);font-size:0.95rem;line-height:1.7;margin-bottom:16px}
.timeline-image-frame{position:relative;width:100%;height:200px;border-radius:12px;overflow:hidden}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;max-width:1200px;width:100%}
.gallery-item{position:relative;height:250px;border-radius:var(--card-radius);overflow:hidden;cursor:pointer;transition:var(--transition);background:var(--bg-darker)}
.gallery-item:hover{transform:scale(1.03)}
.gi-wide{grid-column:span 2}
.gi-tall{grid-row:span 2;height:100%}
.gallery-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);font-size:2rem}
.gallery-item:hover .gallery-overlay{opacity:1}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:10001;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease}
.lightbox.active{display:flex;opacity:1}
.lightbox-content{max-width:90vw;max-height:85vh}
.lightbox-content img{max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:none;border:none;color:white;font-size:2.5rem;cursor:pointer;padding:12px;transition:var(--transition);z-index:2}
.lightbox-close{top:20px;right:24px}
.lightbox-close:hover{color:var(--pink)}
.lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox-prev:hover,.lightbox-next:hover{color:var(--gold)}

/* Videos */
.videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:32px;max-width:1000px;width:100%}
.video-card{overflow:hidden}
.video-wrapper{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:var(--card-radius) var(--card-radius) 0 0}
.video-wrapper video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.video-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);cursor:pointer;transition:var(--transition)}
.video-play-overlay:hover{background:rgba(0,0,0,0.2)}
.play-btn-circle{width:70px;height:70px;border-radius:50%;background:var(--gradient-gold);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--bg-dark);box-shadow:0 0 30px rgba(255,215,0,0.4);transition:var(--transition)}
.video-play-overlay:hover .play-btn-circle{transform:scale(1.15)}
.video-play-overlay.hidden{display:none}
.video-info{padding:20px}
.video-info h3{font-family:var(--font-serif);font-size:1.2rem;margin-bottom:6px}
.video-info p{color:var(--text-secondary);font-size:0.9rem}

/* 22 Reasons */
.reasons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:1100px;width:100%}
.reason-card{perspective:1000px;height:180px;cursor:pointer}
.reason-card-inner{position:relative;width:100%;height:100%;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}
.reason-card.flipped .reason-card-inner{transform:rotateY(180deg)}
.reason-front,.reason-back{position:absolute;inset:0;border-radius:var(--card-radius);display:flex;align-items:center;justify-content:center;backface-visibility:hidden;padding:20px;text-align:center}
.reason-front{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(20px);flex-direction:column;gap:10px}
.reason-number{font-family:var(--font-cursive);font-size:2.5rem;font-weight:700;background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.reason-front .hint{font-size:0.8rem;color:var(--text-muted)}
.reason-back{background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,107,157,0.15));border:1px solid rgba(255,215,0,0.2);transform:rotateY(180deg);font-family:var(--font-serif);font-size:1rem;color:var(--text-primary);line-height:1.6}

/* Love Letter */
.letter-container{max-width:700px;width:100%;padding:0;overflow:hidden}
.letter-paper{padding:48px;background:linear-gradient(180deg,rgba(255,248,220,0.05) 0%,rgba(255,215,0,0.03) 100%);position:relative}
.letter-paper::before{content:'💌';position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:3rem}
.letter-greeting{font-family:var(--font-cursive);font-size:1.8rem;color:var(--gold);margin-bottom:24px}
.letter-body{font-size:1.05rem;line-height:1.9;color:var(--text-secondary);min-height:200px;font-style:italic}
.letter-body .cursor{display:inline-block;width:2px;height:1.2em;background:var(--gold);margin-left:2px;animation:blink 0.8s infinite;vertical-align:text-bottom}
.letter-signature{margin-top:32px;text-align:right;color:var(--text-secondary);font-size:1rem}
.signature-name{font-family:var(--font-cursive);font-size:1.6rem;color:var(--pink)}

/* Finale */
#finale{background:radial-gradient(ellipse at 50% 50%,rgba(255,215,0,0.1) 0%,transparent 60%)}
.finale-content{text-align:center;max-width:700px}
.finale-age{font-family:var(--font-cursive);font-size:clamp(6rem,20vw,12rem);font-weight:700;background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;filter:drop-shadow(0 0 40px rgba(255,215,0,0.3))}
.finale-title{font-family:var(--font-serif);font-size:clamp(1.5rem,4vw,2.5rem);margin:10px 0}
.finale-subtitle{color:var(--text-secondary);font-size:1.1rem;margin-bottom:32px}
.finale-image-frame{position:relative;width:100%;max-width:500px;height:300px;border-radius:var(--card-radius);overflow:hidden;margin:0 auto 32px;border:2px solid var(--glass-border)}
.fireworks-button{padding:16px 40px;border:none;border-radius:50px;background:var(--gradient-gold);color:var(--bg-dark);font-family:var(--font-sans);font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:0 0 30px rgba(255,215,0,0.3)}
.fireworks-button:hover{transform:scale(1.08);box-shadow:0 0 50px rgba(255,215,0,0.5)}
.finale-footer{margin-top:40px;color:var(--text-muted);font-size:0.9rem}

/* Navigation */
#main-nav{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;background:rgba(10,10,26,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:50px;padding:8px 12px;opacity:0;transition:opacity 0.5s ease}
#main-nav.visible{opacity:1}
#main-nav ul{list-style:none;display:flex;gap:4px}
.nav-link{display:block;padding:8px 16px;color:var(--text-muted);text-decoration:none;font-size:0.8rem;font-weight:500;border-radius:50px;transition:var(--transition);white-space:nowrap}
.nav-link:hover{color:var(--text-primary);background:var(--bg-card)}
.nav-link.active{color:var(--bg-dark);background:var(--gradient-gold);font-weight:600}

/* States */
.locked{display:none !important}
.locked.unlocked{display:block !important}
.animate-on-scroll{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.animate-on-scroll:nth-child(even){transition-delay:0.15s}