:root {
  --bg:         #FDFBF7;
  --cream:      #FAF6ED;
  --white:      #FFFFFF;
  --gold:       #C29B57;
  --gold-lt:    #DEBE81;
  --gold-pale:  #F4E8D1;
  --rose:       #D18475;
  --rose-pale:  #F8E6E2;
  --navy:       #030277;
  --text-mid:   #2C3E73;
  --text-muted: #7A86A3;
  --border:     rgba(194, 155, 87, 0.25);
  --shadow:     rgba(26,  54,  93,  0.08);
}

html, body {
  scroll-snap-type: y mandatory;
}

.scrollsec {
  scroll-snap-align: start;
  min-height: 100vh;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--navy);
  font-family:'Montserrat',sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::-moz-selection { background:var(--gold-pale); color:var(--navy); }
::selection     { background:var(--gold-pale); color:var(--navy); }

body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23C29B57' stroke-width='0.4' opacity='0.06'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 60px;
}

#petals { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.8; }

/* ===== HERO FIX (NO ABSOLUTE) ===== */

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* logo + badge group */
.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: auto;   /* pushes it to top */
  padding-top: 0;
  gap: 12px;
}

/* keep center content centered */
.hero-content {
  margin-top: auto;
  margin-bottom: auto;
}

.rv { opacity:0; transform:translateY(30px); transition:opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); }
.rv.in { opacity:1; transform:none; }
.rv.d1 { transition-delay:0.15s; }
.rv.d2 { transition-delay:0.30s; }
.rv.d3 { transition-delay:0.45s; }
.rv.d4 { transition-delay:0.60s; }

.label {
  font-family:'Montserrat',sans-serif; font-size:13px;
  font-weight:700; letter-spacing:0.45em; text-transform:uppercase; color:var(--text-muted);
}
.sh { font-family:'Great Vibes',cursive; font-size:clamp(56px,12vw,96px); color:var(--navy); line-height:1.1; font-weight:400; }
.sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(17px,3.5vw,22px); color:var(--text-mid); line-height:1.7; max-width:600px; margin:0 auto; }
.gold-line { height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:0 auto; }

#entry-gate {
  position:fixed; inset:0; z-index:1000; background:#0A0807;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:opacity 1s ease;
}
#entry-gate video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.85; }
#entry-hint { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; color:rgba(255,255,255,0.9); text-align:center; }
#entry-hint p { font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:0.4em; text-transform:uppercase; }
.pulse-ring { width:64px; height:64px; border-radius:50%; border:1px solid rgba(222,190,129,0.8); animation:pulseRing 2.5s ease-out infinite; }
@keyframes pulseRing { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(1.6);opacity:0} }

#main { position:relative; z-index:1; opacity:0; transition:opacity 1.2s ease; }
#main.show { opacity:1; }

/* ═══ HERO ═══ */
#hero {
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:0 24px 60px; text-align:center;
  position:relative; overflow:hidden; 
  background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}

.brk { position:absolute; inset:24px; pointer-events:none; z-index:0; }
.brk span { position:absolute; width:30px; height:30px; opacity:0.6; }
.brk .tl { top:0; left:0; border-top:1px solid var(--gold); border-left:1px solid var(--gold); }
.brk .tr { top:0; right:0; border-top:1px solid var(--gold); border-right:1px solid var(--gold); }
.brk .bl { bottom:0; left:0; border-bottom:1px solid var(--gold); border-left:1px solid var(--gold); }
.brk .br { bottom:0; right:0; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); }

.botanical { position:absolute; width:clamp(100px,18vw,180px); pointer-events:none; opacity:0; transition:opacity 1.5s ease 0.8s; z-index:1; }
.botanical.show { opacity:0.85; }
.botanical.tl { top:20px; left:20px; }
.botanical.tr { top:20px; right:20px; transform:scaleX(-1); }
.botanical.bl { bottom:20px; left:20px; transform:scaleY(-1); }
.botanical.br { bottom:20px; right:20px; transform:scale(-1); }
.botanical-path { stroke-dasharray:500; stroke-dashoffset:500; transition:stroke-dashoffset 2.4s cubic-bezier(0.16,1,0.3,1) 0.9s; }
.botanical-path.drawn { stroke-dashoffset:0; }

.hero-orbit { position:absolute; width:min(500px,95vw); height:min(500px,95vw); border-radius:50%; border:1px solid rgba(194,155,87,0.15); animation:slowSpin 60s linear infinite; z-index:0; }
.hero-orbit-inner { position:absolute; width:min(380px,75vw); height:min(380px,75vw); border-radius:50%; border:1px dashed rgba(194,155,87,0.25); animation:slowSpin 40s linear infinite reverse; z-index:0; }
@keyframes slowSpin { to{transform:rotate(360deg)} }
.hero-orbit::before,.hero-orbit::after { content:''; position:absolute; width:5px; height:5px; background:var(--gold); border-radius:50%; top:50%; left:-3px; margin-top:-3px; box-shadow:0 0 8px var(--gold); }
.hero-orbit::after { left:auto; right:-3px; }

