/* ============================================================
   Gibhai & Sarah — wedding invitation
   ============================================================ */

:root{
  --plum:#5C0A20;
  --plum-deep:#3D0615;
  --cream:#F5EDE1;
  --ivory:#FBF6EE;
  --gold:#C9A227;
  --ink:#2A1118;
  --blush:#E3BFC4;

  --f-script:"Pinyon Script", cursive;
  --f-body:"Cormorant Garamond", Georgia, serif;

  --wrap:34rem;
  --pad:1.6rem;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--plum-deep);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.05rem;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden;height:100%}

img{max-width:100%;display:block}
img.is-missing{display:none}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
  text-align:center;
}

.link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.28)}

/* ------------------------------------------------------------
   Envelope
   ------------------------------------------------------------ */
.envelope{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.4rem;
  background:
    radial-gradient(120% 80% at 50% 30%, #6E122A 0%, #3D0615 60%, #2A0410 100%);
  transition:opacity .9s var(--ease), visibility .9s;
}
.envelope.is-open{opacity:0;visibility:hidden;pointer-events:none}

.envelope__paper{
  position:relative;
  width:min(86vw, 24rem);
  aspect-ratio:5/7;
  perspective:1400px;
}

.envelope__body,
.envelope__flap{
  position:absolute;
  inset:0;
  border-radius:3px;
  background-color:#4E0A1C;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.055) 0 12%, transparent 34%),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.045) 0 10%, transparent 30%),
    radial-gradient(circle at 34% 72%, rgba(255,255,255,.05) 0 13%, transparent 33%),
    radial-gradient(circle at 80% 84%, rgba(255,255,255,.04) 0 11%, transparent 30%),
    radial-gradient(circle at 52% 46%, rgba(255,255,255,.035) 0 16%, transparent 40%),
    linear-gradient(150deg,#6A1226 0%,#4A0818 52%,#360512 100%);
  box-shadow:0 2.4rem 4rem rgba(0,0,0,.55);
}

/* the diagonal side folds */
.envelope__body::before,
.envelope__body::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom right, rgba(255,255,255,.10), transparent 55%);
}
.envelope__body::before{clip-path:polygon(0 0, 50% 46%, 0 100%)}
.envelope__body::after{clip-path:polygon(100% 0, 50% 46%, 100% 100%);background:linear-gradient(to bottom left, rgba(255,255,255,.10), transparent 55%)}

/* bottom fold */
.envelope__paper::after{
  content:"";
  position:absolute;
  inset:0;
  clip-path:polygon(0 100%, 50% 46%, 100% 100%);
  background:linear-gradient(to top, rgba(0,0,0,.28), rgba(255,255,255,.05));
  border-radius:3px;
  pointer-events:none;
  z-index:2;
}

.envelope__flap{
  transform-origin:top center;
  clip-path:polygon(0 0, 100% 0, 50% 54%);
  background-image:linear-gradient(to bottom,#71142B 0%,#521021 70%,#440C1B 100%);
  z-index:3;
  transition:transform 1.15s var(--ease);
}
.is-opening .envelope__flap{transform:rotateX(-172deg)}

.seal{
  position:absolute;
  top:46%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:5.6rem;
  height:5.6rem;
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  background:
    radial-gradient(circle at 34% 30%, #FFFFFF 0%, #EDE4D6 46%, #CBBCA6 100%);
  box-shadow:0 .5rem 1.4rem rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.6);
  animation:sealPulse 3.6s ease-in-out infinite;
}
.seal__ring{
  position:absolute;
  inset:.42rem;
  border-radius:50%;
  border:1px solid rgba(92,10,32,.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.seal__mono{
  font-family:var(--f-script);
  font-size:1.7rem;
  line-height:1;
  color:#5C0A20;
  padding-top:.35rem;
}
.is-opening .seal{
  animation:none;
  transition:transform .6s var(--ease), opacity .6s;
  transform:translate(-50%,-50%) scale(.5);
  opacity:0;
}
@keyframes sealPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.045)}
}

.envelope__hint{
  margin:0;
  color:rgba(245,237,225,.72);
  font-size:.98rem;
  letter-spacing:.09em;
  transition:opacity .4s
}
.is-opening .envelope__hint{opacity:0}

.envelope__flash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 45%, #fff 0%, rgba(255,255,255,.85) 30%, transparent 72%);
  opacity:0;
  pointer-events:none;
}
.is-opening .envelope__flash{animation:flash 1.5s .55s var(--ease) forwards}
@keyframes flash{
  0%{opacity:0;transform:scale(.4)}
  45%{opacity:1;transform:scale(1.35)}
  100%{opacity:0;transform:scale(2)}
}

/* ------------------------------------------------------------
   Sound button
   ------------------------------------------------------------ */
