:root{
  --burgundy:#70182e;
  --gold:#b68a3b;
  --cream:#fbf4e7;
  --paper:#f7eddd;
  --ink:#514a3f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
}
body.locked{overflow:hidden}
button,a,input{font:inherit}

/* INTRO */
.intro{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  background:#eadcc4;
  transition:opacity 1s ease,visibility 1s ease;
}
.courtyard{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1);
  transition:transform 2.6s cubic-bezier(.18,.72,.16,1),filter 1.6s ease;
}
.intro.focus .courtyard{
  transform:scale(1.045) translate(1.5%,-.5%);
  filter:brightness(.96);
}
.intro.paper-mode .courtyard{
  transform:scale(1.075);
  filter:blur(6px) brightness(.84) saturate(.94);
}
.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 48% 45%,transparent 0 43%,rgba(40,20,8,.10) 100%),
    linear-gradient(to bottom,rgba(255,255,255,.015),rgba(52,31,16,.035));
}

/* MAILBOX HINT */
.mailbox-hit{
  position:absolute;
  left:5%;
  top:41%;
  width:28%;
  height:21%;
  z-index:30;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.mailbox-shine{
  position:absolute;
  left:8%;
  top:46%;
  width:18%;
  height:11%;
  z-index:20;
  overflow:hidden;
  border-radius:18px;
  pointer-events:none;
}
.mailbox-shine::before{
  content:"";
  position:absolute;
  top:-35%;
  left:-90%;
  width:50%;
  height:170%;
  transform:rotate(17deg);
  background:linear-gradient(90deg,transparent,rgba(255,246,204,.82),transparent);
  filter:blur(2px);
  animation:mailShine 5.4s ease-in-out infinite;
}
@keyframes mailShine{
  0%,58%,100%{left:-90%;opacity:0}
  67%{opacity:.72}
  82%{left:145%;opacity:0}
}
.intro.started .mailbox-shine{opacity:0;transition:opacity .35s ease}

/* ENVELOPE */
.envelope{
  position:absolute;
  left:15%;
  top:54%;
  width:min(64vw,390px);
  aspect-ratio:1.38;
  z-index:40;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,35%) scale(.5) rotate(-5deg);
  perspective:1600px;
  transition:
    left 2s cubic-bezier(.18,.78,.18,1),
    top 2s cubic-bezier(.18,.78,.18,1),
    transform 2s cubic-bezier(.18,.78,.18,1),
    opacity .7s ease;
}
.env-back,.env-front,.env-flap,.env-card-slot{
  position:absolute;
  inset:0;
}
.env-back{
  background:#eadcc7;
  border:1px solid rgba(135,100,54,.28);
  box-shadow:0 24px 58px rgba(58,35,18,.32);
}
.env-card-slot{
  inset:8% 8% 18%;
  background:#f5ead8;
  border:1px solid rgba(130,95,45,.14);
}
.env-front{
  z-index:3;
  clip-path:polygon(0 35%,50% 72%,100% 35%,100% 100%,0 100%);
  background:
    linear-gradient(145deg,rgba(255,255,255,.28),transparent 48%),
    #eadcc7;
}
.env-flap{
  z-index:4;
  height:58%;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:
    linear-gradient(145deg,rgba(255,255,255,.34),transparent 48%),
    #f6ebda;
  transform-origin:top center;
  transition:transform 1.25s cubic-bezier(.2,.8,.2,1);
}
.intro.envelope-in .envelope{
  left:50%;
  top:62%;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(.96) rotate(0);
}
.intro.envelope-open .env-flap{transform:rotateX(178deg)}

/* PAPER */
.paper-stage{
  position:absolute;
  left:50%;
  top:62%;
  width:min(75vw,450px);
  height:min(60vh,660px);
  z-index:50;
  opacity:0;
  perspective:2000px;
  transform:translate(-50%,18%) scale(.62);
  transition:
    top 2.1s cubic-bezier(.18,.78,.18,1),
    transform 2.1s cubic-bezier(.18,.78,.18,1),
    opacity .7s ease,
    width 2.6s cubic-bezier(.16,.74,.16,1),
    height 2.6s cubic-bezier(.16,.74,.16,1);
}
.paper-core{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 18%,rgba(120,90,45,.04),transparent 25%),
    repeating-linear-gradient(0deg,rgba(105,78,42,.017) 0 1px,transparent 1px 4px),
    var(--paper);
  border:1px solid rgba(140,104,56,.2);
  box-shadow:0 30px 75px rgba(45,25,12,.36);
}
.fold{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  z-index:8;
  backface-visibility:hidden;
  background:
    radial-gradient(circle at 30% 20%,rgba(125,95,54,.03),transparent 25%),
    repeating-linear-gradient(0deg,rgba(110,85,50,.017) 0 1px,transparent 1px 4px),
    #f3e7d4;
}
.fold-top{
  top:0;
  transform-origin:bottom center;
  transform:rotateX(178deg);
  transition:transform 2.15s cubic-bezier(.16,.74,.16,1);
}
.fold-bottom{
  bottom:0;
  transform-origin:top center;
  transform:rotateX(-178deg);
  transition:transform 2.15s cubic-bezier(.16,.74,.16,1) .22s;
}
.intro.paper-out .paper-stage{
  top:46%;
  opacity:1;
  transform:translate(-50%,-50%) scale(.9);
}
.intro.paper-mode .paper-stage{
  top:50%;
  width:100vw;
  height:100svh;
  transform:translate(-50%,-50%) scale(1);
}
.intro.paper-mode .fold-top,
.intro.paper-mode .fold-bottom{
  transform:rotateX(0);
}

