*{box-sizing:border-box}
html.locked,html.locked body{overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:clamp(17px,1.2vw + 12px,20px);line-height:1.55;overflow-x:hidden}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.caps{font-family:var(--f-caps);letter-spacing:.24em;text-transform:uppercase;font-size:.72rem;color:var(--accent)}
.script{font-family:var(--f-script);font-weight:400}
.ar{font-family:"Amiri","Traditional Arabic",serif;direction:rtl;line-height:1.7}
.intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.to{font-family:var(--f-body);font-style:italic;font-size:1.15rem;color:var(--env-ink);margin:0;text-align:center;position:relative;transition:opacity .4s}
.hint{font-family:var(--f-caps);letter-spacing:.3em;font-size:.7rem;color:var(--accent);text-transform:uppercase;animation:pulse 2.4s ease-in-out infinite;margin:0;position:relative;transition:opacity .4s}
@keyframes pulse{50%{opacity:.45}}

/* Envelope (wedding) */
#env{gap:30px;background:var(--env-bg);transition:opacity .9s ease,visibility .9s}
@supports (height:100svh){.envelope{width:min(86vw,480px,calc((100svh - 150px) * 1.5))}}
@media (max-height:500px){#env{gap:18px}}
.envelope-wrap{position:relative;perspective:1600px;transition:transform 1.3s cubic-bezier(.5,0,.3,1) 1.5s}
.envelope-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:-9%;height:12%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);filter:blur(4px);z-index:-1;animation:shadowbreath 6s ease-in-out infinite}
.envelope{position:relative;width:min(86vw,480px,calc((100vh - 150px) * 1.5));aspect-ratio:3/2;perspective:1400px;animation:hover 6s ease-in-out infinite}
@keyframes hover{0%,100%{transform:rotateX(9deg) rotateY(-7deg) translateY(0)}50%{transform:rotateX(4deg) rotateY(7deg) translateY(-10px)}}
@keyframes shadowbreath{50%{transform:scale(.88);opacity:.7}}
.env-back{position:absolute;inset:0;background:var(--env-liner);border-radius:4px;box-shadow:0 30px 60px var(--shadow)}
.letter{position:absolute;left:6%;right:6%;top:6%;bottom:6%;z-index:2;background:var(--letter);border-radius:2px;
  display:flex;flex-direction:column;align-items:center;padding-top:9%;gap:4px;text-align:center;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .75s;box-shadow:0 4px 14px var(--shadow),inset 0 0 0 1px rgba(201,168,98,.5)}
.letter .script{font-size:clamp(1.8rem,7vw,2.7rem);line-height:1.1;color:var(--letter-ink)}
.letter .caps{font-size:.66rem}
.env-front{position:absolute;inset:0;z-index:3;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:4px;background:var(--env-front)}
.env-front::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(0,0,0,.18) 50%,transparent 50.6%),linear-gradient(to top left,transparent 49.6%,rgba(0,0,0,.18) 50%,transparent 50.6%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18))}
.flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:4;transform-origin:top center;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.45,0,.25,1) .15s,z-index 0s linear .6s}
.flap-face,.flap-in{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-face{background:var(--env-flap)}
.flap-face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.22));transition:opacity 1s .15s}
.flap-in{transform:rotateX(180deg);background:var(--env-flap-in);clip-path:polygon(50% 0,100% 100%,0 100%)}
.flap-in::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(0deg,rgba(0,0,0,.18),rgba(217,188,118,.08) 60%,transparent)}
.seal{position:absolute;left:50%;top:60%;z-index:6;transform:translate(-50%,-50%);width:92px;height:92px;border:0;padding:0;background:none;cursor:pointer;
  transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .4s;-webkit-tap-highlight-color:transparent}
.seal svg{width:100%;height:100%;overflow:visible;display:block}
.seal:hover{transform:translate(-50%,-50%) scale(1.06)}
.seal:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}
#env.open .seal{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-12deg);pointer-events:none}
#env.open .envelope{animation:none;transform:none;transition:transform .7s ease}
#env.open .flap{transform:rotateX(180deg);z-index:1}
#env.open .flap-face::after{opacity:0}
#env.open .letter{transform:translateY(-60%) scale(1.04)}
#env.open .envelope-wrap{transform:scale(1.16) translateY(6%)}
#env.open .hint,#env.open .to{opacity:0;animation:none}

