/* ===== CSS Variables ===== */
:root {
  --pink-50: #fdf2f8; --pink-100: #fce7f3; --pink-200: #fbcfe8;
  --pink-300: #f9a8d4; --pink-400: #f472b6; --pink-500: #ec4899;
  --pink-600: #db2777; --pink-700: #be185d;
  --rose-50: #fff1f2; --rose-100: #ffe4e6; --rose-200: #fecdd3;
  --rose-300: #fda4af; --rose-400: #fb7185; --rose-500: #f43f5e;
  --purple-100: #f3e8ff; --purple-200: #e9d5ff; --purple-300: #d8b4fe;
  --purple-400: #c084fc; --purple-500: #a855f7;
  --gold: #f59e0b; --gold-light: #fbbf24;
  --bg-primary: #0f0a1a; --bg-secondary: #1a1025; --bg-card: rgba(255,255,255,0.06);
  --text-primary: #fdf2f8; --text-secondary: rgba(253,242,248,0.7);
  --glass-bg: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.12);
  --font-display: 'Dancing Script', cursive;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
}

/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary); overflow-x:hidden; }
img { max-width:100%; display:block; }

/* ===== Preloader ===== */
#preloader {
  position:fixed; inset:0; z-index:10000;
  background:linear-gradient(135deg, #1a0a2e, #0f0a1a, #1a1025);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.8s, visibility 0.8s;
}
#preloader.hidden { opacity:0; visibility:hidden; }
.loader-content { text-align:center; }
.cake-icon { font-size:4rem; animation: bounce 1s infinite; }
.loading-text { font-family:var(--font-display); font-size:1.3rem; color:var(--pink-300); margin:1rem 0; }
.loader-bar { width:200px; height:4px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; }
.loader-fill { width:0; height:100%; background:linear-gradient(90deg,var(--pink-400),var(--purple-400)); border-radius:4px; animation: fillBar 2s ease forwards; }

@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }
@keyframes fillBar { to{width:100%} }

/* ===== Confetti Canvas ===== */
#confetti-canvas { position:fixed; inset:0; z-index:9998; pointer-events:none; }

/* ===== Particles ===== */
#particles-container { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.particle {
  position:absolute; border-radius:50%; pointer-events:none;
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  0% { transform:translateY(100vh) rotate(0deg); opacity:0; }
  10% { opacity:1; }
  90% { opacity:0.8; }
  100% { transform:translateY(-10vh) rotate(720deg); opacity:0; }
}

