:root {
  --bg-1: #120316;
  --bg-2: #2a0c28;
  --pink: #ff5fa2;
  --pink-soft: #ffb7d5;
  --gold: #ffd166;
  --text: #fff4fb;
  --glass: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.18);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 95, 162, 0.25), transparent 30%),
    radial-gradient(circle at top right, rgba(255, 209, 102, 0.16), transparent 25%),
    linear-gradient(145deg, var(--bg-1), var(--bg-2) 60%, #4b163f);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top, rgba(255, 95, 162, 0.2), transparent 35%),
    linear-gradient(160deg, #130313, #2f0a2e 60%, #4b163f);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-card {
  width: min(520px, calc(100% - 32px));
  padding: 34px 28px;
  border-radius: 30px;
  text-align: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.loading-heart {
  font-size: 3rem;
  color: var(--pink-soft);
  animation: pulse 1.3s ease-in-out infinite;
}

.loading-eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-soft);
  font-size: 0.82rem;
}

.music-cover-wrap {
  padding: 20px 20px 0;
}

.music-cover {
  width: min(660px, calc(100% - 40px));
  margin: 72px auto 0;
  padding: 18px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.cover-art {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: linear-gradient(135deg, rgba(255,95,162,0.9), rgba(255,209,102,0.85));
  box-shadow: 0 14px 28px rgba(255, 95, 162, 0.28);
}

.cover-meta h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.cover-meta p:last-child {
  margin: 0;
  color: rgba(255,244,251,0.84);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 80px;
  gap: 30px;
}

.glass-card, .quote-card, .reason-card, .photo-card, .interactive-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.hero-card {
  width: min(980px, 100%);
  border-radius: 32px;
  padding: 42px 32px;
  text-align: center;
  animation: floatIn 1s ease;
}

.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--pink-soft);
  margin-bottom: 16px;
}

h1 { font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1.08; margin: 0 0 18px; min-height: 5.5rem; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; }
.subtitle {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 244, 251, 0.88);
}

.cursor {
  display: inline-block;
  animation: blink 0.8s infinite;
  color: var(--gold);
}

.button-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.primary-btn, .ghost-btn, .love-button, .music-toggle {
  border: 0;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
}

.primary-btn, .love-button {
  background: linear-gradient(135deg, var(--pink), #ff7eb6);
  color: white;
  box-shadow: 0 16px 30px rgba(255, 95, 162, 0.35);
}

.ghost-btn, .music-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.music-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
}

.primary-btn:hover, .ghost-btn:hover, .photo-card:hover, .reason-card:hover, .love-button:hover, .music-toggle:hover {
  transform: translateY(-4px) scale(1.02);
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.meta-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.meta-pill span { font-size: 1.7rem; }
.meta-pill strong { display: block; margin-bottom: 4px; }
.meta-pill p { margin: 0; color: rgba(255, 244, 251, 0.86); }
.hidden { display: none; }

.love-letter {
  margin-top: 24px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  animation: openLetter 0.6s ease;
}

.letter-top {
  background: linear-gradient(135deg, #ff7eb6, #ff5fa2);
  padding: 16px;
  font-weight: 700;
}

.letter-body {
  background: rgba(255,255,255,0.1);
  padding: 24px;
  line-height: 1.9;
  text-align: left;
}

.letter-sign { color: var(--pink-soft); font-weight: 600; }

.reasons-grid, .gallery-grid {
  width: min(1100px, 100%);
  display: grid;
  gap: 20px;
}
.reasons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reason-card {
  border-radius: 28px;
  padding: 26px;
  transition: transform 0.25s ease;
}
.reason-card span { font-size: 2rem; }
.reason-card h3 { margin: 14px 0 10px; font-size: 1.3rem; }
.reason-card p { margin: 0; line-height: 1.7; color: rgba(255, 244, 251, 0.86); }

.quote-section, .gallery-section, .love-wall, .interactive-section { width: min(1100px, 100%); }
.quote-card { border-radius: 30px; padding: 28px; text-align: center; }
.script {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.35;
  margin: 0;
  color: #fff0f7;
}
.sign { margin-top: 12px; color: var(--pink-soft); }
.section-heading { text-align: center; margin-bottom: 22px; }
.gallery-grid { grid-template-columns: 1.2fr 1fr 1fr; align-items: stretch; }
.photo-card {
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  transition: transform 0.25s ease;
  min-height: 320px;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.tall { min-height: 660px; }

.interactive-card {
  border-radius: 30px;
  padding: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.confetti {
  position: absolute;
  top: -10vh;
  width: 10px;
  height: 18px;
  opacity: 0.9;
  animation: confettiFall linear forwards;
}

.love-button {
  margin-top: 18px;
  font-size: 1.1rem;
}

.love-response {
  margin-top: 14px;
  color: var(--pink-soft);
  min-height: 28px;
}

.burst-area {
  position: relative;
  height: 80px;
  overflow: hidden;
}

.burst-heart {
  position: absolute;
  bottom: 0;
  font-size: 24px;
  animation: rise 1.8s ease forwards;
}

.hearts, .sparkles, .roses {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hearts::before, .hearts::after, .sparkles::before, .sparkles::after, .roses::before, .roses::after {
  position: absolute;
  width: 100%;
}
.hearts::before, .hearts::after {
  content: '❤ ❤ ❤ ❤ ❤ ❤ ❤';
  font-size: 22px;
  color: rgba(255, 183, 213, 0.18);
  animation: drift 18s linear infinite;
}
.hearts::after {
  top: 45%;
  animation-duration: 24s;
  color: rgba(255, 95, 162, 0.14);
}
.sparkles::before, .sparkles::after {
  content: '✦ ✧ ✦ ✧ ✦ ✧ ✦';
  font-size: 20px;
  color: rgba(255, 209, 102, 0.22);
  animation: shimmer 14s linear infinite;
}
.sparkles::after { top: 50%; animation-duration: 20s; }
.roses::before, .roses::after {
  content: '🌹 🌹 🌹 🌹 🌹';
  font-size: 24px;
  color: rgba(255,255,255,0.9);
  animation: roseFall 22s linear infinite;
}
.roses::after {
  top: 35%;
  animation-duration: 28s;
}

@keyframes drift {
  from { transform: translateY(100vh) translateX(-10%); }
  to { transform: translateY(-120vh) translateX(10%); }
}
@keyframes shimmer {
  from { transform: translateX(-10%) translateY(100vh); }
  to { transform: translateX(10%) translateY(-120vh); }
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes openLetter {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rise {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-90px) scale(1.3); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes roseFall {
  from { transform: translateY(-120vh) translateX(-8%); }
  to { transform: translateY(120vh) translateX(8%); }
}
@keyframes confettiFall {
  from { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  to { transform: translate3d(0, 115vh, 0) rotate(720deg); }
}

@media (max-width: 860px) {
  .reasons-grid, .gallery-grid, .meta-grid { grid-template-columns: 1fr; }
  .hero-card, .interactive-card { padding: 32px 20px; }
  .tall, .photo-card { min-height: 320px; }
  .music-toggle { top: 12px; right: 12px; padding: 12px 16px; }
  .music-cover {
    width: calc(100% - 24px);
    margin-top: 76px;
    flex-direction: column;
    text-align: center;
  }
}