/* ============================================================
   Abigail & Daniel — Wedding Invitation
   Pure CSS. Ivory / white-rose / gold palette.
   ============================================================ */

:root{
  --ivory:      #fcf9f3;
  --cream:      #f6f0e5;
  --paper:      #fffdfa;
  --gold:       #b8946a;
  --gold-deep:  #8a6222;
  --gold-light: #d8b877;
  --ink:        #322b23;
  --ink-soft:   #4f453a;
  --line:       #ddccae;
  --shadow:     0 24px 60px -24px rgba(90,70,40,.45);
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body:  "Cormorant", "Cormorant Garamond", Georgia, serif;
  --font-script:"Pinyon Script", "Cormorant Garamond", cursive;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 50% -10%, #fffefc 0%, var(--ivory) 50%, var(--cream) 100%);
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- typography helpers ---------- */
.serif-caps{
  font-family:var(--font-serif);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:500;
}
.script{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--gold-deep);
  line-height:1;
}
.eyebrow{
  font-family:var(--font-serif);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72em;
  color:var(--gold-deep);
  margin:0 0 1.4em;
}
.eyebrow.underlined{ display:inline-block; border-bottom:1px solid var(--gold); padding-bottom:.5em; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(3rem,10vh,7rem) clamp(1.5rem,6vw,4rem);
  overflow:hidden;
}
.section > .reveal{ max-width:640px; width:100%; position:relative; z-index:2; }

/* rose background evoked with layered radial gradients */
.rose-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(closest-side at 30% 35%, #fffefb 0%, #f3e9d7 55%, transparent 100%),
    radial-gradient(closest-side at 72% 62%, #fbf4e6 0%, #ecdcc0 60%, transparent 100%),
    radial-gradient(closest-side at 50% 85%, #f7ecd8 0%, transparent 70%),
    conic-gradient(from 200deg at 50% 45%, #f6ecd9, #fbf5ea, #f1e4cd, #fbf5ea, #f6ecd9);
  filter:saturate(.9);
  opacity:.9;
}
.rose-bg::after{ /* soft petal swirl lines */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 45% 40%, transparent 55%, rgba(200,170,120,.10) 70%, transparent 72%),
    radial-gradient(45% 60% at 55% 55%, transparent 50%, rgba(200,170,120,.08) 66%, transparent 68%),
    radial-gradient(30% 45% at 50% 48%, transparent 40%, rgba(200,170,120,.10) 58%, transparent 60%);
}
.rose-bg.soft{ opacity:.6; }

/* couple photo used as a soft, tinted backdrop for the date section */
.photo-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-repeat:no-repeat;
  transform:scale(1.06); filter:blur(1.5px);
}
.date-photo{
  background-image:
    linear-gradient(to bottom, rgba(252,249,243,.88) 0%, rgba(250,246,238,.84) 50%, rgba(246,240,229,.92) 100%),
    url("images/date-bg.jpg");
  background-position:center 40%;
}

/* ============================================================
   HERO — photo forward, elegant typographic reveal
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  padding:clamp(2rem,7vw,4rem);
  text-align:center;
}
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background:url("images/hero-bg.jpg") center 30%/cover no-repeat;
  transform:scale(1.06);
  filter:blur(3px);
  animation:heroZoom 16s ease-out forwards, heroFocus 2.8s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.06) } to{ transform:scale(1.16) } }
/* soft-focus: photo starts sharp and eases into the gentle resting blur */
@keyframes heroFocus{ from{ filter:blur(0) } to{ filter:blur(3px) } }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    /* vignette — darkens the edges, keeps faces readable */
    radial-gradient(135% 115% at 50% 44%, transparent 20%, rgba(14,9,4,.42) 60%, rgba(9,5,2,.74) 100%),
    /* overall darkening + heavier top & bottom for text legibility */
    linear-gradient(to bottom, rgba(15,9,4,.44) 0%, rgba(15,9,4,.30) 30%, rgba(13,8,3,.42) 62%, rgba(8,5,2,.72) 100%);
}
.hero-frame{
  position:absolute; inset:clamp(24px,7vw,44px); z-index:2; pointer-events:none;
  border:1px solid rgba(255,248,235,.55);
  opacity:0; animation:frameIn 1.6s ease .3s forwards;
}
@keyframes frameIn{ from{ opacity:0; transform:scale(1.04) } to{ opacity:1; transform:scale(1) } }

