:root {
  --bg: #0d0b12;
  --bg-soft: #15111c;
  --card: rgba(255,255,255,.065);
  --card-border: rgba(255,255,255,.13);
  --text: #fff9fc;
  --muted: #c8bec8;
  --accent: #f29ab7;
  --accent-2: #c6a6ff;
  --shadow: 0 25px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(242,154,183,.12), transparent 28rem),
    radial-gradient(circle at 85% 25%, rgba(198,166,255,.11), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, sans-serif;
  overflow-x: hidden;
}
button, audio { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
code { color: var(--accent); }

#hearts { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.floating-heart {
  position: absolute;
  bottom: -30px;
  animation: floatHeart 2.8s ease-out forwards;
  opacity: .85;
}
@keyframes floatHeart {
  to { transform: translateY(-105vh) rotate(25deg); opacity: 0; }
}

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(13,11,18,.28), rgba(13,11,18,.9)),
    url("images/hero.jpg") center/cover;
}
.hero-glow {
  position: absolute;
  width: 55vw; height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,154,183,.2), transparent 65%);
  filter: blur(25px);
}
.hero-content { position: relative; z-index: 2; padding: 2rem; max-width: 900px; }
.eyebrow {
  letter-spacing: .3em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1rem;
}
.hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4.5rem, 11vw, 9rem);
  line-height: .78;
  margin: 0;
  font-weight: 600;
  letter-spacing: -.04em;
}
.hero h1 span { color: #f6bfd0; font-style: italic; }
.hero-subtitle {
  color: #eee5ec;
  max-width: 580px;
  margin: 2rem auto;
  line-height: 1.8;
  font-size: 1.05rem;
}
.primary-btn, .outline-btn {
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.5rem;
  transition: .25s ease;
}
.primary-btn {
  background: #fff;
  color: #171219;
  font-weight: 600;
}
.primary-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255,255,255,.14); }
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  font-size: .65rem;
  letter-spacing: .28em;
  color: rgba(255,255,255,.55);
}

.section { width: min(1120px, 92%); margin: 0 auto; padding: 8rem 0; }
.section-heading { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
.section-heading h2, .song-card h2, .counter-card h2, .message h2, .gift-intro h2, .gift-result h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.7rem, 5vw, 4.7rem);
  line-height: .95;
  margin: 0 0 1rem;
  font-weight: 600;
}
em { color: #f5b5ca; font-weight: 500; }
.section-heading p:last-child, .gift-intro p:last-child { color: var(--muted); line-height: 1.7; }

.timeline { position: relative; max-width: 850px; margin: auto; }
.timeline::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: linear-gradient(transparent, rgba(242,154,183,.55), transparent);
}
.timeline-item { width: 50%; padding: 0 45px 70px 0; position: relative; }
.timeline-item:nth-child(even) { margin-left: 50%; padding: 0 0 70px 45px; }
.timeline-dot {
  position: absolute; right: -19px; top: 0; width: 38px; height: 38px;
  display: grid; place-items: center; border: 1px solid var(--card-border);
  background: #17121c; border-radius: 50%; z-index: 2; font-size: .9rem;
}
.timeline-item:nth-child(even) .timeline-dot { left: -19px; right: auto; }
.timeline-card {
  background: var(--card); border: 1px solid var(--card-border);
  padding: 1.5rem; border-radius: 24px; box-shadow: var(--shadow);
}
.timeline-number { color: var(--accent); font-size: .7rem; letter-spacing: .2em; }
.timeline-card h3 { font-family: "Cormorant Garamond", serif; font-size: 2rem; margin: .35rem 0; }
.timeline-card p { color: var(--muted); line-height: 1.7; }
.timeline-photo {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 15px;
  margin-top: 1rem;
}

.memory-box {
  display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden;
  border: 1px solid var(--card-border); border-radius: 30px;
  background: var(--card); box-shadow: var(--shadow);
}
.memory-image-wrap { min-height: 520px; position: relative; }
.memory-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.memory-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(13,11,18,.75)); }
.memory-copy { padding: clamp(2rem, 5vw, 4rem); align-self: center; }
.memory-copy span { font-size: .7rem; letter-spacing: .25em; color: var(--accent); }
.memory-copy h3 { font-family: "Cormorant Garamond", serif; font-size: 3rem; line-height: 1; margin: 1rem 0; }
.memory-copy p { color: var(--muted); line-height: 1.8; margin-bottom: 2rem; }
.outline-btn { background: transparent; color: white; border: 1px solid var(--card-border); }
.outline-btn:hover { border-color: var(--accent); transform: translateY(-2px); }

.cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.love-card {
  min-height: 270px; border: 0; background: transparent; color: white;
  perspective: 900px; padding: 0;
}
.card-front, .card-back {
  position: absolute; inset: 0; border: 1px solid var(--card-border); border-radius: 25px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; backface-visibility: hidden; transition: transform .6s ease;
}
.love-card { position: relative; }
.card-front b { font-size: 2.6rem; margin-bottom: 1rem; }
.card-front strong { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; }
.card-front small { color: #a99fa9; margin-top: .7rem; }
.card-back { transform: rotateY(180deg); text-align: center; color: #eadfe6; line-height: 1.7; }
.love-card.flipped .card-front { transform: rotateY(180deg); }
.love-card.flipped .card-back { transform: rotateY(360deg); }

.song-card {
  display: grid; grid-template-columns: 180px 1fr; gap: 3rem; align-items: center;
  padding: 3rem; border: 1px solid var(--card-border); border-radius: 30px;
  background: linear-gradient(135deg, rgba(242,154,183,.08), rgba(198,166,255,.05));
}
.song-card p { color: var(--muted); line-height: 1.7; }
.vinyl {
  width: 180px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-size: 3rem; color: white;
  background: repeating-radial-gradient(circle, #24202a 0 7px, #16131b 8px 14px);
  border: 7px solid #29242f; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
audio { width: 100%; margin-top: 1rem; }

.counter-section { width: 100%; max-width: none; padding-left: 5%; padding-right: 5%; }
.counter-card { text-align: center; padding: 5rem 2rem; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.counter-grid { display: grid; grid-template-columns: repeat(4,1fr); max-width: 850px; margin: 3rem auto; gap: 1rem; }
.counter-grid div { padding: 1.5rem; }
.counter-grid strong { display: block; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 300; }
.counter-grid span { font-size: .65rem; letter-spacing: .2em; color: var(--accent); }
.counter-note { color: var(--muted); }

.message { text-align: center; max-width: 850px; margin: auto; }
.big-message { font-family: "Cormorant Garamond", serif; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.35; color: #eee3eb; }
.signature { color: var(--accent); font-style: italic; margin-top: 2rem; }

.secret-box { text-align: center; border: 1px dashed rgba(255,255,255,.15); padding: 3rem 2rem; border-radius: 28px; }
.secret-btn { background: none; color: #9f959f; border: 0; text-decoration: underline; }
.secret-message { display: none; margin-top: 2rem; animation: fadeUp .5s ease; }
.secret-message.show { display: block; }
.secret-message span { font-size: 2.5rem; }
.secret-message h3 { font-family: "Cormorant Garamond", serif; font-size: 2.5rem; margin: .5rem; }
.secret-message p { color: var(--muted); }

.gift-section {
  min-height: 100vh; padding: 8rem 5% 10rem; text-align: center;
  background: radial-gradient(circle at center, rgba(242,154,183,.1), transparent 45%);
}
.gift-intro { max-width: 700px; margin: auto; }
.gift-button {
  border: 0; background: transparent; color: white; margin: 5rem auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.8rem;
}
.gift-box { width: 150px; height: 120px; position: relative; display: block; }
.gift-body {
  position: absolute; left: 5px; right: 5px; bottom: 0; height: 92px;
  background: linear-gradient(135deg, #f0a0bb, #b989bd); border-radius: 7px 7px 14px 14px;
  box-shadow: 0 25px 45px rgba(0,0,0,.35);
}
.gift-lid {
  position: absolute; z-index: 3; left: 0; top: 13px; width: 150px; height: 28px;
  border-radius: 8px; background: #f5b0c7; transition: .7s ease;
}
.gift-ribbon-v { position: absolute; z-index: 4; width: 20px; height: 92px; bottom: 0; left: 65px; background: #f7d2df; }
.gift-ribbon-h { position: absolute; z-index: 5; left: 0; top: 18px; width: 150px; height: 16px; background: #f7d2df; }
.gift-bow { position: absolute; z-index: 6; top: -5px; width: 45px; height: 25px; border: 9px solid #f7d2df; border-radius: 50%; }
.gift-bow.left { left: 39px; transform: rotate(25deg); }
.gift-bow.right { right: 39px; transform: rotate(-25deg); }
.gift-button.open .gift-lid { transform: translateY(-75px) rotate(-8deg); opacity: .9; }
.gift-button.open .gift-bow { opacity: 0; transform: scale(.2); }
.gift-label { font-size: .75rem; letter-spacing: .25em; color: #d9cfd7; }

.gift-reveal { display: none; max-width: 1180px; margin: 4rem auto 0; }
.gift-reveal.show { display: block; animation: giftIn .9s cubic-bezier(.2,.8,.2,1); }
.gift-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin: 3rem 0; }
.gift-photos figure { margin: 0; }
.gift-photos img { width: 100%; height: 470px; object-fit: contain; background: rgba(255,255,255,.025); border-radius: 20px; border: 1px solid var(--card-border); }
.gift-photos figcaption { padding: 1rem .4rem; color: #d9ced7; }
.gift-details { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.gift-details span { border: 1px solid var(--card-border); padding: .8rem 1rem; border-radius: 999px; color: var(--muted); }

footer { text-align: center; padding: 3rem 1rem 5rem; color: #8e858e; font-size: .8rem; }

.reveal { opacity: 0; transform: translateY(35px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes giftIn { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 800px) {
  .section { padding: 6rem 0; }
  .timeline::before { left: 18px; }
  .timeline-item, .timeline-item:nth-child(even) { width: 100%; margin: 0; padding: 0 0 45px 55px; }
  .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: 0; right: auto; }
  .memory-box, .song-card { grid-template-columns: 1fr; }
  .memory-image-wrap { min-height: 350px; }
  .memory-overlay { background: linear-gradient(0deg, rgba(13,11,18,.7), transparent 60%); }
  .cards-grid { grid-template-columns: repeat(2,1fr); }
  .counter-grid { grid-template-columns: repeat(2,1fr); }
  .song-card { padding: 2rem; }
  .vinyl { width: 130px; margin: auto; }
  .gift-photos { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .gift-photos img { height: 520px; }
}
@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 4rem; }
}