/* Door gate (reception): full-height gatefold built from the couple's door design */
#gate{transition:opacity .7s ease,visibility .7s;padding:0}
.gate-bg{position:absolute;inset:0;background:var(--gate-bg);overflow:hidden}
.gate-bg::before{content:"";position:absolute;inset:-5%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 46px,rgba(120,90,60,.05) 64px,rgba(255,255,255,.1) 110px);filter:blur(14px)}
.gate{position:relative;margin:14px 0 50px;height:calc(100vh - 64px);width:min(100vw,calc((100vh - 64px) * .72));perspective:1500px;opacity:0;transition:opacity .6s ease}
@supports (height:100dvh){.gate{height:calc(100dvh - 64px);width:min(100vw,calc((100dvh - 64px) * .72))}}
html.locked:has(#gate) .music{opacity:0;pointer-events:none}
.gate.ready{opacity:1}
#gate.open .gate{opacity:0;transition:opacity .7s ease .95s}
.door{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform 1.7s cubic-bezier(.6,.02,.3,1)}
.door.l{left:0;transform-origin:0 50%}.door.r{right:0;transform-origin:100% 50%}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.front{overflow:hidden;container-type:size;background:linear-gradient(90deg,rgba(255,255,255,0) 72%,rgba(120,90,60,.07)),#fbebe1 url("assets/paper-blush.webp") 0 0/256px 256px}
.door.r .front{background:linear-gradient(270deg,rgba(255,255,255,0) 72%,rgba(120,90,60,.07)),#fbebe1 url("assets/paper-blush.webp") 0 0/256px 256px}
.front::before{content:"";position:absolute;pointer-events:none;inset:4.3cqw;border:1.5px solid #cfa25e}
.door.l .front{box-shadow:inset -1px 0 0 rgba(120,90,60,.4)}.door.r .front{box-shadow:inset 1px 0 0 rgba(255,255,255,.7)}
.art{position:absolute;inset:0}.door.r .art{transform:scaleX(-1)}
.dspray{position:absolute;left:5cqw;top:50%;height:min(91cqh,calc(68cqw * 3.96));width:auto;max-width:none;transform:translateY(-50%)}
.dseal{position:absolute;top:50%;width:38cqw;height:auto;max-width:none;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 6px rgba(110,70,55,.3))}
.door.l .dseal{left:100%}.door.r .dseal{left:0}
.back{transform:rotateY(180deg);background:#fbebe1 url("assets/paper-blush.webp") 0 0/256px 256px}
.back::before{content:"";position:absolute;inset:4%;border:1px solid var(--line)}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.7s;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.door.l .shade{background:linear-gradient(90deg,rgba(70,45,28,0),rgba(70,45,28,.5))}
.door.r .shade{background:linear-gradient(270deg,rgba(70,45,28,0),rgba(70,45,28,.5))}
#gate.unseal:not(.open) .door{transition-duration:.3s}
#gate.unseal .door.l{transform:rotateY(-4deg)}#gate.unseal .door.r{transform:rotateY(4deg)}
#gate.open .door.l{transform:rotateY(-105deg)}#gate.open .door.r{transform:rotateY(105deg)}
#gate.open .shade{opacity:1}
#gate .to,#gate .hint{position:absolute;left:0;right:0;z-index:5;text-align:center;transition:opacity .4s}
#gate .to{bottom:100%;padding-bottom:14px;font-size:1.25rem}
#gate .hint{top:100%;padding-top:17px;color:#9e665c}
#gate.unseal .to,#gate.unseal .hint{opacity:0;animation:none}
.seal-hit{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent}
.seal-hit span{position:absolute;inset:4%;border-radius:50%;animation:sealpulse 2.3s ease-out infinite}
@keyframes sealpulse{0%{box-shadow:0 0 0 0 rgba(255,244,222,.85),0 0 18px 4px rgba(255,236,200,.35)}100%{box-shadow:0 0 0 24px rgba(255,244,222,0),0 0 18px 4px rgba(255,236,200,0)}}
.seal-hit:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#gate.unseal .seal-hit{pointer-events:none}#gate.unseal .seal-hit span{animation:none}
html.locked main,html.locked footer{opacity:0}
main,footer{transition:opacity 1s ease}

/* Desktop side garlands */
.side{position:fixed;top:0;bottom:0;width:clamp(120px,calc((100vw - 1000px)/2 - 24px),230px);display:none;pointer-events:none;z-index:1;opacity:var(--side-op,.9)}
.side svg{width:100%;height:100%}
.side img{position:absolute;top:4vh;height:92vh;width:auto;max-width:none;left:-34px;filter:drop-shadow(0 10px 14px rgba(80,55,35,.18))}
.side.l{left:0}.side.r{right:0;transform:scaleX(-1)}
@media (min-width:1260px){.side{display:block}}

/* Layout */
main{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding-block:clamp(40px,7vw,80px) 96px;overflow-x:clip;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;align-items:center;gap:clamp(64px,10vw,112px)}
main.reveal{animation:arrive 1.6s cubic-bezier(.2,.7,.2,1)}
@keyframes arrive{from{transform:scale(.96) translateY(12px)}}
.narrow{width:100%;max-width:700px}
.stack{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.head h2{font-family:var(--f-script);font-weight:400;font-size:clamp(2.6rem,7vw,3.6rem);line-height:1.1;margin:0;color:var(--head)}
.head .orn{width:150px;height:18px}

/* Arch card */
.arch{position:relative;width:100%;max-width:700px;filter:drop-shadow(0 22px 40px var(--shadow));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.arch-top{position:relative}
.arch-top .shape{display:block;width:100%;aspect-ratio:400/130;margin-bottom:-1px}
.crown{position:absolute;left:25%;right:25%;top:44%;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;z-index:3}
.crown .ar{font-size:clamp(1.15rem,4.2vw,1.9rem)}
.crown small{font-style:italic;font-size:clamp(.66rem,1.8vw,.85rem);opacity:.8;line-height:1.3}
.arch-body{position:relative;background:var(--card);border:1px solid var(--line);border-top:0;padding:clamp(12px,3vw,24px) clamp(24px,8vw,72px) clamp(64px,10vw,96px)}
.arch-body::before{content:"";position:absolute;left:2.5%;right:2.5%;top:-1px;bottom:10px;border:1px solid var(--line2);border-top:0;pointer-events:none}
.arch-body>*:not(.bloom){position:relative;z-index:3}
.bloom{position:absolute;width:clamp(104px,26vw,176px);height:auto;max-width:none;pointer-events:none;z-index:2;
  translate:0 var(--py,0px);transform:rotate(var(--rot,0deg)) scale(var(--fx,1),var(--fy,1));transform-origin:50% 50%;
  filter:drop-shadow(0 8px 9px var(--bloom-shadow));animation:sway 7s ease-in-out infinite}
@keyframes sway{50%{rotate:2deg}}
.bloom.tl{left:-9%;top:24%;--rot:-40deg}
.bloom.tr{right:-9%;top:24%;--rot:40deg;--fx:-1;animation-delay:-3.5s}
.bloom.bl{left:-8%;bottom:-11%;--rot:-140deg;--fx:-1;animation-delay:-2s}
.bloom.br{right:-8%;bottom:-11%;--rot:140deg;animation-delay:-5s}
.mono-wrap{width:clamp(128px,28vw,164px);aspect-ratio:1}
.mono-wrap svg{width:100%;height:100%;overflow:visible;display:block}
.names{font-size:clamp(3.2rem,12vw,5.6rem);line-height:1.05;color:var(--name)}
.amp{font-family:var(--f-script);font-size:2rem;color:var(--accent);line-height:1}
.parents{font-size:1.04rem;text-wrap:balance}
.parents em{display:block;font-size:.92rem;color:var(--muted)}
.lede{font-style:italic;font-size:1.15rem;max-width:32ch;text-wrap:balance;margin:0}
.full{font-family:var(--f-caps);letter-spacing:.12em;font-size:clamp(.9rem,3.2vw,1.12rem);color:var(--name);text-wrap:balance}
.when{font-family:var(--f-caps);color:var(--name);display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:clamp(8px,2.6vw,16px);width:min(100%,400px)}
.when span{letter-spacing:clamp(.08em,.7vw,.18em);font-size:clamp(.74rem,3.3vw,.86rem)}
.when span:first-child{text-align:right;margin-right:calc(-1 * clamp(.08em,.7vw,.18em))}.when span:last-child{text-align:left;margin-right:calc(-1 * clamp(.08em,.7vw,.18em))}
.when b{font-weight:400;font-size:clamp(2.5rem,11vw,3rem);line-height:1;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 clamp(10px,3.4vw,18px)}
.time{font-family:var(--f-caps);letter-spacing:.22em;padding-left:.22em;font-size:1rem;color:var(--name);margin-top:4px}

/* Scratch */
.scratch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative;width:min(100%,460px);aspect-ratio:5/3;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px var(--shadow)}
.scratch .under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px}
.scratch .under b{font-family:var(--f-caps);font-weight:400;font-size:clamp(2.6rem,10vw,3.6rem);line-height:1;color:var(--name)}
.scratch .under .script{font-size:1.7rem;color:var(--accent)}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .9s ease}
.scratch::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;transition:opacity .6s;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:foilsheen 4.5s ease-in-out infinite}
@keyframes foilsheen{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}
.scratch.revealed canvas,.scratch.revealed::after{opacity:0;pointer-events:none}
.textbtn{background:none;border:0;font:inherit;font-size:.9rem;font-style:italic;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
.textbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scratch.revealed + .textbtn{visibility:hidden}

/* Countdown */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,18px);width:min(100%,520px);perspective:700px}
.count div{display:flex;flex-direction:column;align-items:center;gap:6px}
.count b{width:100%;font-family:var(--f-caps);font-weight:400;font-size:clamp(1.6rem,6vw,2.6rem);color:var(--name);font-variant-numeric:tabular-nums;line-height:1;
  padding:clamp(14px,3vw,22px) 0;background:var(--tile);border:1px solid var(--line);border-radius:10px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.08),0 10px 20px var(--shadow);transform-origin:50% 50%}
