:root{
  --bg:#e8ecdf; --paper:#f8f5ec; --ink:#3e4d3e; --deep:#4b6849; --sage:#8fa883; --mist:#d7e0cb; --line:#c9d3bc;
  --script:'Great Vibes','Marck Script',cursive;
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .46 0 0 0 0 .36 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font:300 1.05rem/1.7 'Jost',system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(1200px 600px at 10% -10%,#f1f4e8,transparent 60%),radial-gradient(900px 600px at 100% 100%,#dde6d0,transparent 60%),var(--bg)}
body.locked{overflow:hidden;height:100vh}
.script,h2{font-family:var(--script);font-weight:400}
h2{font-size:clamp(2.6rem,8vw,3.8rem);color:var(--deep);margin:0 0 1.6rem;line-height:1.1}

/* ---------- ENVELOPE ---------- */
#intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  background:radial-gradient(800px 500px at 50% 40%,#f1f4e8,var(--bg));transition:opacity 1.2s ease,visibility 1.2s}
#intro.done{opacity:0;visibility:hidden}
.stage{text-align:center;padding:1rem}
.envelope{--w:min(86vw,440px);position:relative;width:var(--w);aspect-ratio:1011/640;margin:0 auto;perspective:1400px;transition:transform 1.2s ease 1.6s}
.envelope.open{transform:translateY(18vh)}
/* body of the envelope (inside + side/bottom pockets) */
.env-back,.pk{position:absolute;inset:0;background:url(env-body.webp) 0 0/100% 100% no-repeat}
.env-back{filter:drop-shadow(0 20px 22px rgba(60,80,55,.35)) drop-shadow(0 2px 4px rgba(60,80,55,.25))}
.pk{z-index:3;clip-path:polygon(0 0,36% 43%,63% 43%,100% 0,100% 100%,0 100%)}
/* flap: painted front when closed, painted inside when opened */
.flap{position:absolute;left:0;right:0;top:0;height:68%;z-index:5;transform-origin:top;transform-style:preserve-3d}
.flap i{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ff{inset:0;background:url(env-flap-front.webp) 0 0/100% 100% no-repeat;
  clip-path:polygon(0 0,100% 0,100% 6%,80% 47%,60% 87%,50% 99%,40% 80%,20% 44%,0 6%)}
.fb{left:0;right:0;top:0;aspect-ratio:997/378;background:url(env-flap-back.webp) 0 0/100% 100% no-repeat;transform:rotateX(180deg)}
.open .flap{animation:flap 1.1s .6s ease-in-out forwards}
@keyframes flap{0%,49%{transform:rotateX(0);z-index:5}50%,100%{transform:rotateX(180deg);z-index:1}}
.card{position:absolute;left:4%;right:4%;top:6%;bottom:6%;z-index:2;background:url(env-paper.webp) 0 0/100% 100% no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;color:var(--deep);
  filter:drop-shadow(0 2px 5px rgba(60,80,55,.25));transition:transform 1.3s cubic-bezier(.3,.7,.2,1) 1.6s}
.card .script{font-size:clamp(1.8rem,7vw,2.6rem)}
.card small{letter-spacing:.2em;font-size:.85rem}
.open .card{transform:translateY(-62%)}

/* gold wax seal — initials pressed into the wax */
.seal{position:absolute;z-index:6;left:50%;top:62%;width:24%;aspect-ratio:1;translate:-50% -50%;
  background:url(env-seal.webp) center/100% 100% no-repeat;filter:drop-shadow(0 5px 6px rgba(50,60,30,.4));}
.open .seal{animation:crack .9s ease-in forwards}
@keyframes crack{20%{transform:scale(1.08) rotate(-5deg)}55%{opacity:1}100%{transform:translateY(60px) scale(.6) rotate(18deg);opacity:0}}
.env-flowers,.env-flowers2{position:absolute;z-index:7;height:auto;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(50,70,45,.28))}
.env-flowers{width:46%;left:-14%;bottom:-26%;transform:rotate(-8deg)}
.env-flowers2{width:27%;right:-8%;top:-12%;transform:scaleX(-1) rotate(18deg)}
.hint{margin:3.2rem 0 0;font-size:.95rem;letter-spacing:.14em;color:#6f8468;font-style:italic;transition:opacity .5s}
.stage:has(.open) .hint{opacity:0}

/* ---------- PAGE ---------- */
#page{position:relative;z-index:1;overflow-x:clip;opacity:0;transform:translateY(24px);transition:opacity 1.4s ease,transform 1.4s ease}
body:not(.locked) #page{opacity:1;transform:none}
section{max-width:640px;margin:0 auto;padding:4.5rem 1.25rem;text-align:center}

.hero{position:relative;max-width:760px;min-height:92vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-block:11rem}
.hero-text{color:var(--deep);line-height:1.15;position:relative;z-index:1}
.hero-text div:nth-child(1){font-size:clamp(2rem,6vw,2.8rem)}
.hero-text div:nth-child(2){font-size:clamp(3.4rem,14vw,6.2rem);margin:.1em 0 .15em}
.hero-text div:nth-child(3){font-size:clamp(1.8rem,5.6vw,2.6rem)}
.na{position:relative;z-index:1;margin:.6rem 0 0;font-size:clamp(1.8rem,5.6vw,2.6rem);line-height:1.15;color:var(--deep)}
.date{position:relative;z-index:1;margin:.5rem 0 0;font-size:1.5rem;letter-spacing:.28em;font-weight:400}
.fl{position:absolute;width:clamp(150px,36vw,310px);height:auto;pointer-events:none;z-index:0}
.fl.f-tl{top:-1rem;left:-3.5rem;transform:rotate(-12deg)}
.fl.f-tr{top:.5rem;right:-3.5rem;width:clamp(120px,26vw,230px);transform:scaleX(-1) rotate(8deg)}
.fl.f-bl{bottom:.5rem;left:-3.5rem;width:clamp(120px,26vw,230px);transform:rotate(14deg)}
.fl.f-br{bottom:-1rem;right:-3.5rem;transform:scaleX(-1) rotate(-10deg)}

.venue{font-size:1.5rem;font-weight:400;margin:0 0 1.5rem}
.venue-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:999px 999px 14px 14px;
  background:linear-gradient(160deg,#fff,var(--mist));border:6px solid #fff;box-shadow:0 14px 34px -14px rgba(60,80,55,.45);color:#7b8f73;font-size:.9rem}

/* timeline — zig-zag */
.tl{position:relative;list-style:none;margin:0;padding:0}
.tl::before{content:"";position:absolute;left:50%;top:.6rem;bottom:.6rem;width:1px;background:var(--sage)}
.tl li{position:relative;width:50%;padding:.75rem 1.6rem .75rem 0;text-align:right}
.tl li:nth-child(even){margin-left:50%;padding:.75rem 0 .75rem 1.6rem;text-align:left}
.tl li::after{content:"";position:absolute;top:1.15rem;right:-6px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--deep)}
.tl li:nth-child(even)::after{right:auto;left:-6px}
.tl time{display:block;font-weight:500;color:var(--deep);font-size:1.25rem;line-height:1.3}
.tl span{display:block;line-height:1.45;font-weight:400}

/* menu */
.menu{display:grid;gap:1.6rem;padding:2.4rem 1.4rem;background:rgba(255,255,255,.55);border:1px solid var(--line);outline:1px solid var(--line);outline-offset:-9px;border-radius:4px}
.dish{margin:0;font-size:1.2rem;font-weight:400;line-height:1.5}
.course small{display:block;font-style:italic;color:#7b8f73;margin-bottom:.1rem;font-size:.95rem}

/* form */
form{text-align:left;display:grid;gap:1.3rem}
.row{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
label{display:grid;gap:.35rem;font-weight:400}
input[type=text],input[type=tel],input[type=email],select{font:inherit;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:400;padding:0;margin-bottom:.4rem}
.sub{font-size:.85rem;margin:0 0 .6rem;color:#6f8468}
.pills{display:flex;flex-wrap:wrap;gap:.6rem}
.pills.col{flex-direction:column;align-items:stretch}
.pills label{display:block}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:block;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pills input:checked+span{background:var(--deep);border-color:var(--deep);color:#fff}
.pills input:focus-visible+span{outline:2px solid var(--deep);outline-offset:2px}
#extraGuests{display:grid;gap:1rem}
.guest{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:1rem;border-left:2px solid var(--sage);background:rgba(255,255,255,.5);border-radius:0 10px 10px 0}
button[type=submit]{font:500 1.05rem 'Jost',sans-serif;letter-spacing:.12em;padding:.95rem 2.6rem;border:0;border-radius:999px;background:var(--deep);color:#fff;cursor:pointer;justify-self:center;transition:background .2s,transform .2s}
button[type=submit]:hover{background:#3b5439}
#formMsg{text-align:center;margin:0;color:var(--deep);font-weight:400}

/* countdown */
.last{padding-bottom:8rem}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.cd div{background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:12px;padding:1.1rem .3rem}
.cd b{display:block;font-size:clamp(1.8rem,8vw,3rem);font-weight:300;color:var(--deep);line-height:1.1}
.cd span{font-size:.85rem;letter-spacing:.08em}

/* doves */
.dove{position:fixed;left:0;z-index:50;pointer-events:none;width:var(--w,90px);opacity:.85;animation:fly var(--dur,26s) linear forwards}
.dove svg{display:block;width:100%;overflow:visible;filter:drop-shadow(0 3px 3px rgba(70,95,65,.3));animation:bob 3.4s ease-in-out infinite alternate}
.dove .wing{transform-box:fill-box;transform-origin:15% 100%;animation:flap2 .8s ease-in-out infinite alternate}
@keyframes fly{from{transform:translate(-20vw,var(--y,20vh))}to{transform:translate(120vw,calc(var(--y,20vh) + var(--dy,-12vh)))}}
@keyframes bob{to{translate:0 -18px;rotate:-4deg}}
@keyframes flap2{from{transform:rotate(-10deg) scaleY(1)}to{transform:rotate(16deg) scaleY(.5)}}

@media (max-width:480px){
  .tl li{padding-right:1.1rem;font-size:.95rem}.tl li:nth-child(even){padding:.75rem 0 .75rem 1.1rem}
  .cd span{font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  .dove{display:none}
  .open .flap,.open .seal{animation-duration:.01s;animation-delay:0s}
  .card,.envelope,#page{transition-duration:.01s;transition-delay:0s}
  html{scroll-behavior:auto}
}
@media (max-width:600px){
  .fl{width:170px}.fl.f-tr,.fl.f-bl{width:130px}
  .fl.f-tl{left:-1.2rem;top:.5rem}.fl.f-tr{right:-1.2rem}.fl.f-bl{left:-1.2rem}.fl.f-br{right:-1.2rem;bottom:0}
  .hero{padding-block:10rem}
}

/* music button */
#musicBtn{position:fixed;right:1rem;bottom:1rem;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.85);color:var(--deep);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -6px rgba(60,80,55,.45);transition:transform .2s,background .2s}
#musicBtn[hidden]{display:none}
#musicBtn:hover{transform:scale(1.07);background:#fff}
#musicBtn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
#musicBtn .x{display:none}
#musicBtn.off .x{display:block}
#musicBtn.off .w{display:none}

/* language switch */
#langBtn{position:fixed;top:1rem;right:1rem;z-index:110;display:flex;padding:3px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.85);backdrop-filter:blur(4px);cursor:pointer;font:500 .8rem 'Jost',sans-serif;letter-spacing:.08em;
  box-shadow:0 6px 16px -8px rgba(60,80,55,.45)}
#langBtn span{padding:.3rem .65rem;border-radius:999px;color:var(--deep);transition:background .2s,color .2s}
#langBtn span.on{background:var(--deep);color:#fff}
#langBtn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}