:root{
  --burgundy: #5c2438;
  --burgundy-deep: #431a29;
  --burgundy-light: #7c3a51;
  --cream: #faf5ec;
  --cream-deep: #f3e9da;
  --gold: #b8925a;
  --text-dark: #3a2027;
  --text-light: #f4e9df;
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: 'Cormorant Garamond', serif;
  background: #d9d2c8;
  color: var(--text-dark);
  display:flex;
  justify-content:center;
}

.page{
  width:100%;
  max-width:560px;
  background: var(--cream);
  box-shadow: 0 0 60px rgba(0,0,0,0.25);
  overflow:hidden;
  position:relative;
}

section{ position:relative; padding: 60px 36px; will-change: opacity; }

/* ---------- Divider flourish ---------- */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin: 28px 0;
  color: var(--gold);
}
.divider svg{ width:120px; height:16px; }
.divider.dark{ color: rgba(244,233,223,0.65); }

/* ---------- HERO ---------- */
.hero{
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-deep) 100%);
  color: var(--text-light);
  text-align:center;
  padding: 0 0 70px 0;
  overflow:hidden;
}
.hero::before, .hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle, rgba(184,146,90,0.28), transparent 70%);
  pointer-events:none;
  animation: floatBlob 14s ease-in-out infinite;
  z-index:0;
}
.hero::before{ width:240px; height:240px; top:-70px; left:-70px; }
.hero::after{ width:200px; height:200px; bottom:-50px; right:-60px; animation-delay:-7s; }
.hero > *{ position:relative; z-index:1; }
.hero-flap{
  width:100%;
  height:170px;
  background: var(--burgundy-light);
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: 26px;
}
.hero-flap span{
  font-family: 'Playfair Display', serif;
  letter-spacing: 3px;
  font-size: 12px;
  text-transform:uppercase;
  color: var(--text-light);
  opacity:0;
  animation: heroFadeIn 1s ease 0.15s forwards;
}
.hero-names{
  font-family:'Alex Brush', cursive;
  font-size: 64px;
  line-height:1.15;
  margin-top: 34px;
  color:#fff;
  opacity:0;
  animation: heroFadeUp 1.1s ease 0.4s forwards;
}
.hero-amp{ font-size: 34px; opacity:0.85; display:block; margin: 2px 0; }
.hero-date{
  margin-top: 22px;
  letter-spacing: 4px;
  font-size: 15px;
  text-transform: uppercase;
  font-family:'Playfair Display', serif;
  opacity:0;
  animation: heroFadeUp 1.1s ease 0.8s forwards;
}

@keyframes heroFadeIn{
  from{ opacity:0; }
  to{ opacity:0.8; }
}
@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes floatBlob{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px,-18px) scale(1.12); }
}

.scroll-cue{
  position:relative;
  z-index:1;
  margin-top: 30px;
  display:flex;
  justify-content:center;
  opacity:0;
  animation: heroFadeIn 1s ease 1.3s forwards, bounce 2.2s ease-in-out 1.3s infinite;
}
.scroll-cue svg{ width:18px; height:18px; stroke: var(--text-light); fill:none; }
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(7px); }
}

/* ---------- QUOTE / INTRO ---------- */
.intro{ text-align:center; }
.quote{
  font-style: italic;
  font-size: 19px;
  line-height:1.6;
  color: var(--burgundy);
  max-width: 380px;
  margin: 0 auto 8px auto;
}
.monogram{
  font-family:'Playfair Display', serif;
  font-size: 40px;
  letter-spacing: 10px;
  color: var(--burgundy);
  margin: 30px 0 6px 0;
}
.monogram span{ color: var(--gold); font-size:26px; }
.tagline{
  letter-spacing: 3px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text-dark);
  opacity: 0.75;
  margin-bottom: 30px;
}

