@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root{
  --bg:#d7d2cc;
  --bg2:#ddd8d2;
  --paper:#fffdf9;
  --paper-soft:#f4eee5;
  --ink:#75624d;
  --text:#8e7e6d;
  --muted:#a89d91;
  --gold:#cca63b;
  --brown:#705b45;
  --shadow:0 18px 38px rgba(69,57,46,.11);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  background:#cbc5bd;
  font-family:"Cormorant Garamond",Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;-webkit-tap-highlight-color:transparent}

/* ===========================
   OPEN SCREEN
   =========================== */
.open-screen{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 16% 47%,rgba(244,241,235,.72),transparent 20%),
    radial-gradient(ellipse at 47% 102%,rgba(203,163,91,.48),transparent 12%),
    radial-gradient(ellipse at 98% 96%,rgba(140,128,106,.28),transparent 11%),
    linear-gradient(180deg,#dad6d0,#d5d0ca);
  transition:opacity .75s ease,visibility .75s ease;
}
.open-screen.is-open{opacity:0;visibility:hidden;pointer-events:none}
.open-blur{display:none}

.seal{
  position:relative;
  z-index:2;
  width:min(42vw,208px);
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#725e4a;
  background:
    repeating-radial-gradient(circle at 25% 25%,rgba(105,91,72,.028) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 35% 25%,#fff,#fbf8f2 61%,#efe9e1);
  box-shadow:
    0 22px 34px rgba(62,52,43,.25),
    inset 0 0 0 1px rgba(255,255,255,.85);
  animation:float 3.5s ease-in-out infinite;
}
.seal-lines{
  position:absolute;
  inset:5%;
  width:90%;
  height:90%;
  fill:none;
  stroke:#c9a236;
  stroke-width:1.25;
  opacity:.9;
}
.seal-name{position:relative;font-size:29px;line-height:.93;font-weight:400;letter-spacing:.02em}
.seal-amp{position:relative;color:var(--gold);font-size:29px;line-height:1;font-style:italic}
.seal-open{position:relative;margin-top:13px;padding-left:.44em;font-size:10px;letter-spacing:.44em;color:#978879}
@keyframes float{50%{transform:translateY(-5px)}}

/* ===========================
   PAGE + BACKGROUND
   =========================== */
.page{
  position:relative;
  width:min(100%,560px);
  min-height:100vh;
  margin:0 auto;
  overflow:hidden;
  padding-bottom:120px;
  background:
    linear-gradient(180deg,#dad5cf 0%,#d6d1cb 49%,#dcd7d1 100%);
  box-shadow:0 0 55px rgba(58,48,39,.12);
}
.page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  background:
    radial-gradient(circle,rgba(255,255,255,.85) 0 1.2px,transparent 1.8px);
  background-size:42px 56px;
}



.section{position:relative;z-index:3}
.particles{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ===========================
   FLORAL DECORATION
   Soft masks eliminate the rectangular crop edges
   =========================== */
.floral{
  position:absolute;
  z-index:2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:.78;
  filter:saturate(.72) brightness(1.035) contrast(.94) drop-shadow(0 7px 7px rgba(72,63,54,.06));
}

.floral-one{
  left:-2px;
  top:0;
  width:142px;
  height:650px;
  background-image:url("assets/floral-left.png");
  -webkit-mask-image:linear-gradient(to right,#000 0 58%,rgba(0,0,0,.92) 68%,rgba(0,0,0,.52) 82%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0 58%,rgba(0,0,0,.92) 68%,rgba(0,0,0,.52) 82%,transparent 100%);
}

.floral-two{
  right:-2px;
  top:575px;
  width:136px;
  height:295px;
  background-image:url("assets/floral-right.png");
  -webkit-mask-image:linear-gradient(to left,#000 0 58%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.5) 84%,transparent 100%);
  mask-image:linear-gradient(to left,#000 0 58%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.5) 84%,transparent 100%);
}

.floral-three{
  left:-4px;
  top:1840px;
  width:124px;
  height:270px;
  background-image:url("assets/floral-right.png");
  transform:scaleX(-1);
  opacity:.54;
  -webkit-mask-image:linear-gradient(to right,#000 0 55%,rgba(0,0,0,.75) 73%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0 55%,rgba(0,0,0,.75) 73%,transparent 100%);
}

/* ===========================
   HERO
   =========================== */
.hero{
  min-height:100svh;
  padding:190px 28px 54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.eyebrow,.section-title,.small-label{
  margin:0;
  text-transform:uppercase;
  font-weight:300;
}
.eyebrow{
  color:#a59687;
  font-size:13px;
  line-height:1;
  letter-spacing:.30em;
  padding-left:.30em;
  white-space:nowrap;
}
.script-name{
  margin:34px 0 0;
  font-family:"Italianno","Cormorant Garamond",cursive;
  font-size:88px;
  line-height:.63;
  font-weight:400;
  color:var(--brown);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.gold-amp{
  margin:25px 0 10px;
  color:var(--gold);
  font-size:34px;
  line-height:1;
  font-style:italic;
  font-weight:300;
}
.ornament{
  margin:34px 0 20px;
  color:var(--gold);
  font-size:12px;
}
.hero-date{
  margin:0;
  color:#8f7e6d;
  font-size:23px;
  line-height:1.25;
  font-weight:300;
  letter-spacing:.055em;
}
.hero-time{
  margin:8px 0 0;
  color:#988979;
  font-size:22px;
  font-weight:300;
  letter-spacing:.12em;
}

/* ===========================
   INVITATION CARD
   =========================== */
.invite-card{
  width:calc(100% - 58px);
  margin:42px auto 96px;
  padding:84px 27px 54px;
  text-align:center;
  border-radius:34px;
  background:rgba(255,253,250,.96);
  box-shadow:var(--shadow);
}

.rings{
  position:absolute;
  top:-70px;
  left:50%;
  width:170px;
  height:100px;
  transform:translateX(-50%);
  background:url("assets/rings.png") center/contain no-repeat;
  filter:drop-shadow(0 7px 8px rgba(91,63,29,.18));
}

.rings span{display:none}

.small-label{
  color:var(--gold);
  font-size:11px;
  letter-spacing:.31em;
  padding-left:.31em;
}
.invite-card h2{
  margin:25px auto 25px;
  max-width:395px;
  color:#7b6853;
  font-size:33px;
  line-height:1.19;
  font-weight:300;
  letter-spacing:.008em;
}
.divider{
  width:76px;
  height:1px;
  margin:29px auto;
  background:linear-gradient(90deg,transparent,#d5b65b,transparent);
}
.names-serif{
  margin:0;
  color:#78644f;
  font-size:39px;
  font-weight:300;
  letter-spacing:.02em;
}
.names-serif b{font-weight:300;color:var(--gold)}

/* ===========================
   LOCATION
   =========================== */
.location-section{padding:64px 28px 90px;text-align:center}
.section-title{
  margin-bottom:40px;
  padding-left:.27em;
  color:#a19587;
  font-size:40px;
  line-height:1.1;
  letter-spacing:.27em;
}
.location-section>h2{
  margin:0;
  color:#c8a33d;
  font-size:31px;
  font-weight:400;
  letter-spacing:.07em;
}
.address{
  max-width:430px;
  margin:29px auto 53px;
  color:#918474;
  font-size:19px;
  line-height:1.48;
  font-weight:300;
  letter-spacing:.03em;
}

.calendar-card{
  position:relative;
  width:min(100%,345px);
  margin:0 auto 28px;
  border-radius:24px;
  overflow:visible;
  background:#fffdfa;
  box-shadow:var(--shadow);
}
.calendar-card::before{
  content:"";
  position:absolute;
  top:-23px;
  left:50%;
  width:54px;
  height:27px;
  transform:translateX(-50%);
  border-radius:8px 8px 0 0;
  background:#30251d;
}
.calendar-head{
  min-height:63px;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  align-items:center;
  border-radius:24px 24px 0 0;
  background:#745e46;
  color:#fffaf4;
}
.calendar-head span{font-size:11px;letter-spacing:.21em}
.calendar-head strong{font-size:27px;font-weight:300;letter-spacing:.13em}
.calendar-body{padding:38px 20px 30px}
.big-day{color:#745f49;font-size:118px;line-height:.78;font-weight:300}
.weekday{margin-top:25px;padding-left:.28em;color:#a79b8e;font-size:14px;letter-spacing:.28em}
.time{margin-top:14px;color:#735f49;font-size:27px;font-weight:300}

.pill-button{
  min-height:58px;
  padding:0 28px;
  border:1px solid rgba(204,166,59,.32);
  border-radius:999px;
  cursor:pointer;
  color:#897a69;
  background:rgba(255,253,249,.94);
  box-shadow:0 9px 23px rgba(65,55,45,.07);
  letter-spacing:.11em;
}
.pin-icon{margin-right:10px;color:var(--gold);font-size:21px}

/* ===========================
   COUNTDOWN
   =========================== */
.countdown-card{
  width:calc(100% - 58px);
  margin:18px auto 96px;
  padding:46px 17px 39px;
  text-align:center;
  border-radius:34px;
  background:rgba(255,253,250,.96);
  box-shadow:var(--shadow);
}
.countdown-card .section-title{margin-bottom:34px;font-size:34px}
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.count-box{
  min-width:0;
  padding:20px 3px 18px;
  border-radius:17px;
  background:#e8e2da;
}
.count-box strong{display:block;color:#7d6954;font-size:39px;line-height:1;font-weight:300}
.count-box span{display:block;margin-top:8px;color:#a49789;font-size:10px;letter-spacing:.13em}

/* ===========================
   DETAILS
   =========================== */
.details{padding:31px 28px 115px}
.details .section-title{text-align:center;line-height:1.4}
.detail-card{
  display:flex;
  align-items:center;
  gap:17px;
  margin:18px 0;
  padding:21px;
  border-radius:26px;
  background:rgba(255,253,250,.96);
  box-shadow:0 11px 27px rgba(65,55,44,.07);
}
.detail-icon{
  width:55px;
  height:55px;
  min-width:55px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--gold);
  background:#ece6dd;
  font-size:27px;
}
.detail-card strong{display:block;color:#7c6954;font-size:22px;font-weight:400}
.detail-card span{display:block;margin-top:4px;color:#a19486;font-size:15px;line-height:1.3}

/* ===========================
   FOOTER + DOCK
   =========================== */
footer{
  position:relative;
  z-index:3;
  padding:15px 20px 58px;
  text-align:center;
  color:#9c8e80;
}
.footer-monogram{color:#7c6954;font-size:37px;font-weight:300}
.footer-monogram span{color:var(--gold)}
footer p{font-size:13px;letter-spacing:.12em}

.bottom-dock{
  position:fixed;
  z-index:30;
  left:50%;
  bottom:max(13px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100% - 42px),505px);
  min-height:76px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.8);
  border-radius:27px;
  background:rgba(241,234,224,.95);
  box-shadow:0 16px 35px rgba(68,57,46,.16);
  backdrop-filter:blur(14px);
}
.bottom-dock button{border:0;cursor:pointer;color:#918371;background:transparent}
.bottom-dock button:first-child{border-right:1px solid rgba(116,99,78,.08)}
.bottom-dock button span{display:block;color:var(--gold);font-size:22px;line-height:1}
.bottom-dock button small{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em}

.toast{
  position:fixed;
  z-index:50;
  left:50%;
  bottom:102px;
  width:max-content;
  max-width:calc(100% - 48px);
  padding:10px 15px;
  border-radius:999px;
  color:#fff;
  background:rgba(80,67,54,.94);
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,14px);
  transition:.25s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.spark{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 9px rgba(255,255,255,.82);
  opacity:var(--op);
  animation:drift var(--dur) ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(.65);opacity:.18}
  50%{transform:translate3d(var(--dx),-25px,0) scale(1.18);opacity:var(--op)}
}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:390px){
  .hero{padding-top:170px;padding-bottom:48px}
  .eyebrow{font-size:11px;letter-spacing:.245em;padding-left:.245em}
  .script-name{font-size:82px}
  .floral-one{width:128px;height:585px}
  .floral-two{top:535px;width:122px;height:264px}
  .section-title{font-size:35px}
  .countdown-card .section-title{font-size:30px}
  .count-grid{gap:6px}
  .count-box strong{font-size:34px}
  .detail-card{padding:18px}
  .detail-card strong{font-size:20px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}