:root{
  color-scheme:light;--paper:#f4efe5;--ink:#62533b;--gold:#a18a59;--faint:#c0ad88;
  --px:0px;--py:0px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:"Cormorant Garamond",Georgia,serif;background:var(--paper);color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100svh;overflow-x:hidden;background:var(--paper)}
button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:1px solid #826d43;outline-offset:7px}
button:disabled{cursor:default}
.outside-palace{position:fixed;inset:-35px;z-index:0;background:linear-gradient(#f4efe5a8,#f4efe5cf),url("assets/palace.webp") center/cover;filter:blur(17px);opacity:.72;pointer-events:none}
.stage{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,calc(100svh * .79));height:100svh;min-height:600px;max-width:790px;margin:0 auto;overflow:hidden;background:#f4eee2;box-shadow:0 0 90px #6552370c}
.architecture{position:absolute;inset:-4% -5%;z-index:-5;overflow:hidden;transform:translate3d(calc(var(--px) * -.55),calc(var(--py) * -.55),0);transition:transform 1.8s cubic-bezier(.2,.65,.2,1)}
.palace{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform-origin:50% 28%;animation:palaceJourney 27s cubic-bezier(.35,0,.4,1) infinite alternate;will-change:transform}
.paper-light{position:absolute;inset:0;z-index:-3;pointer-events:none;background:linear-gradient(180deg,#f7f2e808 0%,transparent 18%,#f8f3e414 50%,#f7f2e852 88%,#f3ede48c 100%)}
.daylight{position:absolute;z-index:-4;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 10% 7%,#fffbedba 0%,#fff8da25 29%,transparent 64%);mix-blend-mode:screen;animation:daylightBreathe 13s ease-in-out infinite alternate}
.sunbeams{position:absolute;inset:0;z-index:-2;pointer-events:none;filter:blur(11px);animation:sunDrift 24s ease-in-out infinite alternate;transform-origin:0 0;mix-blend-mode:screen}
.sunbeams i{position:absolute;top:-17%;left:-28%;width:46%;height:128%;transform:rotate(-32deg);transform-origin:50% 0;background:linear-gradient(90deg,transparent,#fff5c76b 48%,transparent);opacity:.33}
.sunbeams i:nth-child(2){left:-3%;width:14%;opacity:.32}
.sunbeams i:nth-child(3){left:22%;width:20%;opacity:.22}
.fine-frame{position:absolute;inset:19px;z-index:9;border:1px solid #aa906140;pointer-events:none}
.fine-frame::after{content:"";position:absolute;inset:4px;border:1px solid #b2a07d20}
.cover{position:absolute;inset:0;z-index:6;text-align:center;opacity:1}
.cover-heading{position:absolute;top:22%;inset-inline:12%;text-shadow:0 2px 28px #fff9e9}
.eyebrow{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(14px,3.5cqw,21px);font-weight:500;text-transform:uppercase;letter-spacing:.25em;line-height:1.6;margin:0;color:#796745}
.cover-name{font-family:"Kapakana","Times New Roman",serif;font-size:clamp(68px,18cqw,128px);font-weight:400;line-height:1.23;margin:7px 0 0;color:#776443}
.envelope-travel{position:absolute;inset:38% 5% auto;transform-origin:50% 52%}
.envelope-float{animation:envelopeFloat 7.5s ease-in-out infinite;transform-origin:50% 50%;will-change:transform}
.envelope{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 22px 19px #74644d20);transition:filter .6s}
.envelope:hover{filter:drop-shadow(0 27px 25px #74644d32)}
.envelope:focus-visible{border-radius:12px;outline-offset:-15px}
.envelope img{display:block;width:100%;height:auto;max-height:39svh;object-fit:contain}
.seal-gleam{position:absolute;inset:39% 37% 25%;border-radius:50%;background:radial-gradient(ellipse,#fff8d454,transparent 65%);mix-blend-mode:screen;pointer-events:none;animation:sealGlow 5s ease-in-out infinite}
.open-prompt{position:absolute;top:81%;inset-inline:9%;display:flex;align-items:center;flex-direction:column;gap:8px;text-shadow:0 1px 18px #fff8e8}
.open-prompt>span:first-child{font-family:"Amiri",serif;font-size:clamp(20px,4.5cqw,27px);line-height:1.8;color:#6e6047}
.open-prompt>span:last-child{font-size:clamp(14px,3.1cqw,18px);font-style:italic;color:#897958;letter-spacing:.015em;line-height:1.5}
.invitation-copy{position:absolute;top:31.5%;inset-inline:10%;z-index:5;text-align:center;opacity:0;visibility:hidden;outline:none;pointer-events:none;filter:drop-shadow(0 1px 7px #fff8e0)}
.invitation-copy::before{content:"";position:absolute;inset:-25% -20% -21%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#f8f3e6c9 0%,#f8f3e689 35%,#f8f3e636 55%,transparent 72%)}
.invitation-copy .eyebrow{font-size:clamp(14px,3.1cqw,18px);letter-spacing:.26em;margin-bottom:5cqw}
.arabic-name{font-family:"Amiri",serif;font-size:clamp(36px,10cqw,68px);font-weight:400;line-height:1.85;margin:0 0 -1.7cqw;color:#796544}
.signature{font-family:"Kapakana","Times New Roman",serif;font-size:clamp(74px,22cqw,156px);font-weight:400;line-height:1.23;margin:0 -6%;letter-spacing:-.012em;padding:0 4% 2cqw}
.ink-sheen{color:#675239;background:linear-gradient(105deg,#675239 15%,#857049 37%,#c2ab75 46%,#7c6440 52%,#675239 70%);background-size:270% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:inkLight 14s ease-in-out infinite}
.date-reveal{display:flex;align-items:center;justify-content:center;gap:3.5cqw;margin-top:4cqw}
.date-reveal time{font-size:clamp(21px,5.4cqw,34px);font-weight:400;line-height:1.7;white-space:nowrap;letter-spacing:.035em;color:#6c5a3e}
.date-rule{height:1px;width:9cqw;max-width:50px;background:linear-gradient(90deg,transparent,#a58d5f90,transparent)}
.arabic-date{font-family:"Amiri",serif;font-size:clamp(15px,3.5cqw,22px);line-height:1.8;margin:8px 0 0;color:#8d7d60;letter-spacing:0}
.bride-reveal{position:absolute;width:31%;height:38%;left:-1%;bottom:9%;z-index:2;opacity:0;pointer-events:none;transform:translate3d(calc(var(--px) * .7),calc(var(--py) * .5),0);transition:transform 1.6s ease-out}
.bride{height:100%;width:100%;object-fit:contain;object-position:center bottom;opacity:.64;animation:brideBreeze 15s ease-in-out infinite alternate;transform-origin:center bottom}
.swans-reveal{position:absolute;left:20%;right:2%;bottom:2.6%;height:24%;z-index:4;opacity:0;pointer-events:none}
.swans-glide{width:100%;height:100%;animation:swanGlide 19s ease-in-out infinite alternate;will-change:transform}
.swans-glide img{display:block;height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 8px 11px #70654c09)}
.record-reveal{position:absolute;right:9%;bottom:24%;width:17%;aspect-ratio:1;z-index:2;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 10px #6c5c4020)}
.record{display:block;width:100%;height:100%;object-fit:contain;animation:recordTurn 27s linear infinite}
.ribbon{position:absolute;z-index:3;pointer-events:none;width:31%;height:60%;opacity:.54;transform:translate3d(calc(var(--px) * .8),calc(var(--py) * .6),0);transition:transform 2s ease-out}
.ribbon img{width:100%;height:100%;object-fit:contain;animation:ribbonBreeze 19s ease-in-out infinite alternate;will-change:transform}
.ribbon-left{left:-19%;top:8%;transform-origin:left center}
.ribbon-right{right:-22%;top:37%;transform-origin:right center;opacity:.48}
.ribbon-right img{animation-direction:alternate-reverse;animation-delay:-8s;transform:rotate(190deg)}
.dust,.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dust{z-index:3;opacity:.8}
.mote{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#c6ac6b;box-shadow:0 0 6px #f7e8b57a;animation:moteDrift var(--duration) ease-in-out var(--delay) infinite;opacity:0}
.mote.shimmer{border-radius:0;background:#fff6d8;box-shadow:0 0 8px #fcdfa3;transform:rotate(45deg)}
.mote.shimmer::before{content:"";position:absolute;inset:-3px 30%;background:linear-gradient(transparent,#d2b87a,transparent)}
.mote.shimmer::after{content:"";position:absolute;inset:30% -3px;background:linear-gradient(90deg,transparent,#d2b87a,transparent)}
.petals{z-index:7}
.petal{position:absolute;width:var(--size);top:-14%;left:var(--x);animation:petalFlight var(--duration) linear var(--delay) infinite;opacity:0;will-change:transform}
.petal img{display:block;width:100%;height:auto;animation:petalSway 6s ease-in-out var(--delay) infinite alternate;filter:drop-shadow(0 2px 3px #7c655912)}
.light-reveal{position:absolute;inset:0;z-index:8;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 42% 42%,#fffbebbb,transparent 74%);mix-blend-mode:screen}
.invitation-controls{position:absolute;z-index:12;inset-inline:33px;top:calc(31px + var(--safe-top));display:flex;gap:8px;justify-content:flex-end;direction:ltr}
.icon-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #aa94632e;border-radius:50%;background:#fcf8ee6b;color:#8a7856;cursor:pointer;backdrop-filter:blur(7px);transition:background .25s,opacity .5s}
.icon-button svg{width:20px;height:20px}
.icon-button:hover{background:#fcf8eebd}
.play-icon{display:none}
.replay{opacity:0;pointer-events:none}
.loading{position:absolute;z-index:20;inset:0;background:#f4efe5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;transition:opacity .85s ease,visibility .85s;visibility:visible}
.loading-initial{font-family:"Kapakana",Georgia,serif;font-style:italic;font-size:77px;line-height:1;color:#a28d62}
.loading>span:last-of-type{font-family:"Amiri",serif;font-size:17px;color:#9a8969}
.retry{border:1px solid #b6a580;background:transparent;padding:10px 20px;font-size:16px;margin-top:12px;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript-note{position:absolute;bottom:20px;inset-inline:20px;font-size:14px;text-align:center}
html[data-ready=true] .loading{opacity:0;visibility:hidden;pointer-events:none}
html[data-ready=false] .ambient-motion,html[data-ready=false] .petal,html[data-ready=false] .mote{animation-play-state:paused!important}
html[data-state=opening] .cover{animation:coverDeparture 6.6s linear both;pointer-events:none}
html[data-state=opening] .envelope-travel{animation:envelopeDeparture 5.4s cubic-bezier(.3,.05,.25,1) both}
html[data-state=opening] .cover-heading{animation:coverWords 2s ease both}
html[data-state=opening] .open-prompt{animation:coverWords .8s ease both}
html[data-state=opening] .light-reveal{animation:lightPassing 5.5s ease both}
html[data-state=opening] .invitation-copy,html[data-state=open] .invitation-copy{opacity:1;visibility:visible}
html[data-state=opening] .title-reveal{animation:writingAppears 2.5s 2.8s both}
html[data-state=opening] .name-reveal{animation:writingAppears 2.7s 3.3s both}
html[data-state=opening] .date-reveal{animation:writingAppears 2.4s 4s both}
html[data-state=opening] .bride-reveal{animation:drawingAppears 4s 2.6s both}
html[data-state=opening] .swans-reveal{animation:drawingAppears 3.2s 3.2s both}
html[data-state=opening] .record-reveal{animation:drawingAppears 2.6s 3.8s both}
html[data-state=open] .cover{opacity:0;visibility:hidden;pointer-events:none}
html[data-state=open] .bride-reveal,html[data-state=open] .swans-reveal,html[data-state=open] .record-reveal{opacity:1}
html[data-state=open] .replay{opacity:1;pointer-events:auto}
html[data-motion=still] .ambient-motion,html[data-motion=still] .petal,html[data-motion=still] .petal img,html[data-motion=still] .mote,html[data-idle=true] .ambient-motion,html[data-idle=true] .petal,html[data-idle=true] .mote{animation-play-state:paused!important}
html[data-motion=still] .pause-icon{display:none}
html[data-motion=still] .play-icon{display:block}
html[data-motion=still][data-state=opening] .cover{animation-duration:.65s}
html[data-motion=still][data-state=opening] .envelope-travel{animation:none}
html[data-motion=still][data-state=opening] .light-reveal{animation:none}
html[data-motion=still][data-state=opening] .title-reveal,html[data-motion=still][data-state=opening] .name-reveal,html[data-motion=still][data-state=opening] .date-reveal,html[data-motion=still][data-state=opening] .bride-reveal,html[data-motion=still][data-state=opening] .swans-reveal,html[data-motion=still][data-state=opening] .record-reveal{animation:quietReveal .6s both}
@keyframes palaceJourney{from{transform:scale(1.16) translateY(2%)}to{transform:scale(1.025) translateY(-1.7%)}}
@keyframes daylightBreathe{from{opacity:.63}to{opacity:.98}}
@keyframes sunDrift{from{transform:rotate(-2deg) translateX(-1%);opacity:.52}to{transform:rotate(2deg) translateX(2%);opacity:.91}}
@keyframes envelopeFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes sealGlow{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.8;transform:scale(1.05)}}
@keyframes coverDeparture{0%,58%{opacity:1}85%,100%{opacity:0}}
@keyframes envelopeDeparture{0%{transform:translateY(0) scale(1);opacity:1}28%{transform:translateY(-3%) scale(1.045);opacity:1}62%{transform:translateY(11%) scale(.95) rotate(4deg);opacity:.75}100%{transform:translateY(48%) scale(.87) rotate(7deg);opacity:0}}
@keyframes coverWords{to{opacity:0;transform:translateY(-8px)}}
@keyframes lightPassing{0%,100%{opacity:0}45%{opacity:.8}75%{opacity:.22}}
@keyframes writingAppears{from{opacity:0;filter:blur(4px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes drawingAppears{from{opacity:0}to{opacity:1}}
@keyframes quietReveal{from{opacity:0}to{opacity:1}}
@keyframes inkLight{0%,25%{background-position:100% 0}75%,100%{background-position:-90% 0}}
@keyframes brideBreeze{from{transform:rotate(-1deg)}to{transform:rotate(1deg) translateX(2%)}}
@keyframes swanGlide{from{transform:translate3d(-4%,2%,0) rotate(-.5deg)}to{transform:translate3d(2%,-1%,0) rotate(.6deg)}}
@keyframes recordTurn{to{transform:rotate(360deg)}}
@keyframes ribbonBreeze{from{transform:translate(-2%,3%) rotate(-5deg)}to{transform:translate(11%,-3%) rotate(9deg)}}
@keyframes moteDrift{0%,100%{opacity:0;transform:translate3d(0,12px,0)}25%{opacity:.24}65%{opacity:.63}95%{transform:translate3d(var(--drift),-45px,0);opacity:0}}
@keyframes petalFlight{0%{opacity:0;transform:translate3d(-6cqw,0,0) rotate(0)}12%{opacity:.72}82%{opacity:.61}100%{opacity:0;transform:translate3d(var(--travel),119svh,0) rotate(var(--turn))}}
@keyframes petalSway{from{transform:rotateY(5deg) rotate(-12deg)}to{transform:rotateY(48deg) rotate(14deg)}}
@media(min-width:1000px){.fine-frame{inset:23px}.invitation-controls{inset-inline:39px;top:36px}.stage{border-inline:1px solid #baab8c20}}
@media(max-width:480px){.fine-frame{inset:13px}.invitation-controls{inset-inline:23px;top:calc(21px + var(--safe-top))}.cover-heading{top:24%}.envelope-travel{inset-inline:3%;top:41%}.open-prompt{top:81%}.bride-reveal{width:34%;bottom:10%;height:31%}.record-reveal{right:8%;bottom:24%;width:18%}.swans-reveal{left:17%;right:-1%;bottom:6%;height:22%}.invitation-copy{top:33%}.date-reveal{gap:3cqw}.ribbon-left{left:-20%}.ribbon-right{right:-21%}}
@media(max-height:700px){.cover-heading{top:17%}.envelope-travel{top:33%}.open-prompt{top:76%}.invitation-copy{top:26%}.invitation-copy .eyebrow{margin-bottom:2cqw}.signature{font-size:19cqw}.arabic-name{font-size:8cqw}.date-reveal{margin-top:1cqw}.swans-reveal{height:21%;bottom:3%}.record-reveal{bottom:23%;width:15%}}
@media(orientation:landscape) and (max-height:599px){.stage{height:760px;min-height:760px;width:580px;max-width:100%}.envelope img{max-height:300px}.invitation-copy{top:29%}.cover-heading{top:20%}.open-prompt{top:76%}.envelope-travel{top:35%}}
@media(prefers-reduced-motion:reduce){.architecture,.parallax-front{transition:none}.icon-button{transition:none}}