@font-face{font-family:Keepsake;src:url('./assets/keepsake-bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Invitation;src:url('./assets/invitation-script.woff') format('woff');font-display:swap}
:root{color-scheme:light;--ink:#634451;--rose:#873d5d;--cream:#fff5e9;--gold:#c49b72;--app-height:100vh;--panel-width:600px;--tempo:3.8s}
@supports(height:100dvh){:root{--app-height:100dvh}}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 30% 15%,#fff4e9,#e8bdcd 65%,#c792a9);color:var(--ink);font:1rem/1.55 Georgia,serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
[hidden]{display:none!important}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #a45477;outline-offset:5px}button{touch-action:manipulation}a{color:var(--rose)}p{margin:0 auto .85rem}h1,h2{margin:0 0 .85rem;font-family:Keepsake,Georgia,serif;font-weight:700;line-height:1.1;color:var(--rose);letter-spacing:-.04em}
.invitation{position:relative;width:100%;max-width:var(--panel-width);height:var(--app-height);margin:auto;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-y:contain;background:#f4d5e0;box-shadow:0 0 100px #74354b26;-webkit-overflow-scrolling:touch}
.invitation::-webkit-scrollbar{display:none}.scene{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:var(--app-height);min-height:var(--app-height);padding:max(4rem,calc(env(safe-area-inset-top) + 3rem)) 1.5rem max(2.4rem,calc(env(safe-area-inset-bottom) + 1.4rem));overflow:hidden;overflow:clip;scroll-snap-align:start;scroll-snap-stop:always;text-align:center;scroll-margin-top:0}
.inner{position:relative;z-index:3;width:min(100%,27rem);max-height:100%}.scene:not(.is-active) *,body.is-background *{animation-play-state:paused!important}.scene.is-active .reveal{animation:soft-reveal .9s var(--delay,0s) both cubic-bezier(.18,.7,.2,1)}
@keyframes soft-reveal{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.eyebrow,.gallery-heading{font:650 .64rem/1.6 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#83546a}.salam{font-style:italic}.arabic{font-size:clamp(1.45rem,5.5vw,1.9rem);color:var(--rose);margin-bottom:.85rem}.ornament{display:flex;align-items:center;justify-content:center;gap:12px;color:#bd9368;font-size:.75rem;margin:1.2rem auto}.ornament:before,.ornament:after{content:'';height:1px;width:42px;background:linear-gradient(90deg,transparent,#c69a73)}.ornament:after{rotate:180deg}
/* A luminous face and eight layers of rose gold give the serif lettering depth. */
.cover h1,.signature,.details h2,.gallery h2,.closing h2,.entrance h2{color:#a05575;-webkit-text-stroke:.35px #f9c9d9;text-shadow:0 -1px 0 #fff4e7,.5px 1px 0 #d18ca7,1px 2px 0 #c27b98,1.5px 3px 0 #b36a88,2px 4px 0 #a25979,2.5px 5px 0 #904b6a,3px 6px 0 #7c3c5a,3px 9px 7px #7e3d6333,5px 17px 22px #7e3d6326;transform:perspective(900px) rotateX(7deg)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:48px;padding:.85rem 1.5rem;border:1px solid #9d5373;border-radius:999px;background:linear-gradient(135deg,#bd7494,#a05679 42%,#843d60);color:#fff8f2;text-decoration:none;font:650 .7rem/1.4 system-ui,sans-serif;letter-spacing:.08em;box-shadow:inset 0 1px 0 #ffd7e5a3,inset 0 -2px 0 #71314c3b,0 4px 0 #773b56,0 10px 19px #7a375732;transition:transform .2s,box-shadow .2s}.button span{font-size:1.1rem;font-weight:400}.button:hover{filter:brightness(1.05)}.button:active{transform:translateY(3px);box-shadow:inset 0 1px #ffd7e5a3,0 1px #773b56,0 5px 10px #7a375732}
/* The opening scene is a little satin palace, with a matching gate in front. */
.cover{background:radial-gradient(ellipse at 50% 18%,#fffaf0,#f9e8e8 48%,#eac0d0);padding-inline:1.4rem}
.palace-arch{position:absolute;z-index:-1;inset:7% 6% 3%;border:1px solid #d5b18a;border-radius:49% 49% 1.5rem 1.5rem / 26% 26% 1.5rem 1.5rem;background:radial-gradient(ellipse at 50% 25%,#fffaf3 8%,#fcecee 60%,#f2d4dc);box-shadow:inset 0 0 0 5px #fff7ed,inset 0 0 0 6px #d5b18a80,0 8px 0 -3px #d7a8bb,0 15px 30px #a1667d24}
.palace-arch:before{content:'';position:absolute;inset:12px;border:1px solid #deb99565;border-radius:inherit}.palace-arch i{position:absolute;bottom:0;left:-7%;right:-7%;height:13%;border-radius:50%;background:radial-gradient(ellipse,#e2adbf70,transparent 70%);transform:translateY(40%)}
.cover-copy{margin-top:-2.4rem}.cover-bow{display:block;width:clamp(85px,26vw,128px);height:auto;margin:0 auto 1.05rem;filter:drop-shadow(0 8px 6px #a0657835);animation:satin-drift 5.8s ease-in-out infinite}.cover .eyebrow{font-size:clamp(.56rem,2.25vw,.69rem);margin-bottom:1rem;letter-spacing:.16em}.cover h1{font-size:clamp(2.45rem,11.4vw,4.3rem);line-height:1.01;margin:0 0 1.1rem}.cover h1 span{display:block;font-size:.87em;margin-top:.13em}.cover .ornament{margin:.6rem auto 1rem}.cover .name{font:700 clamp(1.55rem,7vw,2.35rem)/1.17 Keepsake,Georgia,serif;color:#86445e;letter-spacing:-.045em;text-shadow:0 1px #fff7ed,1px 2px #eab6c8,2px 3px #a7658050;margin-bottom:1rem}.name span{display:block;font-size:.78em;margin-top:.2em}.cover-date{font:500 .65rem/1.6 system-ui,sans-serif;letter-spacing:.06em;color:#86536b;margin-bottom:1.3rem}.cover .button{min-width:180px}.cover-friends{position:absolute;z-index:4;bottom:6%;left:0;right:0;height:clamp(80px,15dvh,135px);pointer-events:none}.cover-friends img{position:absolute;bottom:0;width:clamp(82px,27vw,132px);height:auto;filter:drop-shadow(0 8px 7px #7d3d5733)}.cover-bunny{left:4%;animation:bunny-greet var(--tempo) ease-in-out infinite;transform-origin:50% 85%}.cover-teddy{right:2%;animation:teddy-breathe 5s ease-in-out infinite;transform-origin:50% 90%}.scroll-cue{position:absolute;z-index:4;bottom:max(1.5rem,calc(env(safe-area-inset-bottom) + .9rem));left:0;right:0;color:#9b697d;font:italic .75rem/1.6 Georgia,serif}.scroll-cue span{display:block;font:450 .57rem/1.6 system-ui,sans-serif;letter-spacing:.1em;margin-top:.15rem}.cover-orbit{position:absolute;z-index:-1;inset:19% -35%;border:1px solid #fff8ee99;border-radius:50%;rotate:-25deg;box-shadow:0 0 20px #fff4e985}
@keyframes satin-drift{50%{transform:translateY(-6px) rotate(3deg)}}@keyframes bunny-greet{0%,100%{transform:rotate(-6deg) translateY(0)}40%{transform:rotate(5deg) translateY(-12px)}60%{transform:rotate(-2deg) translateY(-9px)}}@keyframes teddy-breathe{50%{transform:translateY(-5px) rotate(2deg) scale(1.025)}}
/* Floating enamel and pearl ornaments, kept at the edge of the reading area. */
.decor{position:absolute;inset:0;pointer-events:none;z-index:1}.star{position:absolute;top:var(--y);left:var(--x);color:#fff8d9;font-size:var(--size,1.6rem);text-shadow:0 0 14px #c99872,0 0 5px #fff;animation:twinkle 4s var(--delay,0s) ease-in-out infinite}
.balloon{--shade:#d08aa9;--light:#fbd1dd;--deep:#9a5276;position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:.79;border-radius:50% 50% 47% 47% / 44% 44% 56% 56%;background:radial-gradient(ellipse at 29% 23%,#fff9f5 0%,var(--light) 20%,var(--shade) 58%,var(--deep) 100%);box-shadow:inset -4px -6px 11px #74325442,3px 6px 13px #6e324529;animation:balloon-float 6s var(--delay,0s) ease-in-out infinite}.balloon.pearl{--light:#fff9ed;--shade:#ead6c6;--deep:#c69ca2}.balloon:before{content:'';position:absolute;left:45%;top:96%;width:10%;height:8%;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--deep)}.balloon:after{content:'';position:absolute;left:49%;top:103%;width:15%;height:70%;border-left:1px solid #ae79928c;border-radius:50%}
@keyframes balloon-float{50%{transform:translateY(-14px) rotate(6deg)}}@keyframes twinkle{0%,100%{opacity:.35;scale:.7}50%{opacity:1;scale:1.1}}
.scene-seal{display:block;position:relative;width:46px;height:16px;margin:0 auto 1rem;filter:drop-shadow(0 3px 2px #99577355)}.scene-seal:before,.scene-seal:after{content:'';position:absolute;width:22px;height:15px;top:0;background:radial-gradient(ellipse at 34% 23%,#ffe9f0,#dc86a9 50%,#aa5379);box-shadow:inset 1px 1px 2px #fff6f1a0,inset -2px -1px 4px #a54d7569}.scene-seal:before{left:1px;border-radius:36% 78% 65% 29%;rotate:11deg}.scene-seal:after{right:1px;border-radius:78% 36% 29% 65%;rotate:-11deg}.scene-seal i{position:absolute;z-index:1;inset:4px 18px 3px;border-radius:38%;background:linear-gradient(145deg,#ffeff0,#e49dba 42%,#ab5579)}
/* Every chapter owns one viewport, including short phones and installed PWAs. */
.welcome,.details,.closing{background:radial-gradient(ellipse at 50% 30%,#fffcf1,#fae8e9 64%,#ecc4d3)}.welcome .inner>p:not(.arabic){font-size:clamp(.82rem,3.5vw,.98rem);max-width:23rem}.photo-frame{position:relative;width:clamp(130px,40vw,183px);height:clamp(140px,22dvh,210px);padding:6px;margin:1.15rem auto 1rem;background:linear-gradient(135deg,#f9e5b9,#bd8c65 45%,#ffebc5 60%,#c49a75);border-radius:48% 48% 10px 10px / 32% 32% 10px 10px;box-shadow:0 7px 0 -3px #ddb4bf,0 12px 23px #91556a25;transform:rotate(-3deg)}.photo-slot{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:#f9e9ea}.photo-slot img{display:block;position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 66%}.photo-slot .placeholder{object-fit:contain}.frame-bow{position:absolute;right:-14px;bottom:-5px;font-size:2rem;rotate:-13deg;filter:drop-shadow(0 3px 2px #7e3d6355)}.signature{font-size:clamp(2rem,8.7vw,3.25rem);margin:1.1rem auto 0;line-height:1.1}.signature span{display:block;font-size:.79em;margin-top:.12em}.signature:after{content:'✦';display:block;color:#bd9368;font-size:.65rem;margin-top:1.2rem;text-shadow:none;-webkit-text-stroke:0}
.details .inner{width:min(100%,26rem)}.details .object{display:block;width:min(36%,145px);height:auto;max-height:16dvh;object-fit:contain;margin:-.5rem auto .45rem;mask-image:radial-gradient(ellipse 70% 70%,#000 58%,transparent 100%);animation:calendar-sway 6s ease-in-out infinite}.details .scene-seal{margin-bottom:.45rem}.details h2{font-size:clamp(2.1rem,9vw,3.4rem);margin-bottom:.8rem}.details .inner>p:not(.eyebrow){font-size:.85rem}.event-heading{margin-bottom:.45rem}.event-ticket{position:relative;max-width:23rem;margin:1rem auto;padding:.8rem 0;border-block:1px solid #d5b197;background:linear-gradient(115deg,#edbdce45,#fff7ebaa,#edbdce45)}.event-ticket time{display:flex;align-items:center;justify-content:center;gap:1rem}.date-number{font:700 clamp(3rem,12vw,4.5rem)/1 Keepsake,Georgia,serif;color:#a95d7b;text-shadow:0 1px #fff4de,1px 3px #d493a9,2px 5px #a65c7d66}.event-ticket b{text-align:left;font:550 .68rem/1.8 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#925a70}.event-meta{display:grid;gap:.6rem;margin:1rem auto 1.3rem}.event-meta p{margin:0;font-size:.87rem;line-height:1.6}.event-meta strong{display:block;color:#a16e82;font:650 .56rem/1.6 system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;margin-bottom:.15rem}.gallery-glow{position:absolute;inset:12% -35%;border:1px solid #fff9ef80;border-radius:50%;transform:rotate(var(--angle));box-shadow:0 0 25px #fff4ed55}
@keyframes calendar-sway{50%{transform:perspective(700px) translateY(-5px) rotateY(9deg)}}
.gallery{padding:0;background:var(--scene-color);perspective:1000px}.gallery:before{content:'';position:absolute;z-index:-1;inset:-35px;background:var(--scene-image) center/cover;filter:blur(24px);opacity:.26;transform:scale(1.2)}.gallery[data-theme=road]{--scene-image:url('./assets/gallery-road.webp')}.gallery[data-theme=vanity]{--scene-image:url('./assets/gallery-vanity.webp')}.gallery[data-theme=doll]{--scene-image:url('./assets/gallery-doll.webp')}.gallery:after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(#fff8ec44,transparent 30%,transparent 70%,#9d537b14)}.gallery .inner,.gallery-stage{width:100%;height:100%;max-height:none}.gallery-title{position:absolute;z-index:4;top:max(9%,calc(env(safe-area-inset-top) + 4rem));inset-inline:1rem;text-align:center}.gallery .scene-seal{margin-bottom:.65rem}.gallery-heading{margin-bottom:.5rem;font-size:.56rem}.gallery h2{font-size:clamp(2rem,9.5vw,3.6rem);margin:0}.gallery-slide{position:absolute;margin:0;inset:20% 0 10%;display:grid;place-items:center}.gallery-photo{display:block;width:100%;height:100%;object-fit:contain;border:0;mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent)}.gallery-scroll{position:absolute;z-index:5;bottom:12%;left:0;right:0;width:max-content;max-width:100%;padding:.6rem 1rem;color:#863656;font:600 .67rem system-ui,sans-serif;text-underline-offset:4px}.gallery-shine{position:absolute;z-index:4;pointer-events:none;color:#fff5dc;text-shadow:0 0 12px #a36886;font-size:2rem;animation:twinkle 3.8s ease-in-out infinite}.gallery-shine.one{top:31%;left:9%}.gallery-shine.two{bottom:23%;right:9%;animation-delay:-1.8s}.scene-curtain{display:none}
@keyframes gallery-arrive{from{opacity:0;transform:perspective(900px) translateX(-35px) rotateY(-10deg) scale(.96)}to{opacity:1;transform:none}}@keyframes vanity-arrive{from{opacity:0;transform:translateY(38px) scale(.94)}to{opacity:1;transform:none}}@keyframes doll-arrive{from{opacity:0;transform:perspective(900px) rotateY(12deg) scale(.9)}to{opacity:1;transform:none}}@keyframes title-arrive{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
.playground{position:absolute;z-index:5;inset:auto 0 15%;height:clamp(60px,19vw,114px);pointer-events:none;overflow:visible}.chase-track{--formation-width:70%;--offscreen-margin:22px;position:absolute;inset:0;animation:road-trip 8.2s linear infinite backwards}.chase-formation{position:absolute;inset:0 auto 0 0;width:var(--formation-width)}.chase-car{position:absolute;inset:auto 0 0 auto;width:44%;filter:drop-shadow(0 4px 3px #83284c40)}.chase-car svg{display:block;width:100%;height:auto;overflow:visible}.chase-car-body{animation:car-suspension .64s ease-in-out infinite}.chase-car .wheel-spokes{transform-box:fill-box;transform-origin:center;animation:wheel-turn .43s linear infinite}.chase-puff{position:absolute;right:95%;bottom:20%;width:15px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fffdf7,#f8dfeb 72%,#d79cbb);animation:chase-exhaust 1.25s var(--trail-delay) ease-out infinite}.chase-rabbit{position:absolute;bottom:0;left:var(--rabbit-left);width:var(--rabbit-width);transform-origin:center bottom;animation:runner-weight .52s var(--run-delay) linear infinite;filter:drop-shadow(0 4px 2px #924c6942)}.chase-rabbit img{display:block;width:100%;aspect-ratio:1;object-fit:contain;animation:run-pose .52s calc(var(--run-delay) + var(--pose-delay)) linear infinite}.chase-rabbit img+img{position:absolute;inset:0}.chase-rabbit img:not(:first-child){opacity:0}
@keyframes road-trip{from{transform:translateX(calc(0px - var(--formation-width) - var(--offscreen-margin)))}to{transform:translateX(calc(100% + var(--offscreen-margin)))}}@keyframes car-suspension{50%{transform:translateY(-1.2px)}}@keyframes wheel-turn{to{transform:rotate(360deg)}}@keyframes chase-exhaust{from{opacity:.85;transform:scale(.5)}to{opacity:0;transform:translate(-25px,-14px) scale(1.9)}}@keyframes runner-weight{25%{scale:1.025 .98}76%{scale:.99 1.015}}@keyframes run-pose{0%,19%,100%{opacity:1}25%,94%{opacity:0}}
.closing h2{font-size:clamp(2.25rem,10vw,3.6rem);margin-bottom:1.3rem}.closing .inner>p:not(.eyebrow){font-size:clamp(.82rem,3.3vw,.98rem);max-width:24rem}.farewell-illustration{display:block;width:min(70%,250px);height:auto;max-height:29dvh;margin:0 auto 1rem;overflow:visible}.farewell-party{transform-box:view-box;transform-origin:50% 94%;animation:farewell-sway 5s ease-in-out infinite}.farewell-paw{transform-box:view-box;transform-origin:32.889% 56.177%;animation:farewell-wave 3.5s ease-in-out infinite}.farewell-shadow{transform-box:fill-box;transform-origin:center;animation:farewell-shadow 5s ease-in-out infinite}.hosts{display:inline-block;margin-top:.35rem;color:#8d4563;font-size:.96rem;font-style:italic}.back{display:inline-block;padding:.5rem;margin-top:.35rem;font:550 .65rem/1.5 system-ui,sans-serif;text-underline-offset:4px}.ribbon{position:absolute;z-index:-1;left:-20%;width:140%;height:10%;top:70%;rotate:-13deg;background:linear-gradient(#f4d9e0,#e8b7c9 50%,#fff3eb);opacity:.25;box-shadow:0 4px 24px #ba749b22}.ribbon+.ribbon{top:15%;rotate:15deg;opacity:.17}
@keyframes farewell-wave{15%{transform:rotate(-9deg)}31%{transform:rotate(11deg)}47%{transform:rotate(-10deg)}64%{transform:rotate(9deg)}0%,83%,100%{transform:rotate(0)}}@keyframes farewell-sway{50%{transform:translateY(-7px) rotate(2deg)}}@keyframes farewell-shadow{50%{transform:scaleX(.94);opacity:.12}}
/* Discreet controls stay inside the phone canvas and outside the safe areas. */
.music-control{border:1px solid #fffaf1c9;border-radius:999px;background:#fff9efcf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 18px #83486317;color:#88546c;font:600 .65rem system-ui,sans-serif;min-height:42px;padding:.5rem .85rem}.music-control{position:fixed;z-index:20;top:max(.85rem,calc(env(safe-area-inset-top) + .5rem));right:max(.9rem,calc((100vw - var(--panel-width))/2 + .9rem));display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%}.music-note{font-size:1.1rem}.music-control[aria-pressed=true] .music-note{animation:music-dance 2.4s ease-in-out infinite}.music-control[aria-pressed=true]:after{content:'';position:absolute;inset:-4px;border:1px solid #bd80987a;border-radius:50%;animation:music-ring 3s ease-in-out infinite}#music-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.music-status{position:fixed;z-index:25;right:max(.9rem,calc((100vw - var(--panel-width))/2 + .9rem));top:4.2rem;max-width:220px;background:#fff9efec;border:1px solid #fff;padding:.7rem .9rem;border-radius:1rem;font:.75rem/1.5 system-ui,sans-serif;color:#8b5068;box-shadow:0 5px 20px #7d3d5720}
@keyframes music-dance{50%{transform:rotate(-16deg) translateY(-2px)}}@keyframes music-ring{50%{scale:1.08;opacity:.35}}

/* A real perspective transform opens both leaves as the camera moves through. */
.entrance{--gate-duration:3s;position:fixed;z-index:60;inset:0;display:grid;place-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#fff9ee,#f6dee6 65%,#ddaabd);transition:opacity .7s ease,visibility .7s}.entrance:before{content:'';position:absolute;z-index:-1;inset:0;background:repeating-conic-gradient(from -12deg at 50% 65%,#fff5e619 0 8deg,transparent 8deg 19deg);mask-image:linear-gradient(#000,transparent);animation:halo-turn 60s linear infinite}.entrance-halo{position:absolute;width:min(90vw,650px);aspect-ratio:1;border-radius:50%;background:#fff9f0;filter:blur(50px);opacity:.7;top:10%}.entrance-eyebrow{position:absolute;z-index:5;top:max(4%,calc(env(safe-area-inset-top) + 1rem));inset-inline:0;text-align:center;font:550 .57rem/1.5 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#a16f83}.gate-camera{position:absolute;z-index:2;top:12%;width:min(78vw,410px);height:57%;max-height:580px;perspective:1000px;transform:translateZ(0) scale(1);will-change:transform;transform-origin:50% 42%}.gate-arch{position:absolute;inset:0;border-radius:49% 49% 5px 5px / 30% 30% 5px 5px;border:9px solid #ead2b1;background:#fff5e8;box-shadow:0 0 0 2px #c49972,0 0 0 7px #fff6e5,0 0 0 9px #d5ab86,inset 0 0 0 2px #bb8d67,0 20px 45px #8f526d36;overflow:hidden;perspective:950px;transform-style:preserve-3d}.gate-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#fffdf5,#fff7e9 38%,#f1cfda);box-shadow:inset 0 0 50px #fff}.gate-leaf{position:absolute;top:0;bottom:0;width:50.3%;background:linear-gradient(90deg,#d9a7b8,#f4d0d9 15%,#ffe7e6 40%,#edbccd 85%,#cc92ab);border:2px solid #e5c29e;box-shadow:inset 0 0 0 4px #fff0db73,inset 0 0 24px #aa647d26;backface-visibility:hidden;will-change:transform;transform-style:preserve-3d}.gate-left{left:0;transform-origin:0 50%;border-radius:100% 0 0 0 / 30% 0 0 0}.gate-right{right:0;transform-origin:100% 50%;border-radius:0 100% 0 0 / 0 30% 0 0}.gate-moulding{position:absolute;inset:14% 12% 8%;border:1px solid #cfaa7c;border-radius:48% 48% 12px 12px / 16% 16% 12px 12px;box-shadow:0 0 0 3px #fff3dd70,inset 0 0 0 3px #fff3dd70}.gate-flourish{position:absolute;inset:24% 0 auto;text-align:center;color:#bd946a;text-shadow:0 1px #fff7e8,0 3px #8e596a22;font-size:3rem}.gate-handle{position:absolute;top:59%;right:7%;height:35px;width:8px;border-radius:10px;background:linear-gradient(90deg,#a67950,#fff0bb,#bc8c59);box-shadow:2px 3px 3px #95556a44}.gate-right .gate-handle{right:auto;left:7%}.gate-monogram{position:absolute;top:46%;left:50%;display:grid;place-items:center;width:57px;height:57px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #dab487;background:linear-gradient(135deg,#fff5e2,#ecc9b5);box-shadow:0 0 0 4px #fff1e185,0 5px 9px #8c4a672d;font:700 2rem Keepsake,Georgia,serif;color:#a36977;text-shadow:0 1px #fff;transition:opacity .45s,scale .7s}.gate-bow{position:absolute;z-index:3;width:42%;height:auto;top:-8%;left:29%;filter:drop-shadow(0 7px 5px #955b7533);animation:satin-drift 5s ease-in-out infinite}.gate-crown{position:absolute;top:-15%;left:44%;color:#ba936e;font-size:2rem;text-shadow:0 2px #fff8e5}.gate-step{position:absolute;left:-8%;right:-8%;bottom:-7px;height:15px;border-radius:50% 50% 3px 3px;background:linear-gradient(#ffecde,#dec2ae);box-shadow:0 3px 0 #b98d83,0 8px 12px #92566b27}.gate-step.two{left:-14%;right:-14%;bottom:-21px;height:12px;background:linear-gradient(#fce7d9,#d6b1aa);z-index:-1}.gate-friend{position:absolute;z-index:5;width:49%;bottom:-7%;filter:drop-shadow(0 9px 5px #8b4d633b);animation:bunny-greet 3.8s ease-in-out infinite;transform-origin:50% 90%}.gate-friend img{display:block;width:100%;height:auto}.friend-left{left:-28%}.friend-right{right:-29%;animation-delay:-1.8s}.friend-right img{transform:scaleX(-1)}.gate-balloons{position:absolute;left:-27%;top:3%;width:95px;height:130px;transform:rotate(-9deg)}.gate-sparkles{position:absolute;inset:0;pointer-events:none}.gate-sparkles span{position:absolute;color:#fff8d3;font-size:1.7rem;text-shadow:0 0 12px #c19470;animation:twinkle 3s ease-in-out infinite}.gate-sparkles span:nth-child(1){top:17%;right:-18%}.gate-sparkles span:nth-child(2){top:68%;left:-13%;animation-delay:-1s}.gate-sparkles span:nth-child(3){top:-3%;right:5%;animation-delay:-2s}.entrance-caption{position:absolute;z-index:8;left:0;right:0;bottom:max(4%,calc(env(safe-area-inset-bottom) + 1rem));text-align:center}.entrance-caption p{font:italic .82rem Georgia,serif;color:#93667d;margin-bottom:.35rem}.entrance h2{font-size:clamp(2.5rem,12vw,4rem);margin-bottom:1.15rem}.entrance.is-opening .gate-left{animation:gate-left-open var(--gate-duration) cubic-bezier(.32,.2,.35,1) both}.entrance.is-opening .gate-right{animation:gate-right-open var(--gate-duration) cubic-bezier(.32,.2,.35,1) both}.entrance.is-opening .gate-monogram{opacity:0;scale:.7}.entrance.is-opening{animation:entrance-fade var(--gate-duration) linear both}.entrance.is-opening .gate-camera{animation:camera-through var(--gate-duration) cubic-bezier(.32,.2,.35,1) both}.entrance.is-opening .entrance-caption,.entrance.is-opening .entrance-eyebrow{animation:caption-fade 1.2s linear both}.intro-active .music-control{visibility:hidden}
@keyframes camera-through{from{transform:translateZ(0) scale(1)}to{transform:translate3d(0,6%,0) scale(1.95)}}@keyframes gate-left-open{from{transform:rotateY(0)}to{transform:rotateY(-108deg)}}@keyframes gate-right-open{from{transform:rotateY(0)}to{transform:rotateY(108deg)}}@keyframes entrance-fade{0%,65%{opacity:1}100%{opacity:0}}@keyframes caption-fade{to{opacity:0}}@keyframes halo-turn{to{rotate:360deg}}
.burst{position:fixed;z-index:30;inset:0;overflow:hidden;pointer-events:none}.burst i{position:absolute;top:35%;left:var(--x);width:var(--size);aspect-ratio:.7;border-radius:2px;background:var(--tint);animation:confetti-fall var(--time) var(--delay) ease-out both}.burst .burst-star{aspect-ratio:1;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 63%,50% 100%,37% 63%,0 50%,37% 36%)}@keyframes confetti-fall{from{opacity:0;transform:translateY(-25dvh) rotate(0)}10%{opacity:1}to{opacity:0;transform:translate(var(--drift),75dvh) rotate(var(--spin))}}
@media(min-width:700px){.scene{padding-inline:2.4rem}.cover h1{font-size:4.1rem}.cover .name{font-size:2.3rem}.cover-bow{width:120px}.cover-friends{height:145px}.cover-friends img{width:135px}.cover-bunny{left:8%}.cover-teddy{right:6%}}
@media(max-height:740px){.scene{padding-top:max(3.9rem,calc(env(safe-area-inset-top) + 2.8rem));padding-bottom:max(2rem,calc(env(safe-area-inset-bottom) + 1.2rem))}.cover-copy{margin-top:-1.1rem}.cover-bow{width:76px;margin-bottom:.7rem}.cover h1{font-size:clamp(2.2rem,10vw,3.6rem);margin-bottom:.6rem}.cover .eyebrow{margin-bottom:.65rem}.cover .ornament{margin:.4rem auto .7rem}.cover .name{font-size:clamp(1.5rem,6.4vw,2rem);margin-bottom:.6rem}.cover-date{margin-bottom:1rem}.cover-friends img{width:85px}.cover-friends{bottom:7%}.scroll-cue{bottom:1.5rem;font-size:.65rem}.scroll-cue span{display:none}.photo-frame{margin:.7rem auto;height:20dvh;width:clamp(112px,34vw,145px)}.welcome .inner>p:not(.arabic){font-size:.81rem;margin-bottom:.65rem}.arabic{font-size:1.4rem;margin-bottom:.6rem}.signature{font-size:1.95rem;margin-top:.7rem}.signature:after{margin-top:.8rem}.scene-seal{margin-bottom:.65rem}.details .object{max-height:12dvh}.details h2{font-size:2.1rem;margin-bottom:.65rem}.event-ticket{margin:.6rem auto;padding:.5rem 0}.date-number{font-size:3rem}.event-meta{gap:.4rem;margin:.65rem auto .85rem}.event-meta p{font-size:.8rem}.details .inner>p:not(.eyebrow){font-size:.78rem}.farewell-illustration{max-height:24dvh;margin-bottom:.75rem}.closing h2{font-size:2.35rem;margin-bottom:1rem}.closing .inner>p:not(.eyebrow){font-size:.81rem;margin-bottom:.6rem}.closing .hosts{font-size:.86rem}.gallery h2{font-size:2.2rem}.entrance h2{font-size:2.5rem}.gate-camera{height:54%;top:13%}}
@media(max-width:360px){.scene{padding-inline:1.1rem}.cover .eyebrow{font-size:.53rem}.cover h1{font-size:2.4rem}.cover-friends img{width:78px}}
@media(max-height:560px){.scene:not(.gallery){padding-top:3.8rem;padding-bottom:1.7rem}.scene:not(.gallery)>.inner{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:.5rem 1rem 1rem}.cover-copy{margin-top:0}.cover-bow{width:58px}.cover h1{font-size:2.3rem}.cover-friends,.scroll-cue{display:none}.palace-arch{inset:4% 10% 8%}.gallery-title{top:12%;max-width:50%;left:25%;right:auto}.gallery-title h2{font-size:1.7rem}.gallery .scene-seal{display:none}.gallery-slide{inset:19% 12% 10%}.gallery-heading{margin-bottom:.2rem}.gate-camera{width:220px;height:55%;top:11%}.entrance-eyebrow{font-size:.5rem}.entrance-caption{bottom:3%}.entrance-caption p{font-size:.65rem}.entrance h2{font-size:1.7rem;margin-bottom:.65rem}.gate-friend{width:42%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene.is-active .reveal{opacity:1;transform:none}.chase-formation{left:15%}.chase-rabbit img:not(:first-child){display:none}.gate-camera{transform:none}.entrance{display:none!important}}
/* Fade the artwork itself, so its photographed backdrop meets the full-screen scene. */
.gallery-photo{height:auto;max-height:100%;mask-image:linear-gradient(transparent,#000 5%,#000 93%,transparent)}
/* The grid track must be allowed to shrink on short and landscape displays. */
.scene{grid-template-rows:minmax(0,1fr)}
.scene:not(.gallery)>.inner{min-height:0}
@media(max-height:650px){
  .scene:not(.gallery)>.inner{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:.5rem .3rem 1rem}
  .details .object{display:none}
  .details .inner>p:last-child{margin:.6rem 0 0;line-height:1}
  .details .button{min-height:44px;padding:.65rem 1.25rem}
  .welcome .scene-seal{display:none}
  .welcome .inner>p:not(.arabic){font-size:.77rem;line-height:1.5}
  .welcome .photo-frame{height:18dvh;width:108px;margin:.5rem auto}
  .welcome .signature{font-size:1.75rem;margin-top:.6rem}
  .signature:after{margin-top:.5rem}
  .closing .farewell-illustration{max-height:21dvh;margin-bottom:.5rem}
  .closing .inner>p:not(.eyebrow){font-size:.76rem;line-height:1.5;margin-bottom:.5rem}
  .closing h2{font-size:2.1rem;margin-bottom:.8rem}
}
/* Gallery canvas always occupies the whole viewport, including short phones. */
.scene.gallery{padding:0!important}
.gate-friend img{animation:run-pose .72s var(--pose-delay) linear infinite}
.gate-friend img+img{position:absolute;inset:0}
.gate-friend img:not(:first-child){opacity:0}
@media(prefers-reduced-motion:reduce){.gate-friend img:not(:first-child){display:none}}

/* Keep the animated toys on their own floor, completely outside the photograph. */
.gallery[data-theme=road]{
  --track-height:clamp(64px,12dvh,100px);
  --track-bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));
  --photo-track-gap:20px;
}
.gallery[data-theme=road] .gallery-slide{
  bottom:calc(var(--track-height) + var(--track-bottom) + var(--photo-track-gap));
}
.gallery[data-theme=road] .playground{
  inset:auto 0 var(--track-bottom);
  height:var(--track-height);
  overflow:hidden;
  contain:layout paint;
}
.gallery[data-theme=road] .chase-track{
  --formation-width:min(70%,calc(var(--track-height) * 3));
}
.gallery[data-theme=road] .chase-formation{
  inset:0 auto 6px 0;
}
.gallery[data-theme=road] .gallery-slide{grid-template-rows:minmax(0,1fr)}
.gallery[data-theme=road] .gallery-photo{height:100%;min-height:0;max-height:100%}
.gallery[data-theme=road] .chase-rabbit img{height:auto}

/* A gallery reveals its photograph continuously as the next slide arrives. */
.gallery.is-active>.inner.reveal{animation:none}
.gallery .gallery-stage{perspective:1000px}
.gallery .gallery-slide{overflow:hidden;overflow:clip;grid-template-rows:minmax(0,1fr)}
.gallery .gallery-photo{height:100%;min-height:0;max-height:100%;backface-visibility:hidden;transform-origin:50% 60%}
.gallery[data-theme=road]{--entry-x:-46px;--entry-y:18px;--entry-rx:5deg;--entry-ry:-25deg}
.gallery[data-theme=vanity]{--entry-x:0px;--entry-y:48px;--entry-rx:24deg;--entry-ry:7deg}
.gallery[data-theme=doll]{--entry-x:46px;--entry-y:12px;--entry-rx:-5deg;--entry-ry:26deg}
.gallery.is-entering .gallery-photo{
  animation:gallery-photo-3d .95s cubic-bezier(.2,.55,.3,1) both;
  will-change:transform,opacity;
}
.gallery.is-entering .gallery-title{animation:gallery-title-3d .95s cubic-bezier(.2,.55,.3,1) both}
@keyframes gallery-photo-3d{
  0%{opacity:0;transform:perspective(1000px) translate3d(var(--entry-x),var(--entry-y),-150px) rotateX(var(--entry-rx)) rotateY(var(--entry-ry)) scale(.86)}
  100%{opacity:1;transform:perspective(1000px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1)}
}
@keyframes gallery-title-3d{
  from{opacity:0;transform:perspective(700px) translate3d(0,20px,-50px) rotateX(-26deg)}
  to{opacity:1;transform:perspective(700px) translate3d(0,0,0) rotateX(0)}
}
.scene-curtain{
  position:absolute;z-index:7;inset:0;display:grid;place-items:center;
  pointer-events:none;visibility:hidden;opacity:0;overflow:hidden;
  background:radial-gradient(ellipse at 32% 24%,#fff8ef,#f4d2df 60%,#d49bb9);
  perspective:900px;
}
.gallery[data-theme=vanity] .scene-curtain{background:radial-gradient(ellipse at 28% 20%,#fff9f4,#ead9e9 60%,#c998bc)}
.gallery[data-theme=doll] .scene-curtain{background:radial-gradient(ellipse at 28% 20%,#fff4ef,#f4c3d9 60%,#d67dab)}
.gallery.is-entering .scene-curtain{animation:gallery-curtain-3d .95s cubic-bezier(.3,.45,.4,1) both}
@keyframes gallery-curtain-3d{
  0%{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;visibility:hidden;transform:translate3d(0,-110%,0) scale(1.12)}
}
.curtain-prop{position:relative;width:clamp(110px,38vw,215px);transform-style:preserve-3d}
.gallery.is-entering .curtain-prop{animation:gallery-ornament-3d .95s cubic-bezier(.25,.4,.3,1) both}
@keyframes gallery-ornament-3d{
  from{transform:perspective(800px) translate3d(0,15px,-90px) rotateX(12deg) rotateY(-20deg) rotateZ(-9deg) scale(.78)}
  to{transform:perspective(800px) translate3d(0,-20px,200px) rotateX(-12deg) rotateY(35deg) rotateZ(15deg) scale(1.6)}
}
.curtain-balloon{
  aspect-ratio:.8;border-radius:50% 50% 47% 47% / 43% 43% 57% 57%;
  background:radial-gradient(ellipse at 28% 21%,#fff8f1 2%,#fbc8d5 16%,#e798b7 36%,#b85885 69%,#763758 100%);
  box-shadow:inset -10px -12px 22px #8c41605e,10px 18px 25px #8f3a6d48;
}
.curtain-balloon:after{content:'';position:absolute;left:45%;top:97%;width:10%;height:9%;background:#994d72;clip-path:polygon(48% 0,100% 100%,0 100%)}
.curtain-bubble{
  aspect-ratio:1;border-radius:50%;border:1px solid #fff8ff;
  background:radial-gradient(ellipse at 28% 23%,#fff 0%,#fff8fbba 12%,#ffdff222 27%,#fef4ff3d 57%,#ca83b180 78%,#fff6f9d9 97%);
  box-shadow:inset -10px -13px 30px #9e578b4b,10px 16px 27px #8f3a6d39;
}
.curtain-ribbon{aspect-ratio:1.4;filter:drop-shadow(6px 12px 9px #873b6559)}
.curtain-ribbon:before,.curtain-ribbon:after{content:'';position:absolute;top:12%;width:48%;height:76%;border-radius:34% 78% 62% 31%;background:radial-gradient(ellipse at 24% 22%,#ffe7ec,#f5adca 28%,#c8759a 62%,#a64b79);box-shadow:inset -7px -6px 12px #8d436a5d,inset 2px 3px 7px #ffdee9}
.curtain-ribbon:before{left:3%;transform:rotate(14deg)}
.curtain-ribbon:after{right:3%;transform:scaleX(-1) rotate(14deg)}
.curtain-ribbon i{position:absolute;z-index:1;inset:31% 40% 29%;border-radius:35%;background:linear-gradient(140deg,#ffe4ef,#e49ebd 45%,#b55988);box-shadow:0 2px 5px #94496d66}
@media(prefers-reduced-motion:reduce){
  .gallery .scene-curtain{display:none!important}
  .gallery.is-entering .gallery-photo,.gallery.is-entering .gallery-title{animation:none!important;opacity:1!important;transform:none!important}
}

.gallery.is-pending .scene-curtain{visibility:visible;opacity:1;transform:none;animation:none}
.gallery.is-pending .gallery-photo{opacity:0}
@media(prefers-reduced-motion:reduce){.gallery.is-pending .gallery-photo{opacity:1!important}}

/* Phone canvases and their photographs run right to both viewport edges. */
@media(max-width:767px),(pointer:coarse){
  :root{--panel-width:100vw}
  .invitation{width:100%;max-width:none;margin:0;box-shadow:none}
  .gallery .gallery-slide{inset-inline:0}
  .gallery .gallery-photo{object-fit:cover;object-position:50% var(--photo-focus-y,46%)}
  .gallery[data-theme=road]{--photo-focus-y:46%}
  .gallery[data-theme=vanity]{--photo-focus-y:44%}
  .gallery[data-theme=doll]{--photo-focus-y:46%}
  .music-control,.music-status{right:max(.9rem,env(safe-area-inset-right))}
}

/* Center the doll-box artwork: its source includes a large empty pink top. */
.gallery[data-theme=doll] .gallery-slide{top:14%;bottom:16%}
.gallery[data-theme=doll] .gallery-scroll{left:50%;right:auto;transform:translateX(-50%);text-align:center}
@media(orientation:landscape) and (max-height:560px){
  .gallery[data-theme=doll] .gallery-slide{top:19%;bottom:10%}
}

/* Prepare compositor layers before the reveal starts; move only transform/opacity. */
.gallery.is-active .scene-curtain,.gallery.is-active .curtain-prop,
.gallery.is-active .gallery-photo,.gallery.is-active .gallery-title{will-change:transform,opacity}

/* One floating chapter control replaces links inside the invitation artwork. */
.scroll-control{
  position:fixed;z-index:20;
  right:max(.9rem,env(safe-area-inset-right),calc((100vw - var(--panel-width))/2 + .9rem));
  bottom:max(.9rem,calc(env(safe-area-inset-bottom) + .6rem));
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1px solid #fff8ef;border-radius:50%;color:#8c4d6a;
  background:linear-gradient(145deg,#fff8efee,#f1d4e0ee);
  box-shadow:inset 0 1px 0 #fff,0 4px 16px #81436225;
  transition:transform .2s,background .2s;
}
.scroll-control:hover{background:#fff8ef}
.scroll-control:active{transform:translateY(2px)}
.scroll-control svg{display:block;transition:transform .25s}
.scroll-control[data-direction=up] svg{transform:rotate(180deg)}
.intro-active .scroll-control{visibility:hidden}
/* Leave a clear corner for the button instead of letting the toys pass beneath it. */
.gallery[data-theme=road] .playground{right:max(76px,calc(env(safe-area-inset-right) + 62px))}

/* A discreet, clickable signature on the thank-you page. */
.closing .inner>p.site-credit{margin:1rem auto 0;font:500 .62rem/1.5 system-ui,sans-serif;letter-spacing:.035em;color:#a7798c}
.site-credit a{display:inline-block;padding:.4rem .15rem;color:#92506e;font-weight:650;text-decoration-color:#bd91a4;text-underline-offset:3px}
.site-credit a:hover{color:#713950;text-decoration-color:currentColor}