.hero-content {
    margin-top:-50px;
  display:flex; flex-direction:column; align-items:center; position:relative; z-index:5;
  width:100%; max-width:500px;
  background: radial-gradient(circle, rgba(253,251,247,0.9) 0%, rgba(253,251,247,0) 80%);
  padding:30px 20px;
}

.save-date-badge {
    margin-top:-30px !important;
  font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:0.4em; text-transform:uppercase;
  color:var(--gold); background:rgba(255,255,255,0.9);
  padding:10px 32px; border-radius:50px;
  border:1px solid rgba(194,155,87,0.4);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(26,54,93,0.06);
  position:relative; z-index:2; margin-bottom:36px;
}

.hero-name { 
  font-family:'Pinyon Script',cursive; 
  font-size:clamp(64px,15vw,110px); 
  color:var(--navy); line-height:0.9; 
  position:relative; z-index:1; font-weight:normal; 
}
.hero-amp { 
  font-family:'Cormorant Garamond',serif; font-style:italic; 
  font-size:clamp(28px,6vw,42px); color:var(--gold); 
  display:block; margin:8px 0; position:relative; z-index:1; 
}
.hero-tag {
  font-family:'Jost',sans-serif; font-size:13px; font-weight:400;
  letter-spacing:0.4em; text-transform:uppercase; color:var(--navy);
  margin-top:24px; margin-bottom:12px;
}
.hero-invite {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(16px,2.5vw,18px); letter-spacing:0.12em;
  font-weight:400;
  color:var(--text-mid); opacity:0.8; max-width:400px;
  line-height:1.8; position:relative; z-index:2; 
}

/* ═══ COUNTDOWN ═══ */
.countdown-wrap {
  margin-top:10px !important;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:relative; z-index:2; width:100%;
}

.countdown-label-top {
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:0.5em; text-transform:uppercase; color:var(--text-muted);
}

.countdown-grid {
  display:flex; gap:clamp(8px,3vw,16px); align-items:flex-start;
}

.cd-unit {
  display:flex; flex-direction:column; align-items:center; gap:6px;
}

.cd-box {
  position:relative;
  width:clamp(58px,14vw,76px);
  height:clamp(58px,14vw,76px);
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(194,155,87,0.35);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(26,54,93,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  overflow:hidden;
}

/* top/bottom halves for the flip feel */
.cd-box::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  border-radius:8px 8px 0 0;
  pointer-events:none;
  z-index:1;
}
.cd-box::after {
  content:'';
  position:absolute;
  top:50%; left:6%; right:6%;
  height:1px;
  background:rgba(194,155,87,0.18);
  z-index:2;
}

.cd-num {
  font-family:'Playfair Display',serif;
  font-size:clamp(22px,5.5vw,32px);
  font-weight:400; font-style:italic;
  color:var(--navy);
  line-height:1;
  position:relative; z-index:3;
  transition:transform 0.15s ease, opacity 0.15s ease;
}
.cd-num.flip {
  transform:translateY(-4px) scale(0.92);
  opacity:0;
}

.cd-sep {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px,4vw,28px);
  color:var(--gold-lt);
  margin-top:clamp(12px,3vw,16px);
  line-height:1;
  opacity:0.7;
}

.cd-lbl {
  font-family:'Montserrat',sans-serif; font-size:8px; font-weight:500;
  letter-spacing:0.35em; text-transform:uppercase; color:var(--text-muted);
}

.countdown-date-line {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(13px,2.5vw,16px); color:var(--gold);
  letter-spacing:0.12em; opacity:0.9;
}

@keyframes nudge { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(8px)} }
.nudge { animation:nudge 2.4s ease infinite; }

/* ═══ LOVE STORY ═══ */
#love-story-section {
  height:310vh;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, var(--cream) 30%, transparent 70%);
}
.ls-sticky {
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:48px;
}

.first-line {
  position: relative;
}

.story-arrow {
  position: absolute;
  left: 50%;

  transform: translate(-180px, -30px);

  width: 80px;
  height: auto;

  opacity: 0.65;
  pointer-events: none;
}
.story-text { text-align:center; max-width:600px; padding:0 24px 24px; width:100%; }
.story-date-badge {
  display:inline-block;
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.3em; color:var(--navy); background:var(--gold-pale);
  padding:6px 20px; border-radius:50px; margin:14px 0 20px;
}
.story-p {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(18px,3vw,20px); color:var(--text-mid);
  line-height:1.3; margin-bottom:5px;
  font-weight:400;
}

.story-p.under {
  text-decoration: underline 1px !important;
  text-underline-offset: 2px;
}

