/* =======================================================================
   Emma's Quinceañera — invitation
   Palette: sage green · lavender · baby blue   (NO VBunny brand purple)
   ======================================================================= */

:root{
  --sage:        #9caf88;
  --sage-deep:   #6f8767;
  --sage-soft:   #e4ece0;
  --lav:         #c9b8e0;
  --lav-deep:    #8f7bb3;
  --blue:        #b9d4e8;
  --blue-deep:   #7fa9c7;
  --cream:       #fbf8f3;
  --cream-warm:  #f4eee4;
  --ink:         #4a4538;
  --ink-soft:    #7a7363;
  --gold:        #b89b5e;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --script: 'Pinyon Script', cursive;
  --caps:   'Marcellus', 'Cormorant Garamond', serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #fdfbf7 0%, var(--cream) 42%, var(--cream-warm) 100%);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
sup{ font-size:.55em; }
em{ font-style:italic; }

/* fine grain so backgrounds aren't flat ------------------------------------ */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =======================================================================
   PETALS
   ======================================================================= */
.petals{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.petal{
  position:absolute; top:-8vh;
  width:14px; height:14px; border-radius:80% 0 80% 0;
  opacity:.55; filter:blur(.2px);
  animation:fall linear infinite;
}
@keyframes fall{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.5; }
  100%{ transform:translateY(112vh) translateX(40px) rotate(420deg); opacity:0; }
}

/* =======================================================================
   COVER / ENVELOPE
   ======================================================================= */
.cover{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(28px,6vh,54px);
  background:
    radial-gradient(130% 90% at 50% 30%, var(--sage-soft) 0%, #eef2ea 45%, var(--blue) 130%);
  transition:opacity 1s var(--ease), visibility 1s;
  padding:24px;
}
.cover.is-open{ opacity:0; visibility:hidden; pointer-events:none; }

.cover__halo{
  position:absolute; width:min(78vw,420px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(201,184,224,.25) 55%, transparent 72%);
  filter:blur(6px);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{ 50%{ transform:scale(1.08); opacity:.85; } }

.envelope{
  position:relative; z-index:2;
  width:min(80vw,340px); aspect-ratio:7/4.7;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 24px 36px rgba(111,135,103,.34));
  transition:transform .5s var(--ease);
}
.envelope:active{ transform:scale(.98); }
.envelope:focus-visible{ outline:2px solid var(--lav-deep); outline-offset:14px; border-radius:6px; }

.envelope__back,.envelope__front,.envelope__flap{ position:absolute; inset:0; }
.envelope__back{
  background:linear-gradient(150deg, var(--cream) 0%, var(--cream-warm) 100%);
  border-radius:8px;
}
/* front pocket (triangular sides) */
.envelope__front{
  z-index:4; border-radius:8px;
  background:linear-gradient(160deg, #f7f1e7 0%, #efe7d8 100%);
  clip-path:polygon(0 38%, 50% 100%, 100% 38%, 100% 100%, 0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.envelope__front::after{ /* subtle bottom edge sheen */
  content:""; position:absolute; inset:0; border-radius:8px;
  background:linear-gradient(180deg, transparent 60%, rgba(124,143,103,.08));
}
/* the card that slides up out of the pocket */
.envelope__card{
  position:absolute; left:7%; right:7%; top:10%; bottom:8%; z-index:3;
  background:linear-gradient(165deg,#ffffff 0%, #f6f3ee 100%);
  border-radius:5px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  transition:transform 1s var(--ease) .35s;
}
.card-mini{ text-align:center; line-height:1; }
.card-mini__mono{ font-family:var(--script); font-size:46px; color:var(--lav-deep); display:block; }
.card-mini__line{ display:block; width:54px; height:1px; background:var(--gold); margin:8px auto; opacity:.7; }
.card-mini__sub{ font-family:var(--caps); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--sage-deep); }

/* the flap that opens */
.envelope__flap{
  z-index:6; transform-origin:top center;
  background:linear-gradient(155deg, var(--sage) 0%, var(--sage-deep) 100%);
  clip-path:polygon(0 0, 100% 0, 50% 66%);
  border-radius:8px 8px 0 0;
  transition:transform .9s var(--ease), z-index 0s .9s;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.seal{
  position:absolute; left:50%; top:42%; z-index:7;
  width:54px; height:54px; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--lav) 0%, var(--lav-deep) 70%, #6f5c91 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 7px rgba(80,60,110,.45), inset 0 2px 4px rgba(255,255,255,.35);
  transition:opacity .4s ease, transform .5s var(--ease);
}
.seal span{ font-family:var(--script); font-size:28px; color:#fff; transform:translateY(2px); }

/* OPEN animation states */
.envelope.is-opening .envelope__flap{ transform:rotateX(180deg); z-index:1; }
.envelope.is-opening .seal{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
.envelope.is-opening .envelope__card{ transform:translateY(-58%); }

.cover__prompt{ text-align:center; z-index:2; }
.cover__hand{ display:block; font-family:var(--script); font-size:clamp(30px,8vw,44px); color:var(--sage-deep); }
.cover__tap{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px; font-family:var(--caps); font-size:12px; letter-spacing:3.5px;
  text-transform:uppercase; color:var(--lav-deep);
  animation:pulse 2.4s ease-in-out infinite;
}
.cover__tap em{ font-style:normal; }
@keyframes pulse{ 50%{ opacity:.45; } }

/* =======================================================================
   INVITATION
   ======================================================================= */
.invite{
  position:relative; z-index:10;
  max-width:540px; margin:0 auto;
  padding:clamp(40px,9vw,72px) clamp(22px,6vw,40px) 60px;
  opacity:0; visibility:hidden;
  transition:opacity .6s ease;
}
.invite.is-live{ opacity:1; visibility:visible; }

/* reveal-on-open stagger */
.reveal{ opacity:0; transform:translateY(26px); }
.invite.is-live .reveal{
  animation:rise .9s var(--ease) forwards;
}
.invite.is-live .reveal[data-reveal="1"]{ animation-delay:.10s; }
.invite.is-live .reveal[data-reveal="2"]{ animation-delay:.34s; }
.invite.is-live .reveal[data-reveal="3"]{ animation-delay:.56s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---- HERO ---- */
.hero{ text-align:center; }
.hero__frame{
  position:relative; width:clamp(190px,56vw,250px); aspect-ratio:4/5;
  margin:0 auto 26px; border-radius:50% 50% 48% 48%/ 54% 54% 46% 46%;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(111,135,103,.30), 0 0 0 1px rgba(184,155,94,.30);
}
.hero__frame::after{ /* gold inner ring */
  content:""; position:absolute; inset:7px; border-radius:inherit;
  border:1px solid rgba(255,255,255,.55); pointer-events:none; z-index:3;
}
.hero__photo{
  position:absolute; inset:0; background-size:cover;
  background-position:50% 33%;
  transform:scale(1.16);
  animation:slowzoom 16s ease-in-out infinite alternate;
}
@keyframes slowzoom{ to{ transform:scale(1.24); } }
/* soften / vignette the busy backyard background so Emma is the star */
.hero__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(75% 62% at 52% 40%, transparent 38%, rgba(251,248,243,.18) 62%, rgba(156,175,136,.40) 100%),
    linear-gradient(180deg, rgba(185,212,232,.10) 0%, transparent 30%, rgba(124,143,103,.18) 100%);
  backdrop-filter:none;
}
.hero__glow{
  position:absolute; inset:-2px; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 36px 10px rgba(201,184,224,.20);
  border-radius:inherit;
}

.hero__eyebrow{
  font-family:var(--caps); font-size:12px; letter-spacing:5px;
  text-transform:uppercase; color:var(--sage-deep); margin-bottom:4px;
}
.hero__name{
  font-family:var(--script); font-weight:400;
  font-size:clamp(64px,20vw,104px); line-height:.78;
  color:var(--lav-deep);
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.hero__quince{
  font-family:var(--caps); font-size:clamp(26px,8vw,40px);
  letter-spacing:6px; text-transform:uppercase; color:var(--ink);
  margin-top:10px;
}
.hero__sweet{
  font-family:var(--serif); font-style:italic; font-size:17px;
  color:var(--blue-deep); letter-spacing:2px; margin-top:8px;
}

/* ---- divider ---- */
.rule{ display:flex; align-items:center; justify-content:center; margin:30px 0; }
.rule span{ font-size:13px; color:var(--gold); padding:0 14px; }
.rule::before,.rule::after{
  content:""; height:1px; width:64px;
  background:linear-gradient(90deg, transparent, var(--sage) , transparent);
}

/* ---- intro ---- */
.intro{ text-align:center; }
.intro__lead{
  font-family:var(--script); font-size:clamp(27px,7.2vw,37px);
  color:var(--sage-deep); line-height:1.18; margin:0 auto 18px;
  max-width:none; letter-spacing:0;
}
.intro__body{
  font-size:18px; line-height:1.6; color:var(--ink-soft);
  max-width:36ch; margin:0 auto;
}

/* ---- countdown ---- */
.countdown{
  display:flex; justify-content:center; gap:clamp(8px,3.5vw,18px);
  margin:34px 0 8px;
}
.cd__unit{
  flex:1 1 0; max-width:78px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:14px 6px; border-radius:14px;
  background:linear-gradient(165deg, rgba(255,255,255,.7), rgba(228,236,224,.55));
  box-shadow:0 6px 16px rgba(111,135,103,.14), inset 0 1px 0 rgba(255,255,255,.7);
  border:1px solid rgba(156,175,136,.20);
}
.cd__num{
  font-family:var(--caps); font-size:clamp(24px,7vw,32px);
  color:var(--lav-deep); line-height:1; font-variant-numeric:tabular-nums;
}
.cd__label{
  font-family:var(--caps); font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--sage-deep);
}

/* ---- details ---- */
.details{ margin:30px 0 6px; display:flex; flex-direction:column; gap:22px; }
.detail{
  text-align:center; padding:22px 18px; border-radius:18px;
  background:linear-gradient(165deg, rgba(255,255,255,.66), rgba(244,238,228,.5));
  border:1px solid rgba(184,155,94,.18);
  box-shadow:0 8px 22px rgba(111,135,103,.12);
}
.detail__icon{ display:block; font-size:20px; color:var(--gold); margin-bottom:6px; }
.detail__k{
  display:block; font-family:var(--caps); font-size:11px; letter-spacing:4px;
  text-transform:uppercase; color:var(--sage-deep); margin-bottom:8px;
}
.detail__v{ display:block; font-size:23px; color:var(--ink); line-height:1.25; }
.detail__v2{ display:block; font-size:17px; color:var(--ink-soft); margin-top:4px; }
.dress-note{ font-size:16px; max-width:34ch; margin:8px auto 0; line-height:1.5; }

.mapbtn{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:11px 22px; border-radius:999px;
  font-family:var(--caps); font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:#fff; text-decoration:none;
  background:linear-gradient(135deg, var(--blue-deep), var(--sage-deep));
  box-shadow:0 6px 16px rgba(127,169,199,.4);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mapbtn:active{ transform:scale(.96); }
.mapbtn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(127,169,199,.5); }

/* =======================================================================
   RSVP
   ======================================================================= */
.rsvp{ text-align:center; margin-top:6px; }
.rsvp__script{
  font-family:var(--script); font-size:clamp(40px,12vw,56px);
  color:var(--sage-deep); line-height:1;
}
.rsvp__sub{ font-style:italic; color:var(--ink-soft); margin:6px 0 26px; font-size:16px; }

.rsvp__form{ display:flex; flex-direction:column; gap:20px; text-align:left; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field__label{
  font-family:var(--caps); font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--sage-deep); padding-left:2px;
}
.rsvp__form input[type=text],
.rsvp__form select{
  font-family:var(--serif); font-size:19px; color:var(--ink);
  padding:14px 16px; border-radius:12px;
  border:1px solid rgba(156,175,136,.4);
  background:rgba(255,255,255,.8);
  transition:border-color .25s, box-shadow .25s;
  width:100%;
}
.rsvp__form select{ appearance:none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238f7bb3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}
.rsvp__form input:focus,
.rsvp__form select:focus{
  outline:none; border-color:var(--lav-deep);
  box-shadow:0 0 0 3px rgba(201,184,224,.35);
}

/* attending choices */
.choices{ display:flex; gap:12px; }
.choice{ flex:1; position:relative; cursor:pointer; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice__face{
  display:flex; align-items:center; justify-content:center;
  padding:15px 10px; border-radius:12px; text-align:center;
  font-size:18px; color:var(--ink-soft);
  border:1px solid rgba(156,175,136,.4);
  background:rgba(255,255,255,.7);
  transition:all .25s var(--ease);
}
.choice--yes input:checked ~ .choice__face{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--sage), var(--sage-deep));
  box-shadow:0 6px 16px rgba(124,143,103,.4); transform:translateY(-1px);
}
.choice--no input:checked ~ .choice__face{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--blue-deep), var(--lav-deep));
  box-shadow:0 6px 16px rgba(127,169,199,.35); transform:translateY(-1px);
}
.choice input:focus-visible ~ .choice__face{ box-shadow:0 0 0 3px rgba(201,184,224,.45); }

/* party size hides until "yes" */
.field--party{
  max-height:0; opacity:0; overflow:hidden; gap:0;
  transition:max-height .4s var(--ease), opacity .35s ease, gap .4s;
}
.field--party.show{ max-height:120px; opacity:1; gap:8px; }

.rsvp__btn{
  margin-top:6px; padding:16px; border:none; border-radius:999px; cursor:pointer;
  font-family:var(--caps); font-size:14px; letter-spacing:3px; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg, var(--lav-deep) 0%, var(--sage-deep) 100%);
  box-shadow:0 10px 24px rgba(143,123,179,.4);
  transition:transform .25s var(--ease), box-shadow .25s, opacity .25s;
}
.rsvp__btn:active{ transform:scale(.97); }
.rsvp__btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(143,123,179,.5); }
.rsvp__btn:disabled{ opacity:.6; cursor:wait; }

.rsvp__err{
  color:#a85b5b; font-style:italic; font-size:15px; margin-top:4px; text-align:center;
}

/* success */
.rsvp__thanks{ text-align:center; padding:24px 10px; animation:rise .7s var(--ease); }
.rsvp__thanks-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%; font-size:28px; color:#fff; margin-bottom:14px;
  background:linear-gradient(135deg, var(--sage), var(--lav-deep));
  box-shadow:0 8px 20px rgba(143,123,179,.4);
  animation:pop .6s var(--ease);
}
@keyframes pop{ 0%{ transform:scale(0); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.rsvp__thanks-head{ font-family:var(--script); font-size:44px; color:var(--sage-deep); line-height:1; }
.rsvp__thanks-sub{ font-size:18px; color:var(--ink-soft); margin-top:8px; }

/* =======================================================================
   FOOTER + MUSIC
   ======================================================================= */
.foot{ text-align:center; margin-top:46px; }
.foot__verse{
  font-style:italic; font-size:16px; line-height:1.6; color:var(--ink-soft);
  max-width:38ch; margin:0 auto 16px;
}
.foot__sign{ font-family:var(--script); font-size:30px; color:var(--sage-deep); }
.foot__sign span{ color:var(--lav-deep); }
/* cross glyph — typographic (not OS emoji), serif, palette color (VB batch-2 #3) */
.foot__cross{ font-family:var(--serif); font-variant-emoji:text; font-size:.92em; }

/* hero "You're Invited!" headline — replaces the old name/quince lockup (VB batch-2 #1) */
.hero__invited{
  font-family:var(--caps); font-size:clamp(40px,12vw,66px);
  letter-spacing:3px; text-transform:uppercase; color:var(--lav-deep);
  line-height:1; text-shadow:0 2px 0 rgba(255,255,255,.6);
}
/* dress-line sparkle accent — matches the ✦ divider: gold, typographic (VB batch-2 #2) */
.dress-accent{ color:var(--gold); font-size:.9em; padding-left:3px; font-variant-emoji:text; }
/* RSVP limited-seating hint (VB batch-2 #4) */
.field__hint{ display:block; font-size:13px; font-style:italic; color:var(--ink-soft); margin-top:6px; line-height:1.4; }
/* TRAVELING / STAY hotels (VB batch-11) */
.stay{ text-align:center; }
.stay__intro{ font-size:16px; color:var(--ink-soft); line-height:1.5; max-width:30ch; margin:0 auto 16px; }
.stay__hotel{ display:block; text-decoration:none; background:var(--cream-warm); border:1px solid rgba(156,175,136,.30); border-radius:14px; padding:12px 16px; margin:0 auto 10px; max-width:30ch; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.stay__hotel:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(111,135,103,.18); }
.stay__name{ display:block; font-family:var(--serif); font-size:19px; color:var(--sage-deep); font-weight:600; }
.stay__desc{ display:block; font-size:14px; color:var(--ink-soft); margin-top:3px; line-height:1.35; }

.music-toggle{
  position:fixed; right:16px; bottom:16px; z-index:40;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--lav), var(--lav-deep));
  color:#fff; font-size:20px;
  box-shadow:0 6px 16px rgba(143,123,179,.45);
  display:flex; align-items:center; justify-content:center;
}
.music-toggle.is-muted{ background:linear-gradient(135deg,#c9c4bb,#9a9489); }
.music-toggle__on{ animation:spin 4s linear infinite; }
.music-toggle.is-muted .music-toggle__on{ animation:none; opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =======================================================================
   ACCESSIBILITY
   ======================================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}