.count b.flip{animation:flip .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes flip{from{transform:rotateX(75deg);opacity:.35}}
.count small{font-family:var(--f-caps);letter-spacing:.18em;font-size:.62rem;color:var(--muted);text-transform:uppercase}

/* Venue */
.venue{display:grid;grid-template-columns:1fr;gap:20px;width:100%;max-width:960px}
@media (min-width:800px){.venue{grid-template-columns:1.15fr 1fr}}
.map{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--map-bg);min-height:260px;box-shadow:0 18px 40px var(--shadow)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .pill{position:absolute;left:14px;top:14px;font-family:var(--f-caps);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:var(--card);color:var(--name);padding:9px 14px;border-radius:999px;border:1px solid var(--line)}
.map .cap{position:absolute;right:14px;bottom:10px;font-size:.78rem;font-style:italic;color:var(--muted)}
.map:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pin{transform-box:fill-box;transform-origin:50% 100%;animation:bob 2.6s ease-in-out infinite}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 2.6s ease-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes ring{from{transform:scale(.4);opacity:.7}to{transform:scale(2.2);opacity:0}}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(28px,5vw,44px) clamp(20px,4vw,36px);box-shadow:0 18px 40px var(--shadow)}
.vcard h3{font-family:var(--f-script);font-weight:400;font-size:clamp(2.1rem,6vw,2.6rem);line-height:1.15;margin:0;color:var(--name)}
.vcard p{margin:0}
.addr{color:var(--accent);font-weight:500;text-wrap:balance}
.btns{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-caps);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:15px 18px;border-radius:999px;background:var(--btn);color:var(--btn-ink);border:1px solid transparent;transition:filter .2s,transform .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px var(--shadow)}
.btn.ghost{background:none;color:var(--name);border-color:var(--line);box-shadow:none}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.sign{font-family:var(--f-script);font-size:2.2rem;color:var(--name)}
footer{text-align:center;color:var(--muted);font-size:.9rem;position:relative;z-index:2;padding-bottom:40px}

.music{position:fixed;z-index:70;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--card);color:var(--name);border:1px solid var(--line);box-shadow:0 6px 18px var(--shadow)}
.music svg{width:22px;height:22px}
.music .wave{display:none}.music.on .wave{display:block;animation:pulse 1.6s ease-in-out infinite}
.music.on .x{display:none}
.music:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01s!important;transition-delay:0s!important;animation:none!important}}