.ls-stack { position:relative; width:min(290px,70vw); height:min(370px,52vh); z-index:3; flex-shrink:0; }
.ls-card {
  position:absolute; inset:0; background:#ffffff; border-radius:2px;
  padding:10px 10px 48px 10px; box-shadow:0 6px 20px rgba(26,54,93,0.12);
  transform:translateY(120vh) rotate(calc(var(--rot) * 2)) scale(0.9);
  transition:transform 1.5s cubic-bezier(0.16,1,0.3,1); will-change:transform;
}
.ls-card:nth-child(1) { --rot:-4.5deg; z-index:1; }
.ls-card:nth-child(2) { --rot: 5.8deg; z-index:2; }
.ls-card:nth-child(3) { --rot:-3.6deg; z-index:3; }
.ls-card:nth-child(4) { --rot: 6.2deg; z-index:4; }
.ls-card:nth-child(5) { --rot:-5.1deg; z-index:5; }
.ls-card:nth-child(6) { --rot: 4.3deg; z-index:6; }
.ls-card.visible { transform:translateY(0) rotate(var(--rot)) scale(1); }
.ls-card.stacked  { transform:translateY(calc(var(--depth,0) * -5px)) rotate(calc(var(--rot) * 0.4)) scale(calc(1 - var(--depth,0) * 0.025)); }
.ls-card img { width:100%; height:100%; object-fit:cover; display:block; border-radius:1px; }
.ls-card.logo-card { display:flex; align-items:center; justify-content:center; background:#fdfbf7; }
.ls-card.logo-card img { object-fit:contain; padding:20px; }

/* ═══ DATE SECTION ═══ */
#date-section {
  padding:40px 24px; text-align:center;
  border-top:1px solid var(--border); background:var(--cream);
}
.scratch-row {
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(16px,5vw,32px); margin-top:60px;
}
.scratch-unit { display:flex; flex-direction:column; align-items:center; gap:14px; }
.scratch-lbl { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:500; letter-spacing:0.38em; text-transform:uppercase; color:var(--text-muted); }
.scratch-card {
  position:relative; width:clamp(90px,24vw,130px); height:clamp(130px,30vw,180px);
  border-radius:8px; overflow:hidden; border:1px solid var(--border);
  background:var(--white); box-shadow:0 12px 36px var(--shadow);
}
.scratch-card.done-glow {
  box-shadow:0 0 0 2px var(--gold-lt), 0 16px 40px rgba(194,155,87,0.2);
  transition:box-shadow 0.8s ease;
}
.scratch-content {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; background:var(--white); z-index:1;
}
.sc-val {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(22px,8vw,34px); font-weight:400;
  color:var(--navy); line-height:1.1; text-align:center; padding:0 6px;
}
.sc-small-line { width:40px; height:1px; background:var(--border); margin:6px auto 0; }
.scratch-canvas { position:absolute; inset:0; z-index:10; cursor:crosshair; touch-action:none; }
.scratch-hint {
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:0.35em; text-transform:uppercase; color:var(--gold);
  margin-top:12px; animation:hintPulse 2s ease infinite;
}
@keyframes hintPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/*#date-revealed { margin-top:70px; opacity:0; transition:opacity 1.2s ease; }*/

#date-revealed {
  /*margin-top: 70px;*/
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* 🔥 KEY FIX */
  min-height: 220px; /* adjust if needed */

  transition: opacity 1.2s ease;
}

#date-revealed.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.big-reveal { font-family:'Great Vibes',cursive; font-size:clamp(44px,10vw,76px); color:var(--rose); line-height:1.2; }

/* ═══ LOCKED ═══ */
#locked-content {
  display:none; opacity:0; transform:translateY(40px);
  transition:opacity 1.5s ease, transform 1.5s ease;
}
#locked-content.unlocked { display:block; }
#locked-content.visible { opacity:1; transform:translateY(0); }

/* ═══ VENUE ═══ */
#venue-section { padding:40px 24px; text-align:center; border-top:1px solid var(--border); }
.venue-img-wrap {
  position:relative; width:100%; max-width:640px; margin:20px auto;
  border-radius:6px; overflow:hidden;
  box-shadow:0 20px 60px var(--shadow); border:10px solid var(--white);
}
.venue-img-wrap img { width:100%; height:auto; display:block; transition:transform 1s cubic-bezier(0.16,1,0.3,1); }
.venue-img-wrap:hover img { transform:scale(1.05); }

.sub.spacer
{
    padding-bottom:50px;
}
/* ═══ CLOSING ═══ */
#closing {
  padding:80px 24px 140px; text-align:center;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, var(--cream));
}
.closing-name { font-family:'Pinyon Script',cursive; font-size:clamp(48px,12vw,84px); color:var(--rose); line-height:1; margin:16px 0; font-weight:normal; }

/* ═══ AUDIO BTN ═══ */
#audio-btn {
  position:fixed; bottom:30px; right:30px; z-index:500;
  width:54px; height:54px; border-radius:50%;
  background:var(--white); border:1px solid var(--border);
  box-shadow:0 12px 36px var(--shadow);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
#audio-btn:hover { transform:scale(1.15); }
#audio-btn svg { width:22px; height:22px; color:var(--text-mid); }