/* ===== Envelope Section ===== */
#envelope-section {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(135deg, #1a0a2e 0%, #2d1048 50%, #1a0a2e 100%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 1s ease, visibility 1s ease;
}
#envelope-section.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.envelope-wrapper { text-align:center; }
.envelope {
  width:280px; height:200px; margin:0 auto 2rem; position:relative; cursor:pointer;
}
.envelope-body {
  width:100%; height:100%; background:linear-gradient(135deg,var(--pink-200),var(--rose-200));
  border-radius:0 0 12px 12px; position:relative; overflow:hidden;
  box-shadow: 0 10px 40px rgba(244,114,182,0.3);
}
.envelope-flap {
  position:absolute; top:0; left:0; width:0; height:0;
  border-left:140px solid transparent; border-right:140px solid transparent;
  border-top:100px solid var(--pink-300); z-index:2;
  transform-origin:top; transition: transform 0.6s ease;
}
.envelope.opened .envelope-flap { transform:rotateX(180deg); }
.letter {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  width:85%; background:white; border-radius:8px; padding:1.5rem 1rem;
  text-align:center; transition: transform 0.6s ease 0.3s;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.letter p { color:var(--pink-600); font-family:var(--font-display); font-size:1.1rem; }
.envelope.opened .letter { transform:translateX(-50%) translateY(-60px); }
.sparkle-btn {
  background:linear-gradient(135deg,var(--pink-400),var(--purple-400));
  border:none; padding:1rem 2.5rem; border-radius:50px; cursor:pointer;
  font-family:var(--font-body); font-size:1.1rem; font-weight:600; color:white;
  box-shadow:0 8px 30px rgba(244,114,182,0.4);
  transition: transform 0.3s, box-shadow 0.3s;
  animation: pulseBtn 2s infinite;
}
.sparkle-btn:hover { transform:scale(1.05); box-shadow:0 12px 40px rgba(244,114,182,0.6); }
@keyframes pulseBtn { 0%,100%{box-shadow:0 8px 30px rgba(244,114,182,0.4)} 50%{box-shadow:0 8px 50px rgba(244,114,182,0.7)} }

/* ===== Main Content ===== */
#main-content.hidden { display:none; }
section { position:relative; }

/* ===== Hero ===== */
#hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; text-align:center; padding:2rem;
  background:linear-gradient(180deg, #1a0a2e 0%, var(--bg-primary) 100%);
}
.hero-bg-shapes { position:absolute; inset:0; overflow:hidden; }
.shape {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:0.3;
  animation: shapeFloat 8s ease-in-out infinite;
}
.shape-1 { width:400px; height:400px; background:var(--pink-500); top:-10%; left:-5%; animation-delay:0s; }
.shape-2 { width:300px; height:300px; background:var(--purple-500); top:20%; right:-5%; animation-delay:2s; }
.shape-3 { width:350px; height:350px; background:var(--rose-400); bottom:-10%; left:30%; animation-delay:4s; }
.shape-4 { width:200px; height:200px; background:var(--pink-300); top:50%; left:10%; animation-delay:1s; }
.shape-5 { width:250px; height:250px; background:var(--purple-400); bottom:20%; right:15%; animation-delay:3s; }
@keyframes shapeFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(30px,-30px) scale(1.05); }
  66% { transform:translate(-20px,20px) scale(0.95); }
}
.hero-content { position:relative; z-index:2; }
.hero-badge {
  display:inline-block; padding:0.5rem 1.5rem; border-radius:50px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  font-size:0.9rem; color:var(--pink-300); letter-spacing:2px;
  backdrop-filter:blur(10px); margin-bottom:1.5rem;
}
.hero-title { margin-bottom:1rem; }
.title-line {
  display:block; font-family:var(--font-heading); font-weight:600;
  font-size:clamp(3rem,8vw,6rem); line-height:1.1;
}
.title-accent {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3.5rem,10vw,7.5rem);
  background:linear-gradient(135deg,var(--pink-300),var(--rose-300),var(--purple-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-name {
  font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3rem);
  color:var(--gold-light); margin:1rem 0 1.5rem;
  text-shadow:0 0 30px rgba(251,191,36,0.3);
}
.name-decoration { font-size:0.8em; opacity:0.7; margin:0 0.5rem; }
.hero-subtitle {
  font-size:clamp(1rem,2.5vw,1.2rem); color:var(--text-secondary);
  max-width:500px; margin:0 auto 2rem; line-height:1.8; font-weight:300;
}
.scroll-indicator { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.mouse {
  width:26px; height:40px; border:2px solid var(--pink-300); border-radius:13px;
  display:flex; justify-content:center; padding-top:8px;
}
.wheel { width:4px; height:8px; background:var(--pink-300); border-radius:2px; animation:scroll 1.5s infinite; }
@keyframes scroll { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(12px)} }
.scroll-indicator p { font-size:0.75rem; color:var(--text-secondary); letter-spacing:2px; text-transform:uppercase; }

/* Floating Emojis */
.floating-emojis { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.float-emoji {
  position:absolute; font-size:1.5rem; left:var(--x);
  animation: emojiFloat 6s ease-in-out infinite;
  animation-delay:var(--delay);
}
@keyframes emojiFloat {
  0%,100% { transform:translateY(0) rotate(0deg); opacity:0.7; }
  50% { transform:translateY(-30px) rotate(15deg); opacity:1; }
}

/* ===== Reveal Animations ===== */
.reveal-up {
  opacity:0; transform:translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.visible { opacity:1; transform:translateY(0); }

/* ===== Section Styles ===== */
.section-container { max-width:1100px; margin:0 auto; padding:6rem 2rem; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-tag {
  display:inline-block; font-family:var(--font-display); font-size:1.1rem;
  color:var(--pink-300); margin-bottom:0.5rem; letter-spacing:1px;
}
.section-title {
  font-family:var(--font-heading); font-size:clamp(2rem,5vw,3rem);
  font-weight:600; line-height:1.3;
}
.section-title em {
  font-family:var(--font-display); font-style:italic;
  background:linear-gradient(135deg,var(--pink-300),var(--purple-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ===== About Section ===== */
#about { background:var(--bg-primary); }
.about-content { display:flex; flex-direction:column; gap:1.5rem; max-width:700px; margin:0 auto; }
.glass-card {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); border-radius:20px; padding:2rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.glass-card:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 40px rgba(244,114,182,0.15);
  border-color:var(--pink-400);
}
.card-icon { font-size:2rem; margin-bottom:1rem; }
.about-card p { color:var(--text-secondary); line-height:1.9; font-weight:300; font-size:0.95rem; }

/* ===== Gallery ===== */
#gallery { background:var(--bg-secondary); }
.gallery-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  max-width:1000px; margin:0 auto;
}
.gallery-item { text-align:center; }
.gallery-frame {
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  border:3px solid var(--glass-border);
  transition: transform 0.5s, box-shadow 0.5s;
  aspect-ratio:3/4;
}
.gallery-frame img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.gallery-frame:hover { transform:scale(1.03); box-shadow:0 20px 50px rgba(244,114,182,0.3); }
.gallery-frame:hover img { transform:scale(1.08); }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(15,10,26,0.8));
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:1.5rem; opacity:0; transition:opacity 0.4s;
}
.gallery-frame:hover .gallery-overlay { opacity:1; }
.gallery-overlay span {
  font-family:var(--font-display); font-size:1.3rem; color:var(--pink-200);
}
.gallery-caption {
  margin-top:1rem; font-family:var(--font-display); font-size:1rem;
  color:var(--pink-300); opacity:0.8;
}

/* ===== Wishes ===== */
#wishes { background:var(--bg-primary); }
.wishes-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.wish-card {
  text-align:center; padding:2rem 1.5rem; position:relative; overflow:hidden;
}
.wish-number {
  position:absolute; top:10px; right:15px;
  font-family:var(--font-heading); font-size:3rem; font-weight:700;
  color:rgba(255,255,255,0.04); line-height:1;
}
.wish-icon { font-size:2.5rem; margin-bottom:1rem; }
.wish-card h3 {
  font-family:var(--font-heading); font-size:1.1rem; margin-bottom:0.75rem;
  color:var(--pink-200);
}
.wish-card p { color:var(--text-secondary); font-size:0.88rem; line-height:1.8; font-weight:300; }

/* ===== Celebration ===== */
#celebration {
  background:linear-gradient(135deg,#1a0a2e,#2d1048);
  padding:6rem 2rem; text-align:center; position:relative; overflow:hidden;
}
#celebration::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,rgba(244,114,182,0.15),transparent 70%);
}
.celebration-content { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.big-emoji { font-size:5rem; margin-bottom:1.5rem; animation:bounce 2s infinite; }
.celebration-title {
  font-family:var(--font-heading); font-size:clamp(1.8rem,4vw,2.5rem);
  line-height:1.5; margin-bottom:1.5rem;
}
.highlight-text {
  font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4rem);
  background:linear-gradient(135deg,var(--gold-light),var(--pink-300),var(--purple-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.celebration-subtitle { color:var(--text-secondary); line-height:1.9; font-weight:300; max-width:600px; margin:0 auto 2rem; }
.celebration-emojis { font-size:2rem; letter-spacing:0.5rem; animation:emojiFloat 3s ease-in-out infinite; }

/* ===== Final Section ===== */
#final {
  min-height:60vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-primary); padding:4rem 2rem; text-align:center;
  position:relative; overflow:hidden;
}
.final-sparkles { font-size:1.5rem; color:var(--gold-light); letter-spacing:1rem; margin-bottom:1.5rem; animation:sparkle 2s infinite; }
@keyframes sparkle { 0%,100%{opacity:1} 50%{opacity:0.3} }
.final-title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem); margin-bottom:1.5rem; color:var(--pink-200); }
.final-message { color:var(--text-secondary); max-width:500px; margin:0 auto 2rem; line-height:1.9; font-weight:300; }
.final-signature { margin-bottom:2rem; }
.final-signature p { color:var(--text-secondary); font-style:italic; }
.signature { font-family:var(--font-display); font-size:1.5rem; color:var(--pink-300); margin-top:0.5rem; }
.final-hearts { display:flex; justify-content:center; gap:1rem; }
.heart-float { font-size:1.5rem; animation:heartBeat 1.5s infinite; animation-delay:var(--delay); }
@keyframes heartBeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

/* ===== Footer ===== */
footer {
  text-align:center; padding:2rem; background:var(--bg-secondary);
  border-top:1px solid var(--glass-border);
}
footer p { color:var(--text-secondary); font-size:0.85rem; }
.footer-small { font-size:0.75rem; margin-top:0.5rem; color:var(--pink-400); }

/* ===== Music Button ===== */
.music-btn {
  position:fixed; bottom:2rem; right:2rem; z-index:999;
  width:50px; height:50px; border-radius:50%;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.3s, background 0.3s;
}
.music-btn:hover { transform:scale(1.1); background:rgba(255,255,255,0.15); }
.music-icon { font-size:1.3rem; }
.music-bars { display:none; gap:2px; align-items:flex-end; height:16px; }
.music-bars span { width:3px; background:var(--pink-300); border-radius:2px; animation:musicBar 0.8s infinite alternate; }
.music-bars span:nth-child(1) { height:6px; animation-delay:0s; }
.music-bars span:nth-child(2) { height:12px; animation-delay:0.2s; }
.music-bars span:nth-child(3) { height:8px; animation-delay:0.4s; }
.music-btn.playing .music-icon { display:none; }
.music-btn.playing .music-bars { display:flex; }
@keyframes musicBar { to{height:16px} }

/* ===== Responsive ===== */
@media(max-width:768px) {
  .gallery-grid { grid-template-columns:1fr; max-width:350px; }
  .wishes-grid { grid-template-columns:1fr; }
  .glass-card { padding:1.5rem; }
  .envelope { width:220px; height:160px; }
  .envelope-flap { border-left-width:110px; border-right-width:110px; border-top-width:80px; }
}
@media(min-width:769px) and (max-width:1024px) {
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .wishes-grid { grid-template-columns:repeat(2,1fr); }
}