.sound{
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:50;
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  border:1px solid rgba(245,237,225,.45);
  background:rgba(60,6,21,.62);
  backdrop-filter:blur(6px);
  color:var(--cream);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.sound__icon{width:1.15rem;height:1.15rem;fill:currentColor}
.sound__icon--play{display:none}
.sound.is-muted .sound__icon--pause{display:none}
.sound.is-muted .sound__icon--play{display:block}

/* ------------------------------------------------------------
   Site reveal
   ------------------------------------------------------------ */
.site{opacity:0;transition:opacity 1.1s var(--ease)}
.site.is-visible{opacity:1}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(180deg,#8FA8BE 0%,#6E8AA6 42%,#5C0A20 100%);
  color:var(--ivory);
  text-align:center;
}
.hero__media{position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(24,30,44,.34) 0%, rgba(24,30,44,.08) 38%, rgba(61,6,21,.72) 100%);
}
.hero__inner{position:relative;z-index:2;padding:0 var(--pad)}

.hero__kicker{
  font-family:var(--f-script);
  font-size:1.5rem;
  margin:0 0 .1em;
  color:rgba(251,246,238,.92);
}
.hero__date{
  margin:0 0 .5em;
  font-size:1.05rem;
  letter-spacing:.34em;
  text-indent:.34em;
  color:rgba(251,246,238,.85);
}
.hero__names{margin:0;font-weight:400;line-height:1}
.hero__names .script{
  display:block;
  font-family:var(--f-script);
  font-size:clamp(3.4rem,17vw,5.4rem);
  text-shadow:0 .3rem 1.6rem rgba(0,0,0,.4);
}
.hero__names .amp{
  display:block;
  font-size:1rem;
  letter-spacing:.4em;
  text-indent:.4em;
  margin:.15em 0;
  color:rgba(251,246,238,.8);
}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:2.2rem;
  transform:translateX(-50%);
  width:1px;
  height:3rem;
  background:rgba(251,246,238,.35);
  overflow:hidden;
  z-index:2;
}
.hero__scroll span{
  position:absolute;
  inset:0;
  background:rgba(251,246,238,.95);
  animation:scrollLine 2.6s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

/* petals */
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;
  top:-8%;
  width:10px;height:10px;
  border-radius:60% 10% 60% 10%;
  background:rgba(227,191,196,.85);
  opacity:.75;
  animation:fall linear infinite;
}
@keyframes fall{
  0%{transform:translate3d(0,-10vh,0) rotate(0deg)}
  100%{transform:translate3d(6vw,110vh,0) rotate(320deg)}
}

/* ------------------------------------------------------------
   Bands + torn edges
   ------------------------------------------------------------ */
.band{position:relative;padding:5.4rem 0 5rem}
.band--plum{background:var(--plum);color:var(--ivory)}
.band--cream{background:var(--cream);color:var(--ink)}