.players{ margin-top: 34px; }
.player{
  background: var(--cream-deep);
  border:1px solid var(--gold);
  border-radius: 40px;
  padding: 12px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  cursor:pointer;
}
.player .btn-play{
  width:40px; height:40px; border-radius:50%;
  background: var(--burgundy);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.player .btn-play svg{ width:16px; height:16px; fill:#fff; }
.player .track{ flex:1; height:3px; background: rgba(92,36,56,0.2); border-radius:3px; position:relative; }
.player .track::before{ content:""; position:absolute; left:0; top:0; height:100%; width:35%; background: var(--gold); border-radius:3px; }
.player-caption{
  text-align:center; font-size: 13px; letter-spacing:1px; text-transform:uppercase;
  color: var(--burgundy); opacity:0.7; margin-top:10px;
}

.family-note{
  margin-top: 38px;
  text-align:center;
  font-size: 16px;
  line-height:1.7;
  color: var(--text-dark);
}
.family-note .names{ font-style: italic; color: var(--burgundy); margin-top:6px; }

/* ---------- COUNTDOWN / DETAILS (burgundy) ---------- */
.details{
  background: var(--burgundy);
  color: var(--text-light);
  text-align:center;
}
.details-month{
  letter-spacing: 4px;
  font-size: 13px;
  text-transform:uppercase;
  opacity:0.75;
}
.details-day{
  font-family:'Playfair Display', serif;
  font-size: 46px;
  margin: 6px 0 2px 0;
}
.details-day sup{ font-size: 18px; }
.details-year{ letter-spacing:3px; font-size:14px; opacity:0.75; }

.countdown-label{
  margin-top: 30px;
  letter-spacing: 3px;
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.7;
}
.countdown{
  display:flex; justify-content:center; gap: 18px;
  margin-top: 14px;
}
.countdown .unit{ min-width: 54px; }
.countdown .num{
  font-family:'Playfair Display', serif;
  font-size: 30px;
}
.countdown .lbl{
  font-size: 11px; letter-spacing:2px; text-transform:uppercase; opacity:0.65;
}

.reception-box{
  margin-top: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(244,233,223,0.3);
  border-radius: 8px;
  padding: 26px 20px;
}
.reception-time{ font-family:'Playfair Display', serif; font-size:20px; letter-spacing:1px; }
.reception-what{ letter-spacing:2px; font-size:13px; text-transform:uppercase; opacity:0.8; margin-top:6px; }
.reception-where{ font-style:italic; font-size:17px; margin-top:4px; }
.reception-addr{ font-size: 14px; opacity:0.7; margin-top:2px; }

.btn-outline{
  display:inline-block;
  margin-top: 16px;
  padding: 10px 26px;
  border: 1px solid var(--text-light);
  border-radius: 30px;
  color: var(--text-light);
  text-decoration:none;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all .2s ease;
}
.btn-outline:hover{ background: var(--text-light); color: var(--burgundy); }

/* ---------- ITINERARY ---------- */
.itinerary-title{
  margin-top: 44px;
  letter-spacing: 3px;
  font-size: 15px;
  text-transform: uppercase;
}
.timeline{
  margin-top: 30px;
  display:flex;
  flex-direction:column;
  gap: 34px;
  text-align:left;
  max-width: 380px;
  margin-left:auto; margin-right:auto;
}
.timeline .item{
  display:flex;
  align-items:flex-start;
  gap: 18px;
}
.timeline .icon{
  width: 54px; height:54px; flex-shrink:0;
  border-radius:50%;
  border: 1px solid rgba(244,233,223,0.4);
  display:flex; align-items:center; justify-content:center;
  margin-top: 2px;
}
.timeline .icon svg{ width:24px; height:24px; stroke:var(--text-light); fill:none; }
.timeline .txt .head{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap: 10px;
}
.timeline .txt .time{ font-family:'Playfair Display', serif; font-size:22px; letter-spacing:0.5px; flex-shrink:0; }
.timeline .txt .title{
  font-family:'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
}
.timeline .txt .place{
  font-size: 15px;
  font-style: italic;
  opacity: 0.85;
  margin-top: 3px;
}
.timeline .txt .addr{
  font-size: 12.5px;
  opacity: 0.55;
  margin-top: 1px;
  letter-spacing: 0.3px;
}
.timeline .txt .desc{
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.65;
  margin-top: 6px;
}

/* ---------- PHOTOS ---------- */
.photo-note{ text-align:center; }
.photo-note .icon-circle{
  width: 52px; height:52px; margin: 0 auto 16px auto;
  border-radius:50%;
  border: 1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.photo-note .icon-circle svg{ width:24px; height:24px; stroke: var(--burgundy); fill:none; }
.photo-note h3{
  font-family:'Playfair Display', serif;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 12px;
}
.photo-note p{ font-size:16px; line-height:1.6; max-width:340px; margin: 0 auto; }
.photo-note .divider{ margin: 40px 0; }
.btn-solid{
  display:inline-block;
  margin-top: 18px;
  padding: 12px 30px;
  border-radius: 30px;
  background: var(--burgundy);
  border: 1px solid var(--burgundy);
  color: #fff;
  text-decoration:none;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all .2s ease;
}
.btn-solid:hover{ background: var(--burgundy-deep); border-color: var(--burgundy-deep); }

.upload-form{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}
.upload-input{ display:none; }
.upload-label{
  display:inline-block;
  padding: 10px 24px;
  border-radius: 30px;
  border: 1px solid var(--gold);
  color: var(--burgundy);
  font-size: 13px;
  letter-spacing: 1px;
  cursor:pointer;
  transition: all .2s ease;
}
.upload-label:hover{ background: var(--cream-deep); }
.upload-success{
  margin-top: 20px;
  font-style: italic;
  color: var(--burgundy);
  font-size: 16px;
}

/* ---------- CLOTURE ---------- */
section.practical{
  background: var(--burgundy);
  color: var(--text-light);
}
.closing{
  text-align:center;
  padding-bottom: 10px;
}
.closing p{ font-size:17px; line-height:1.7; max-width:360px; margin:0 auto 24px auto; }
.closing .signoff{
  font-family:'Alex Brush', cursive;
  font-size: 40px;
  color: #fff;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
.reveal-delay-1.is-visible{ transition-delay: 0.12s; }
.reveal-delay-2.is-visible{ transition-delay: 0.24s; }
.reveal-delay-3.is-visible{ transition-delay: 0.36s; }

/* ---------- MICRO-INTERACTIONS ---------- */
.btn-outline, .btn-solid, .upload-label, .player{
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-outline:hover, .btn-solid:hover, .upload-label:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}
.player:hover{ transform: translateY(-2px); }

.countdown .num{
  display:inline-block;
  transition: transform 0.2s ease;
}

@media (max-width:420px){
  section{ padding: 46px 24px; }
  .hero-names{ font-size: 50px; }
  .countdown{ gap:10px; }
  .countdown .unit{ min-width:44px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}