.hero-content{
  position:relative; z-index:3;
  color:#fdf9f1;
  display:flex; flex-direction:column; align-items:center;
  text-shadow:0 2px 20px rgba(18,10,3,.45);
}
.hero-content > *{ opacity:0; animation:heroUp 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-eyebrow{
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.34em;
  font-size:.74rem; color:#f2ddab; margin:0 0 1.9rem; animation-delay:.35s;
}
.hero-script{
  color:#f8e7bf; font-size:clamp(2.7rem,13vw,4.4rem); line-height:1.08; margin:0;
  text-shadow:0 4px 26px rgba(18,10,3,.55); animation-delay:.55s;
}
.hero-sub{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,3.8vw,1.35rem); letter-spacing:.08em;
  color:#f2ddab; margin:1rem 0 0; text-shadow:0 2px 16px rgba(18,10,3,.5);
  animation-delay:.8s;
}
.hero-rule{
  display:block; width:0; height:1px; margin:1.1rem 0 1.5rem;
  background:linear-gradient(90deg,transparent,#f2ddab,transparent);
  animation:ruleGrow 1.2s ease 1.05s forwards;
}
@keyframes ruleGrow{ from{ width:0; opacity:0 } to{ width:min(62vw,250px); opacity:1 } }
.hero-names{
  font-size:clamp(1.5rem,7vw,2.3rem); letter-spacing:.24em; margin:0; color:#fffdf8;
  animation-delay:1.15s;
}
.hero-names i{
  font-style:normal; font-family:var(--font-script); text-transform:none;
  font-size:1.25em; color:#f2ddab; letter-spacing:0; margin:0 .1em; vertical-align:-.08em;
}
.hero-date{
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.2em;
  font-size:.76rem; margin:1.2rem 0 0; color:#f4e7ce; animation-delay:1.4s;
}
.hero-date sup{ font-size:.72em; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  z-index:4; text-decoration:none;
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.3em;
  font-size:.62rem; color:#f4e7ce;
  opacity:0; animation:heroUp 1s ease 1.75s forwards;
}
.scroll-line{ width:1px; height:44px; background:linear-gradient(#f2ddab,transparent); position:relative; overflow:hidden; }
.scroll-line::after{ content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:#f8e7bf; animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%{top:-40%} 100%{top:110%} }

/* the hero intro is held until the invitation is unlocked, then plays
   as the envelope opens and the site is revealed */
.hero-photo, .hero-frame, .scroll-cue, .hero-content > *{ animation-play-state:paused; }
html.unlocked .hero-photo,
html.unlocked .hero-frame,
html.unlocked .scroll-cue,
html.unlocked .hero-content > *{ animation-play-state:running; }

/* ============================================================
   PASSWORD GATE / ENVELOPE
   ============================================================ */
/* lock scrolling behind the gate until unlocked */
html:not(.unlocked){ overflow:hidden; }

.gate{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:2rem; overflow:hidden; overscroll-behavior:contain;
  background:#17100a;
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.5,0,.2,1);
}
.gate.revealing{ opacity:0; transform:scale(1.35); pointer-events:none; }
html.skip-gate .gate{ display:none; }

/* same photo world as the hero, so opening zooms straight into the site */
.gate-photo{
  position:absolute; inset:0; z-index:0;
  background:url("images/hero-bg.jpg") center 30%/cover no-repeat;
  transform:scale(1.06); filter:blur(3px);
}
.gate-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(135% 115% at 50% 44%, transparent 20%, rgba(14,9,4,.42) 60%, rgba(9,5,2,.74) 100%),
    linear-gradient(to bottom, rgba(15,9,4,.44) 0%, rgba(15,9,4,.30) 34%, rgba(13,8,3,.42) 66%, rgba(8,5,2,.72) 100%);
}
.gate-frame{
  position:absolute; inset:clamp(14px,4vw,26px); z-index:2; pointer-events:none;
  border:1px solid rgba(255,248,235,.5);
}
.gate-inner{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.8rem,5vw,2.6rem);
  width:100%; max-width:440px; padding:1rem;
}

/* form */
.gate-form{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  width:100%; max-width:360px; text-align:center;
  transition:opacity .5s ease, transform .5s ease;
}
.gate.opening .gate-form{ opacity:0; transform:translateY(8px); pointer-events:none; }
.gate-eyebrow{
  font-size:clamp(1.9rem,8vw,3rem); margin:0; line-height:1.1;
  max-width:100%; text-align:center;
  color:#f8e7bf; text-shadow:0 3px 22px rgba(18,10,3,.55);
}
.gate-field{ display:flex; gap:.6rem; width:100%; }
.gate-field input{
  flex:1; min-width:0; padding:.9em 1.2em; border:1px solid rgba(255,248,235,.35); border-radius:30px;
  background:rgba(253,250,244,.94); color:var(--ink); text-align:center;
  font-family:var(--font-body); font-size:1em; letter-spacing:.04em; outline:none;
  box-shadow:0 10px 28px -16px rgba(0,0,0,.6);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.gate-field input::placeholder{ color:#9a8d78; }
.gate-field input:focus{ border-color:var(--gold-light); box-shadow:0 0 0 3px rgba(238,217,166,.3), 0 10px 28px -16px rgba(0,0,0,.6); }
.gate-field button{
  padding:.85em 1.5em; border-radius:30px; border:1px solid var(--gold-deep);
  background:linear-gradient(155deg,#eed9a6,#d3ac66); color:#3a2a0f;
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:500;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
}
.gate-field button:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(120,90,40,.6); }
.gate-error{ min-height:1.2em; margin:0; color:#f0b6a3; font-family:var(--font-serif); letter-spacing:.03em; font-size:.9em; text-shadow:0 2px 12px rgba(18,10,3,.5); }
.gate.shake .gate-inner{ animation:gateShake .4s ease; }
@keyframes gateShake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }

/* ============================================================
   THE COUPLE
   ============================================================ */
.portrait{
  position:relative; width:min(66vw,250px); margin:0 auto 1.6rem;
  aspect-ratio:1/1; display:grid; place-items:center;
}
.portrait-photo{
  position:absolute; top:9px; left:9px; z-index:2;
  width:calc(100% - 18px); height:calc(100% - 18px);
  border-radius:50%; object-fit:cover; object-position:center 26%;
  box-shadow:inset 0 0 0 1px rgba(150,120,70,.35);
}
.portrait-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--gold);
  box-shadow:inset 0 0 0 6px rgba(216,184,119,.18), var(--shadow);
  background:radial-gradient(circle at 50% 40%, #fffdf8, #f3e9d6);
}
.portrait-ring::before,.portrait-ring::after{
  content:"❦"; position:absolute; left:50%; transform:translateX(-50%);
  color:var(--gold); font-size:1.4rem;
}
.portrait-ring::before{ top:-.9em; }
.portrait-ring::after{ bottom:-.9em; transform:translateX(-50%) rotate(180deg); }

.names{
  display:flex; flex-direction:column; align-items:center; gap:.1em;
  margin:.2em 0 .6em; line-height:1;
}
.names .name-a,.names .name-b{ font-size:clamp(2.4rem,11vw,3.6rem); color:var(--ink); }
.names .amp{ font-size:clamp(2rem,8vw,2.6rem); margin:.05em 0; }
.invite-lead{ color:var(--ink-soft); font-size:1.05em; max-width:24ch; margin:.4em auto 0; }

/* ============================================================
   THE DATE
   ============================================================ */
.date-card{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.big-script{ font-size:clamp(3.4rem,15vw,5.5rem); }
.thank-script{ color:var(--gold-deep); }

.date-line{
  display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,4vw,1.8rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1rem 0; width:100%; max-width:440px;
}
.dl-side{ flex:1; }
.dl-day,.dl-time{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.2em; font-size:.85em; color:var(--ink-soft); }
.dl-center{ display:flex; flex-direction:column; align-items:center; line-height:1; padding:0 .4em; }
.dl-month{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.24em; font-size:.9em; color:var(--gold-deep); }
.dl-num{ font-family:var(--font-serif); font-weight:600; font-size:clamp(2.6rem,12vw,3.6rem); color:var(--ink); }
.dl-year{ font-family:var(--font-serif); letter-spacing:.34em; font-size:.8em; color:var(--ink-soft); }

.venue-name{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.18em; font-size:1.05em; margin:0 0 .3em; }
.venue-addr{ color:var(--ink-soft); margin:0; }

/* countdown */
.countdown{ display:flex; gap:clamp(.6rem,3vw,1.4rem); justify-content:center; margin-top:.4rem; }
.cd-unit{
  min-width:clamp(58px,17vw,78px);
  padding:.8em .4em; border-radius:12px;
  background:linear-gradient(160deg,#fffdf8,#f4ead8);
  box-shadow:0 12px 30px -20px rgba(120,90,50,.6), inset 0 0 0 1px rgba(216,184,119,.35);
  display:flex; flex-direction:column; gap:.2em;
}
.cd-num{ font-family:var(--font-serif); font-weight:600; font-size:clamp(1.5rem,6vw,2rem); color:var(--gold-deep); line-height:1; font-variant-numeric:tabular-nums; }
.cd-lbl{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.18em; font-size:.6rem; color:var(--ink-soft); }
.countdown.done{ font-family:var(--font-script); }
.reception{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.22em; font-size:.82em; color:var(--gold-deep); }

/* ============================================================
   SECTION TITLES (Wedding timeline / the Details)
   ============================================================ */
.section-title{ margin:0 0 2rem; line-height:.9; }
.section-title .serif-caps{ display:block; font-size:clamp(2.2rem,10vw,3.2rem); color:var(--ink); }
.sub-script{ display:block; font-family:var(--font-script); color:var(--gold-deep); font-size:clamp(2.2rem,9vw,3rem); margin-top:-.15em; }
.sub-script.pre{ margin-bottom:-.2em; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{ list-style:none; margin:0 auto; padding:0; max-width:340px; }
.tl-item{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:.9rem; padding:1rem 0; position:relative;
  text-align:left;
}
.tl-item + .tl-item{ border-top:1px solid var(--line); }
.tl-time{
  font-family:var(--font-serif); font-weight:600;
  font-size:1.4em; color:var(--gold-deep);
  min-width:2.6em; text-align:right;
}
.tl-dot{ display:none; }
.tl-label{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.14em; font-size:.95em; }

/* timeline placeholder */
.timeline-tbd{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1rem 0; }
.tbd-mark{
  font-family:var(--font-serif); font-weight:500;
  text-transform:uppercase; letter-spacing:.3em;
  font-size:clamp(2.2rem,10vw,3.2rem); color:var(--gold-deep);
  padding:0 0 .35em; border-bottom:1px solid var(--line);
}
.tbd-note{ margin:0; color:var(--ink-soft); font-size:1.05em; line-height:1.5; }

/* ============================================================
   DETAILS
   ============================================================ */
.detail-block{ margin:0 0 2rem; }
.detail-head{
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.22em;
  font-size:1em; color:var(--gold-deep); margin:0 0 .5em;
  display:inline-block; padding:0 1em .4em; border-bottom:1px solid var(--line);
}
.detail-body{ margin:.4em 0 0; color:var(--ink-soft); }
.detail-note{
  margin:.9em auto 0; max-width:34ch;
  color:var(--ink-soft); font-size:.9em; line-height:1.45; font-style:italic;
}
.promo{
  display:inline-flex; align-items:center; gap:.9em; margin-top:1.1em;
  padding:.7em 1.4em; border:1px solid var(--line); border-radius:40px;
  background:linear-gradient(160deg,#fffdf9,#f6eedf);
  box-shadow:0 10px 26px -18px rgba(120,90,50,.5);
}
.promo-label{
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.22em;
  font-size:.66rem; color:var(--ink-soft);
}
.promo-code{
  font-family:var(--font-serif); font-weight:600; letter-spacing:.16em;
  font-size:1.15em; color:var(--gold-deep);
}
.swatches{ display:flex; gap:.7rem; justify-content:center; margin:.6rem 0; }
.sw{ width:34px; height:34px; border-radius:50%; background:var(--c); box-shadow:0 3px 10px -4px rgba(120,90,50,.5), inset 0 0 0 1px rgba(150,120,70,.3); }
.hearts{ color:var(--gold); letter-spacing:.4em; font-size:1.1em; margin-top:1rem; }

/* ============================================================
   RSVP
   ============================================================ */
.rsvp-card{ max-width:460px; }
.rsvp-mono{ display:flex; flex-direction:column; align-items:center; line-height:.82; margin:.4rem 0; }
.rsvp-mono span{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(3.4rem,17vw,5.4rem);
  letter-spacing:.12em;
  background:linear-gradient(160deg,#e6c982,#a9803f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rsvp-by{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.2em; color:var(--ink-soft); margin:.2em 0 1.8rem; }

.rsvp-form{ display:flex; flex-direction:column; gap:1.4rem; text-align:left; }
.field{ position:relative; }
.field input{
  width:100%; padding:.9em .2em .5em; border:none; border-bottom:1px solid var(--line);
  background:transparent; font-family:var(--font-body); font-size:1em; color:var(--ink);
  outline:none; transition:border-color .3s ease;
}
.field input:focus{ border-color:var(--gold-deep); }
/* only the floating labels (label directly after an input) are absolute */
.field > input + label{
  position:absolute; left:.2em; top:.9em; color:var(--ink-soft);
  font-family:var(--font-serif); letter-spacing:.08em; pointer-events:none;
  transition:.25s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:-.7em; font-size:.7em; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep);
}
.field.choice{ display:flex; flex-direction:column; gap:.6em; }
.choice-lbl{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.16em; font-size:.72em; color:var(--gold-deep); }
.radios{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.radios label{ display:flex; align-items:center; gap:.5em; font-size:.95em; cursor:pointer; }
.radios input{ accent-color:var(--gold-deep); }

.btn{
  margin-top:.6rem; align-self:center;
  padding:.9em 2.4em; border:1px solid var(--gold-deep); border-radius:40px;
  background:transparent; color:var(--gold-deep);
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.22em; font-size:.82em;
  cursor:pointer; transition:.35s ease; position:relative; overflow:hidden;
}
.btn::before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,#e6c982,#a9803f); transform:translateY(101%); transition:transform .35s ease; z-index:-1; }
.btn:hover{ color:#fff; border-color:transparent; }
.btn:hover::before{ transform:translateY(0); }
.btn:disabled{ opacity:.5; cursor:default; }
.rsvp-note{ text-align:center; min-height:1.4em; color:var(--gold-deep); font-family:var(--font-serif); letter-spacing:.06em; }
.rsvp-note.show{ animation:fadeUp .6s ease; }

/* ============================================================
   THANK YOU
   ============================================================ */
.thanks-photo{
  margin:0 auto 1.6rem; width:min(70vw,300px); aspect-ratio:4/5;
  border-radius:150px 150px 16px 16px; overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(216,184,119,.55);
  padding:6px; background:linear-gradient(160deg,#fffdf8,#f4ead8);
}
.thanks-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  display:block; border-radius:144px 144px 12px 12px;
}
.thanks-body{ color:var(--ink-soft); max-width:36ch; margin:1.4rem auto; font-size:1.05em; }
.with-love{ font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.3em; font-size:.72em; color:var(--gold-deep); margin:1.6rem 0 .4rem; }
.names-footer{
  display:flex; flex-direction:column; align-items:center; gap:.15em;
  font-size:clamp(1.4rem,7vw,2rem); color:var(--ink); line-height:1.05;
}
.names-footer .serif-caps{ letter-spacing:.12em; }
.fn-amp{ font-size:1.25em; color:var(--gold-deep); line-height:.8; }

.foot{
  position:absolute; bottom:1.4rem; left:0; right:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  color:var(--ink-soft);
}
.foot p{ margin:0; font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; }

/* ============================================================
   SIDE NAV DOTS
   ============================================================ */
.dots{
  position:fixed; right:clamp(.6rem,2vw,1.4rem); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.9rem; z-index:50;
}
.dot{ width:12px; height:12px; display:grid; place-items:center; position:relative; }
.dot span{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:.3s ease; }
.dot.active span{ background:var(--gold-deep); transform:scale(1.5); }
.dot::after{
  content:attr(data-label);
  position:absolute; right:150%; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.16em;
  font-size:.6rem; color:var(--gold-deep);
  background:rgba(253,250,244,.9); padding:.3em .7em; border-radius:20px;
  opacity:0; pointer-events:none; transition:.25s ease;
}
.dot:hover::after{ opacity:1; }

/* ============================================================
   FLOATING RSVP BUTTON
   ============================================================ */
.fab{
  position:fixed; z-index:60;
  left:calc(clamp(38px,10vw,60px) + env(safe-area-inset-left,0px));
  bottom:calc(clamp(38px,10vw,60px) + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:.7em;
  padding:.9em 1.6em; border-radius:40px;
  background:linear-gradient(155deg,#eed9a6,#d3ac66);
  color:#3a2a0f; text-decoration:none;
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; font-weight:500;
  border:1px solid rgba(120,90,40,.35);
  box-shadow:0 14px 32px -12px rgba(120,90,40,.55), inset 0 1px 0 rgba(255,255,255,.4);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.fab.in{ opacity:1; transform:none; }
.fab.in:hover,.fab.in:focus-visible{ transform:translateY(-3px); box-shadow:0 20px 44px -12px rgba(120,90,40,.65); outline:none; }
.fab-arrow{ font-size:1.05em; line-height:1; transition:transform .3s ease; }
.fab.in:hover .fab-arrow,.fab.in:focus-visible .fab-arrow{ transform:translateX(3px); }
/* hidden while the RSVP section itself is on screen */
.fab.hide{ opacity:0; transform:translateY(18px); pointer-events:none; }

/* ============================================================
   FLOATING PETALS
   ============================================================ */
.petals{ position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.petal{
  position:absolute; top:-6vh;
  width:14px; height:14px;
  background:radial-gradient(circle at 30% 30%, #fffdf8, #f0e2c8 70%, #e4d0a6);
  border-radius:80% 0 55% 50% / 55% 0 80% 50%;
  opacity:.85; will-change:transform;
  animation:fall linear forwards;
}
@keyframes fall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.9; }
  100%{ transform:translateY(108vh) translateX(var(--drift,40px)) rotate(540deg); opacity:0; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* stagger children */
.reveal.in .cd-unit,
.reveal.in .tl-item,
.reveal.in .detail-block{ animation:fadeUp .8s both; }
.reveal.in .tl-item:nth-child(1){ animation-delay:.05s } .reveal.in .tl-item:nth-child(2){ animation-delay:.15s }
.reveal.in .tl-item:nth-child(3){ animation-delay:.25s } .reveal.in .tl-item:nth-child(4){ animation-delay:.35s }
.reveal.in .tl-item:nth-child(5){ animation-delay:.45s }
.reveal.in .detail-block:nth-child(2){ animation-delay:.1s } .reveal.in .detail-block:nth-child(3){ animation-delay:.25s }
.reveal.in .detail-block:nth-child(4){ animation-delay:.4s }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:520px){
  .dots{ gap:.7rem; right:.5rem; }
  .dot::after{ display:none; }
  .date-line{ gap:.5rem; }
}
@media (min-width:820px){
  .section > .reveal{ max-width:680px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .reveal{ opacity:1; transform:none; }
  .petals{ display:none; }
}