:root{
  --bg-dark: #1a0510;
  --bg-dark-2: #3d0f24;
  --pink: #ff6b9d;
  --pink-soft: #ffb3c6;
  --gold: #d9b26a;
  --cream: #fff0e6;
  --card-bg: rgba(255,255,255,0.06);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Montserrat', sans-serif;
  background:linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 50%, var(--bg-dark) 100%);
  color:var(--cream);
  overflow-x:hidden;
  min-height:100vh;
}

/* ---------- Floating hearts background ---------- */
.floating-hearts{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.floating-hearts span{
  position:absolute;
  bottom:-10%;
  font-size:1.2rem;
  color:var(--pink-soft);
  opacity:0.35;
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0) rotate(0deg); opacity:0;}
  10%{opacity:.4;}
  90%{opacity:.3;}
  100%{transform:translateY(-110vh) translateX(20px) rotate(25deg); opacity:0;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  z-index:1;
}
.hero-eyebrow{
  font-size:.85rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0;
  animation:fadeUp 1s ease forwards .2s;
}
.hero-title{
  font-family:'Great Vibes', cursive;
  font-size:clamp(3.5rem, 18vw, 6.5rem);
  color:var(--pink);
  text-shadow:0 0 25px rgba(255,107,157,.5);
  margin:8px 0 16px;
  opacity:0;
  animation:fadeUp 1.1s ease forwards .5s;
}
.hero-subtitle{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:clamp(1rem, 4vw, 1.3rem);
  color:var(--cream);
  opacity:0;
  animation:fadeUp 1.1s ease forwards .9s;
  max-width:320px;
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}

.scroll-hint{
  position:absolute;
  bottom:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0;
  animation:fadeUp 1s ease forwards 1.6s;
}
.arrow-down{
  width:14px;height:14px;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(45deg);
  animation:bounce 1.6s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:translateY(0) rotate(45deg);}
  50%{transform:translateY(8px) rotate(45deg);}
}

/* ---------- Section titles ---------- */
.section-title{
  font-family:'Playfair Display', serif;
  text-align:center;
  font-size:clamp(1.5rem, 6vw, 2.2rem);
  color:var(--pink-soft);
  padding-top:60px;
}
.section-title.light{color:var(--cream);}
.section-subtitle{
  text-align:center;
  color:rgba(255,240,230,.6);
  font-size:.9rem;
  margin-top:6px;
  margin-bottom:30px;
}

/* ---------- GALLERY ---------- */
.gallery{position:relative; z-index:1; padding-bottom:40px;}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  padding:0 18px;
  max-width:520px;
  margin:0 auto;
}
.photo-item{
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,107,157,.25), rgba(217,178,106,.15));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(30px) scale(.95);
  transition:opacity .7s ease, transform .7s ease;
}
.photo-item.visible{opacity:1; transform:translateY(0) scale(1);}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-item .placeholder{font-size:1.8rem;color:rgba(255,255,255,.4);}

/* ---------- HEART FORMATION ---------- */
.heart-section{position:relative; z-index:1;}
.heart-container{
  position:relative;
  width:100%;
  max-width:420px;
  height:78vw;
  max-height:380px;
  margin:0 auto 60px;
}
.heart-photo{
  position:absolute;
  width:15%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--gold);
  box-shadow:0 0 14px rgba(255,107,157,.6);
  opacity:0;
  transform:translate(-50%,-50%) scale(0);
  transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.heart-photo.visible{opacity:1; transform:translate(-50%,-50%) scale(1);}
.heart-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.heart-photo .placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle, rgba(255,107,157,.5), rgba(61,15,36,.8));
  font-size:.9rem;
}

/* ---------- QUIZ ---------- */
.quiz{position:relative; z-index:1; padding-bottom:80px; min-height:60vh;}
.quiz-card{
  max-width:420px;
  margin:0 auto;
  padding:0 18px;
}
.quiz-question{
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:28px 22px;
  backdrop-filter:blur(6px);
  animation:fadeUp .6s ease;
}
.quiz-question h3{
  font-family:'Playfair Display', serif;
  font-size:1.2rem;
  margin-bottom:20px;
  text-align:center;
}
.quiz-option{
  display:block;
  width:100%;
  padding:14px 16px;
  margin-bottom:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
  color:var(--cream);
  font-family:'Montserrat', sans-serif;
  font-size:1rem;
  cursor:pointer;
  transition:transform .15s ease, background .3s ease, border-color .3s ease;
  min-height:48px;
  text-align:left;
}
.quiz-option:active{transform:scale(.97);}
.quiz-option.correct{
  background:rgba(107,255,157,.18);
  border-color:#6bff9d;
  box-shadow:0 0 16px rgba(107,255,157,.4);
}
.quiz-option.incorrect{
  background:rgba(255,107,107,.18);
  border-color:#ff6b6b;
  animation:shake .4s ease;
}
.quiz-option:disabled{cursor:default;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}
.quiz-feedback{
  margin-top:16px;
  text-align:center;
  font-size:.95rem;
  min-height:20px;
  color:var(--pink-soft);
}
.quiz-next{
  display:block;
  margin:22px auto 0;
  padding:12px 30px;
  border-radius:30px;
  border:none;
  background:linear-gradient(135deg, var(--pink), var(--gold));
  color:#1a0510;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.quiz-next.show{opacity:1; pointer-events:auto;}

/* ---------- FINALE ---------- */
.finale{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  opacity:0;
  transition:opacity 1s ease;
}
.finale.show{opacity:1;}
.finale-heart{
  font-size:4rem;
  color:var(--pink);
  text-shadow:0 0 30px rgba(255,107,157,.7);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.15);}
}
.finale-title{
  font-family:'Great Vibes', cursive;
  font-size:clamp(2.5rem, 12vw, 4rem);
  color:var(--pink);
  margin:12px 0 18px;
}
.finale-text{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:clamp(1rem, 4vw, 1.2rem);
  max-width:340px;
  line-height:1.7;
  color:var(--cream);
  white-space:pre-line;
}

#confetti{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  display:none;
}

@media (min-width:600px){
  .photo-grid{grid-template-columns:repeat(3, 1fr);}
}