.tear{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:2.6rem;
  display:block;
}
.tear path,.tear use{fill:currentColor}
.tear--from-dark{color:#5C0A20}
.tear--from-plum{color:var(--plum)}
.tear--from-cream{color:var(--cream)}

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */
.script{font-family:var(--f-script);font-weight:400;line-height:1.15;margin:0 0 1.2rem}
.script--lg{font-size:clamp(2.5rem,11vw,3.4rem)}
.script--md{font-size:clamp(2rem,8.5vw,2.6rem)}
.band--plum .script{color:var(--blush)}
.band--cream .script{color:var(--plum)}
.lead{font-style:italic;font-size:1.15rem}

/* ------------------------------------------------------------
   Countdown
   ------------------------------------------------------------ */
.clock{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:.35rem;
}
.clock__unit{display:flex;flex-direction:column;align-items:center;min-width:3.6rem}
.clock__num{
  font-size:clamp(1.9rem,8.5vw,2.5rem);
  line-height:1.1;
  color:var(--plum);
  font-variant-numeric:tabular-nums;
}
.clock__label{
  font-size:.72rem;
  letter-spacing:.2em;
  text-indent:.2em;
  color:rgba(42,17,24,.6);
  border-top:1px solid rgba(92,10,32,.2);
  padding-top:.35rem;
  margin-top:.3rem;
  width:100%;
}
.clock__sep{font-size:clamp(1.5rem,7vw,2.1rem);color:rgba(92,10,32,.45);line-height:1.35}
.clock__done{margin-top:1.4rem;font-style:italic;color:var(--plum)}

/* ------------------------------------------------------------
   Timeline
   ------------------------------------------------------------ */
.timeline{
  list-style:none;
  margin:2.6rem auto 0;
  padding:0;
  max-width:22rem;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:5.6rem;
  top:.9rem;bottom:.9rem;
  width:1px;
  background:rgba(227,191,196,.4);
}
.timeline__item{
  display:grid;
  grid-template-columns:4.6rem 2rem 1fr;
  align-items:center;
  gap:0;
  padding:.9rem 0;
  text-align:left;
}
.timeline__time{font-size:1.15rem;color:rgba(251,246,238,.92);font-variant-numeric:tabular-nums}
.timeline__dot{
  justify-self:center;
  width:.72rem;height:.72rem;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#E6DACA 70%,#BFAE96);
  box-shadow:0 0 0 4px rgba(92,10,32,1), 0 0 0 5px rgba(227,191,196,.35);
}
.timeline__what{color:rgba(251,246,238,.88)}

/* ------------------------------------------------------------
   Location
   ------------------------------------------------------------ */
.place__name{font-size:1.5rem;color:var(--plum);margin-bottom:.2em}
.place__addr{color:rgba(42,17,24,.75);margin-bottom:1.6rem}

.btn{
  display:inline-block;
  font-family:var(--f-body);
  font-size:.95rem;
  letter-spacing:.18em;
  text-indent:.18em;
  padding:.85rem 2.1rem;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.btn--ghost{border:1px solid rgba(92,10,32,.45);color:var(--plum);background:transparent}
.btn--ghost:hover{background:var(--plum);color:var(--ivory)}
.btn--solid{
  border:1px solid rgba(227,191,196,.6);
  background:transparent;
  color:var(--ivory);
  width:100%;
  max-width:18rem;
  margin-top:.6rem;
}
.btn--solid:hover{background:var(--blush);color:var(--plum)}
.btn[disabled]{opacity:.55;cursor:default}

/* ------------------------------------------------------------
   Photos
   ------------------------------------------------------------ */
.photo{
  margin:2.2rem 0 0;
  background:linear-gradient(135deg,#EADFCF,#D9C9B4);
  border:6px solid var(--ivory);
  box-shadow:0 1rem 2rem rgba(0,0,0,.22);
}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo--wide img{aspect-ratio:3/2}
.photo figcaption{
  padding:.8rem .9rem;
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink);
  background:var(--ivory);
}
.dress__grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:32rem){.dress__grid{grid-template-columns:1fr 1fr;gap:1rem}}

/* ------------------------------------------------------------
   Swatches
   ------------------------------------------------------------ */
.swatches{
  list-style:none;
  margin:1.8rem 0 0;
  padding:0;
  display:flex;
  justify-content:center;
  gap:1.3rem;
  flex-wrap:wrap;
  font-size:.85rem;
  letter-spacing:.06em;
  color:rgba(251,246,238,.82);
}
.swatches li{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.swatch{
  width:2.6rem;height:2.6rem;
  border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 .3rem .7rem rgba(0,0,0,.3);
}

/* ------------------------------------------------------------
   Form
   ------------------------------------------------------------ */
.form{margin-top:2.2rem;text-align:left}
.field{margin-bottom:1.3rem}
.field label,.field legend{
  display:block;
  font-size:.82rem;
  letter-spacing:.14em;
  text-indent:.14em;
  color:rgba(251,246,238,.7);
  margin-bottom:.45rem;
  padding:0;
}
.opt{letter-spacing:0;text-transform:none;opacity:.7}
.field input[type=text],
.field input[type=tel],
.field select,
.field textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:1.05rem;
  color:var(--ivory);
  background:rgba(0,0,0,.16);
  border:1px solid rgba(227,191,196,.35);
  border-radius:2px;
  padding:.75rem .85rem;
  transition:border-color .25s var(--ease);
}
.field textarea{resize:vertical}
.field select{appearance:none}
.field select option{color:#2A1118}
.field :is(input,select,textarea):focus-visible{outline:none;border-color:var(--blush);box-shadow:0 0 0 3px rgba(227,191,196,.22)}
.field.has-error input{border-color:#F2A0A0}

.field--choice{border:0;margin:0 0 1.3rem;padding:0}
.choice{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;cursor:pointer}
.choice input{accent-color:var(--blush);width:1.05rem;height:1.05rem}
.choice span{font-size:1.02rem;letter-spacing:0;color:rgba(251,246,238,.92)}

.form__msg{margin:1rem 0 0;min-height:1.4rem;font-style:italic;color:var(--blush)}
.form__msg.is-error{color:#F6B7B7}
.form.is-sent{text-align:center}

/* ------------------------------------------------------------
   Closing
   ------------------------------------------------------------ */
.closing{
  position:relative;
  min-height:70svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:var(--plum-deep);
  color:var(--ivory);
}
.closing__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closing__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,6,21,.82),rgba(61,6,21,.55))}
.closing__inner{position:relative;z-index:2;padding:4rem var(--pad)}
.closing .script{color:var(--blush)}
.closing__names{font-size:1.1rem;letter-spacing:.22em;text-indent:.22em;margin:0}

/* ------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .petals,.hero__scroll{display:none}
  .seal{animation:none}
  *{scroll-behavior:auto !important}
}