:root{
  --burgundy:#7b1730;
  --gold:#b98a37;
  --olive:#4d553f;
  --cream:#fbf5e9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--olive);
  font-family:Georgia,"Times New Roman",serif;
}
.film{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  background:#e7dac4;
  transition:opacity 1.15s ease,visibility 1.15s ease;
}
.scene-main,.scene-overlay{
  position:absolute;
  inset:-3%;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:opacity,transform,filter;
}
.scene-main{
  z-index:1;
  opacity:1;
  transform:scale(1.02);
  transition:
    transform 2.5s cubic-bezier(.2,.75,.2,1),
    filter 1.8s ease;
}
.scene-overlay{
  z-index:2;
  opacity:0;
  transform:scale(1.035);
  transition:
    opacity 1.05s ease,
    transform 1.65s cubic-bezier(.2,.75,.2,1),
    filter 1.4s ease;
  pointer-events:none;
}
.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 48% 43%,transparent 0 38%,rgba(20,10,5,.13) 100%);
}
.mailbox-hit{
  position:absolute;
  left:5%;
  top:43%;
  width:27%;
  height:18%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  z-index:50;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body.focus-mailbox .scene-main{
  transform:scale(1.11) translate(5%,-1%);
}
body.sequence-running .mailbox-hit{
  pointer-events:none;
}

body.soft-focus .scene-main{
  filter:blur(10px) brightness(.78);
}
body.soft-focus .scene-overlay{
  filter:blur(3px) brightness(.9);
}
.paper-screen{
  position:absolute;
  inset:0;
  z-index:20;
  background:
    radial-gradient(circle at 25% 18%,rgba(120,85,35,.035),transparent 26%),
    repeating-linear-gradient(0deg,rgba(100,75,40,.016) 0 1px,transparent 1px 4px),
    #f6ecdc;
  opacity:0;
  transform:scale(.82);
  transition:opacity 1s ease,transform 2s cubic-bezier(.18,.72,.16,1);
  overflow:hidden;
}
body.paper-full .paper-screen{
  opacity:1;
  transform:scale(1);
}
.paper-invitation{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.paper-invitation.faint{
  opacity:.06;
  filter:grayscale(.3) sepia(.2) blur(2px);
}
.paper-invitation.final{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  filter:sepia(.25) saturate(.6) brightness(1.12) blur(1.8px);
}
body.ink-reveal .paper-invitation.final{
  animation:inkReveal 5.5s cubic-bezier(.22,.75,.16,1) forwards;
}
.paper-light{
  position:absolute;
  left:-20%;
  top:8%;
  width:55%;
  height:5px;
  z-index:4;
  opacity:0;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,#e6c573,transparent);
  box-shadow:0 0 14px #e6c573,0 0 32px rgba(230,197,115,.72);
}
body.ink-reveal .paper-light{
  opacity:1;
  animation:lightTravel 5.5s cubic-bezier(.22,.75,.16,1) forwards;
}
@keyframes inkReveal{
  0%{opacity:.05;clip-path:inset(0 0 100% 0);filter:sepia(.3) saturate(.5) brightness(1.15) blur(2px)}
  45%{opacity:.58;filter:sepia(.2) saturate(.72) brightness(1.08) blur(1px)}
  100%{opacity:1;clip-path:inset(0 0 0 0);filter:none}
}
@keyframes lightTravel{
  0%{left:-20%;top:9%;transform:rotate(-5deg)}
  20%{left:58%;top:24%;transform:rotate(6deg)}
  40%{left:8%;top:42%;transform:rotate(-4deg)}
  62%{left:55%;top:61%;transform:rotate(6deg)}
  82%{left:6%;top:78%;transform:rotate(-5deg)}
  100%{left:52%;top:92%;transform:rotate(4deg)}
}
body.film-done .film{
  opacity:0;
  visibility:hidden;
}
main{
  min-height:100vh;
  padding:20px 14px 60px;
  background:#fbf5e9;
}
.site-inner{
  width:min(100%,720px);
  margin:0 auto;
  opacity:0;
  transform:translateY(16px);
  transition:opacity 1.1s ease,transform 1.1s ease;
}
body.film-done .site-inner{
  opacity:1;
  transform:none;
}
.hero-invitation{
  display:block;
  width:100%;
  border-radius:22px;
  box-shadow:0 18px 52px rgba(67,35,20,.18);
  margin-bottom:22px;
}
.details-card{
  background:#fffaf0;
  border:1px solid rgba(185,138,55,.6);
  border-radius:22px;
  padding:28px 18px 32px;
  box-shadow:0 14px 38px rgba(83,39,24,.1);
}
.event-info{
  text-align:center;
  line-height:1.85;
  margin-bottom:24px;
}
.event-info strong{color:var(--burgundy)}
.actions{display:grid;gap:12px}
.action{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border:1px solid var(--gold);
  border-radius:16px;
  color:var(--olive);
  background:#fffdf7;
  text-decoration:none;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.action b{font-size:24px;color:var(--gold)}
form{
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid rgba(185,138,55,.45);
}
form h2{
  text-align:center;
  color:var(--burgundy);
  font-size:18px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
form>label,form>p{
  display:block;
  font-size:13px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
input[type=text]{
  width:100%;
  height:50px;
  padding:0 14px;
  border:1px solid rgba(185,138,55,.75);
  border-radius:14px;
  background:#fffdf7;
  font:inherit;
}
.choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.choices label{position:relative}
.choices input{position:absolute;opacity:0}
.choices span{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(185,138,55,.75);
  border-radius:14px;
  background:#fffdf7;
}
.choices input:checked+span{
  background:var(--burgundy);
  border-color:var(--burgundy);
  color:#fff;
}
form button{
  width:100%;
  height:52px;
  margin-top:16px;
  border:0;
  border-radius:14px;
  background:var(--burgundy);
  color:#fff;
  font:inherit;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Reliable animated courtyard background */
.scene-main{
  position:absolute;
  inset:-3%;
  z-index:1;
  overflow:hidden;
  background:#e7dac4;
  transform:scale(1.02);
  transition:
    transform 2.5s cubic-bezier(.2,.75,.2,1),
    filter 1.8s ease;
  pointer-events:none;
}
.courtyard-fallback,
.courtyard-video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.035);
  transition:
    filter 1.8s ease,
    transform 2.4s cubic-bezier(.2,.75,.2,1),
    opacity .6s ease;
  pointer-events:none;
}
.courtyard-fallback{
  z-index:1;
  opacity:1;
  filter:blur(1.3px) brightness(.95) saturate(.98);
}
.courtyard-video{
  z-index:2;
  opacity:0;
  visibility:visible;
  filter:blur(1.8px) brightness(.94) saturate(.97);
}
body.video-ready .courtyard-video{opacity:1}
body.focus-mailbox .scene-main{transform:scale(1.11) translate(5%,-1%)}
body.focus-mailbox .courtyard-fallback,
body.focus-mailbox .courtyard-video{
  transform:scale(1.075);
  filter:blur(2.4px) brightness(.91) saturate(.96);
}
body.soft-focus .courtyard-fallback,
body.soft-focus .courtyard-video{
  transform:scale(1.11);
  filter:blur(11px) brightness(.76) saturate(.9);
}
.scene-overlay{z-index:4}
.vignette{z-index:6}
.mailbox-hit{
  z-index:60;
  pointer-events:auto;
}
.paper-screen{z-index:70}