/* INVITATION REVEAL */
.invite-faint,.invite-final{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.invite-faint{
  opacity:.035;
  filter:grayscale(.35) sepia(.2) blur(1.6px);
}
.invite-final{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  filter:sepia(.26) saturate(.62) brightness(1.12) blur(1.7px);
}
.intro.ink .invite-final{
  animation:inkReveal 5.2s cubic-bezier(.22,.75,.16,1) forwards;
}
.light-trace{
  position:absolute;
  left:-25%;
  top:8%;
  width:55%;
  height:5px;
  z-index:12;
  opacity:0;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,#e7c875,transparent);
  box-shadow:0 0 13px #e7c875,0 0 30px rgba(231,200,117,.7);
}
.intro.ink .light-trace{
  opacity:1;
  animation:lightTravel 5.2s cubic-bezier(.22,.75,.16,1) forwards;
}
@keyframes inkReveal{
  0%{
    opacity:.04;
    clip-path:inset(0 0 100% 0);
    filter:sepia(.32) saturate(.5) brightness(1.16) blur(2px);
  }
  45%{
    opacity:.58;
    filter:sepia(.22) saturate(.75) brightness(1.08) blur(1px);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0);
    filter:none;
  }
}
@keyframes lightTravel{
  0%{left:-25%;top:8%;transform:rotate(-5deg)}
  20%{left:55%;top:24%;transform:rotate(6deg)}
  40%{left:5%;top:42%;transform:rotate(-4deg)}
  62%{left:54%;top:61%;transform:rotate(6deg)}
  82%{left:4%;top:79%;transform:rotate(-5deg)}
  100%{left:52%;top:92%;transform:rotate(4deg)}
}
.intro.done{opacity:0;visibility:hidden}

/* MAIN */
main{
  width:min(100%,760px);
  margin:auto;
  padding:0 0 calc(96px + env(safe-area-inset-bottom));
}
.hero{
  width:100%;
  display:block;
  min-height:100svh;
  object-fit:cover;
  object-position:center top;
  opacity:0;
  transform:scale(.99);
  transition:opacity 1s ease,transform 1s ease;
}
body.ready .hero{opacity:1;transform:scale(1)}

/* ACTION BAR */
.action-bar{
  position:fixed;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:60;
  width:min(calc(100% - 24px),680px);
  transform:translate(-50%,20px);
  opacity:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:8px;
  border:1px solid rgba(182,138,59,.45);
  border-radius:20px;
  background:rgba(255,249,238,.92);
  box-shadow:0 16px 45px rgba(65,36,19,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:opacity .8s ease,transform .8s ease;
}
body.ready .action-bar{opacity:1;transform:translate(-50%,0)}
.action-bar a,.action-bar button{
  min-height:56px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#62563e;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:11px;
  letter-spacing:.04em;
  text-align:center;
  cursor:pointer;
}
.action-bar svg{width:22px;height:22px;color:var(--gold)}

/* RSVP */
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:end center;
  padding:18px;
  background:rgba(37,25,17,.42);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  width:min(100%,560px);
  border-radius:24px;
  background:#fffaf0;
  border:1px solid rgba(182,138,59,.55);
  box-shadow:0 24px 70px rgba(35,20,12,.28);
  padding:24px 18px 20px;
  transform:translateY(30px);
  transition:transform .35s ease;
}
.modal.open .modal-card{transform:none}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.modal h2{margin:0;color:var(--burgundy);font-size:19px;font-weight:500}
.close{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#f2e6d3;
  color:#685d4a;
  font-size:22px;
}
.field-label{
  display:block;
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
input[type=text]{
  width:100%;
  height:50px;
  border:1px solid rgba(182,138,59,.65);
  border-radius:14px;
  background:#fffdf7;
  padding:0 14px;
}
.answers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.answers label{position:relative}
.answers input{position:absolute;opacity:0}
.answers span{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(182,138,59,.65);
  border-radius:14px;
  background:#fffdf7;
}
.answers input:checked+span{
  background:var(--burgundy);
  border-color:var(--burgundy);
  color:#fff;
}
.submit{
  width:100%;
  height:52px;
  margin-top:14px;
  border:0;
  border-radius:14px;
  background:var(--burgundy);
  color:#fff;
  letter-spacing:.07em;
  text-transform:uppercase;
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}