@font-face{font-family:Invitation;src:url('assets/cormorant.woff2') format('woff2');font-display:swap}
@font-face{font-family:Invitation;src:url('assets/cormorant-italic.woff2') format('woff2');font-style:italic;font-display:swap}
:root{color-scheme:light;--ink:#445643;--paper:#f6f2e9;--stage-height:100svh}
*{box-sizing:border-box}
html{background:#e9e7df;overscroll-behavior-y:none}
body{margin:0;color:var(--ink);font-family:Invitation,Georgia,serif;background:var(--paper);overflow:hidden}
button{-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
button:focus-visible{outline:2px solid #718367;outline-offset:6px}p{margin:0}
.journey{position:relative;height:var(--stage-height);max-width:520px;margin:auto}
.stage{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100%,520px);height:var(--stage-height);overflow:clip;isolation:isolate;background:var(--paper)}
.painting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.sky-world,.envelope-world,.envelope-camera{position:absolute;inset:0}
.sky-world{z-index:1}.sky{top:-16%;height:132%;transform:translateY(9%) scale(1.02);will-change:transform}
.far,.near{opacity:0;will-change:transform,opacity}
.near-left{clip-path:inset(50% 0 0 0)}.near-right{clip-path:inset(0 0 50% 0)}
.envelope-world{z-index:2;background:var(--paper);will-change:opacity}
.envelope-camera{transform-origin:50% 56%;will-change:transform;overflow:hidden}
/* The film is stacked: colour above, lining mask below. Only the colour half is framed. */
.envelope-video{inset:auto;object-fit:fill}
.envelope-video,.envelope-open{opacity:0}
.envelope-video{transition:opacity .16s}
.eyebrow{font:400 10px/1.5 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.seal-button{position:absolute;z-index:4;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer}
.touch-hint{position:absolute;z-index:3;top:var(--hint-top,69.5%);left:0;right:0;text-align:center;color:#344731;pointer-events:none;transition:opacity .65s}
.hint-title{display:block;font:600 28px/1.12 Invitation,Georgia,serif;letter-spacing:.01em}
.hint-action{display:block;margin-top:5px;font:600 10px/1.4 system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#43523e}
body[data-state=sealed] .touch-hint{animation:invitation-breath 3.4s ease-in-out infinite alternate}
.promise{position:absolute;z-index:3;top:37%;left:0;right:0;text-align:center;opacity:0;transform:translateY(18px);pointer-events:none}
.promise .eyebrow{font-size:9px;letter-spacing:.23em}
.couple{font-size:clamp(48px,13vw,68px);font-weight:400;line-height:.91;letter-spacing:-.025em;margin:24px 0 0}
.couple span{display:block}.couple i{display:block;font-size:.52em;line-height:1.25;font-weight:400;opacity:.77;margin:3px 0}
.promise-date{font-size:22px;letter-spacing:.055em;margin-top:30px}.promise-place{font-style:italic;font-size:16px;margin-top:9px}
.scroll-hint{position:absolute;z-index:3;left:0;right:0;bottom:calc(6% + env(safe-area-inset-bottom));text-align:center;font-style:italic;font-size:17px;opacity:0;pointer-events:none}
.scroll-hint span{display:block;font-family:Georgia,serif;font-style:normal;font-size:21px;margin-top:12px}
.replay{position:absolute;z-index:4;top:calc(20px + env(safe-area-inset-top));right:22px;padding:14px 15px;font:10px system-ui,sans-serif;letter-spacing:.14em;border:0;border-radius:999px;background:#f6f2e9dd;opacity:0;visibility:hidden;cursor:pointer;transition:opacity .4s}
body[data-state=opening] .seal-button{pointer-events:none}
body[data-state=sky]{overflow:auto}body[data-state=sky] .journey{height:calc(var(--stage-height)*3.4)}
body[data-state=sky] .seal-button,body[data-state=sky] .touch-hint{display:none}
body[data-state=sky] .replay{opacity:.9;visibility:visible}
.no-script{position:fixed;bottom:0;z-index:5;background:var(--paper);padding:20px;width:100%;text-align:center}
/* Registered plates from one composition share a single optical framing. */
.opening-garden{position:absolute;inset:0;z-index:1;pointer-events:none}
.depth-plane{position:absolute;inset:0;pointer-events:none;will-change:transform;transform-origin:50% 56%;opacity:1}
/* The source image edges stay beyond the lens during the entire wind cycle.
   Extend the registered canvas, rather than fading its opaque foreground. */
.botanical-bend{position:absolute;inset:calc(-1 * clamp(36px,calc(var(--stage-height)*.07),80px));transform-origin:50% 0%;animation:branch-wind 9.5s ease-in-out infinite alternate}
.botanical-bend img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.depth-branches .botanical-bend{animation-delay:-4s}
.depth-bouquet .botanical-bend{transform-origin:100% 100%;animation:bouquet-wind 11.5s ease-in-out -7s infinite alternate}
.depth-left .botanical-bend{transform-origin:0% 62%;animation:near-wind 6.5s ease-in-out -2s infinite alternate}
.depth-right .botanical-bend{transform-origin:100% 0%;animation:near-wind 7.5s ease-in-out -6s infinite alternate}
.depth-bottom .botanical-bend{transform-origin:25% 100%;animation:near-wind 8.5s ease-in-out -5s infinite alternate}
.opening-particles{position:absolute;inset:0;z-index:2;pointer-events:none}
.flight-petal{position:absolute;transform:translate(-50%,-50%);will-change:transform;pointer-events:none}
.petal-drift{display:block;width:100%;height:100%;animation:opening-petal-drift var(--duration) ease-in-out var(--delay) infinite alternate}
.petal-drift img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.paper-to-sky{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;visibility:hidden}
.touch-wave-fallback{position:absolute;z-index:3;pointer-events:none;visibility:hidden;border:16px solid #c3c7aa2b;border-radius:50%;box-shadow:0 0 18px #fff9dc30,inset 0 0 18px #fff9dc30}
/* The rest of the story retains its generated ambient planes. */
.ambience{position:absolute;inset:0;z-index:2;pointer-events:none;user-select:none}
.light-depth,.wind-depth{position:absolute;inset:0;pointer-events:none}
.light-wash{position:absolute;width:95%;aspect-ratio:1;object-fit:contain;mix-blend-mode:screen;filter:blur(18px);opacity:.25;animation:light-breath 26s ease-in-out infinite alternate}
.light-one{left:32%;top:2%;transform-origin:20% 70%;animation-delay:-11s}.light-two{left:-39%;bottom:4%;width:115%;animation-duration:33s;animation-delay:-24s}
.wind-petal{position:absolute;top:var(--start);left:0;width:var(--size);height:var(--size);opacity:0;animation:petal-wind var(--duration) linear var(--delay) infinite;will-change:transform,opacity}
.wind-petal img{width:100%;height:100%;object-fit:contain;animation:petal-flutter 7s ease-in-out var(--delay) infinite alternate}
.wind-far{filter:blur(.4px)}.wind-middle{filter:blur(.7px)}.wind-close{filter:blur(4px)}
.light-mote{mix-blend-mode:screen;filter:blur(1.2px)}.light-mote img{animation:none}
body[data-state=sealed] .ambience .wind-depth,body[data-state=opening] .ambience .wind-depth{visibility:hidden}
body[data-state=opening] .experience-tools{visibility:hidden}
body[data-state=sealed] .ambience,body[data-state=opening] .ambience{visibility:hidden}
body[data-state=sky] .opening-garden *,body[data-state=sky] .opening-particles *{animation-play-state:paused}
.experience-tools{pointer-events:none}.experience-tools button{pointer-events:auto}
.ambience-paused .ambience *,.ambience-paused .botanical-bend,.ambience-paused .botanical-bend img,.ambience-paused .petal-drift,.ambience-paused .touch-hint{animation-play-state:paused!important}
@keyframes invitation-breath{from{transform:translateY(1px)}to{transform:translateY(-1px)}}
@keyframes branch-wind{from{transform:rotate(-1.2deg) skewX(-.35deg) translateX(-2px)}to{transform:rotate(1.4deg) skewX(.5deg) translateX(2px)}}
@keyframes bouquet-wind{from{transform:rotate(-1.1deg) scale(.998)}to{transform:rotate(1.3deg) scale(1.012)}}
@keyframes near-wind{from{transform:rotate(-1.8deg) translate(-3px,-5px)}to{transform:rotate(2.2deg) translate(4px,7px)}}
@keyframes garden-bend{0%{transform:rotate(-1.5deg) skewX(-.65deg) scaleY(.994)}45%{transform:rotate(.7deg) skewX(.8deg) scaleY(1.009)}100%{transform:rotate(2.1deg) skewX(1.3deg) scaleY(1.014)}}
@keyframes leaf-breath{0%{transform:skewY(-.55deg) scaleX(.996)}100%{transform:skewY(.7deg) scaleX(1.011)}}
@keyframes opening-petal-drift{0%{transform:translate(-28px,-24px) rotate(var(--turn)) rotateY(-22deg)}38%{transform:translate(16px,-4px) rotate(calc(var(--turn) + 37deg)) rotateY(25deg)}70%{transform:translate(35px,27px) rotate(calc(var(--turn) + 70deg)) rotateY(-15deg)}100%{transform:translate(67px,49px) rotate(calc(var(--turn) + 105deg)) rotateY(30deg)}}
@keyframes botanical-breath{from{transform:rotate(-1.6deg) translateY(0)}to{transform:rotate(2.4deg) translateY(-4px)}}
@keyframes light-breath{0%{transform:translate(-8%,3%) rotate(-7deg) scale(.9);opacity:.12}60%{opacity:.34}100%{transform:translate(10%,-6%) rotate(12deg) scale(1.13);opacity:.19}}
@keyframes petal-wind{0%{transform:translate3d(calc(var(--scene-width)*-.18),0,0);opacity:0}12%{opacity:var(--alpha)}38%{transform:translate3d(calc(var(--scene-width)*.32),calc(var(--stage-height)*var(--rise)*.45 + 18px),0);opacity:var(--alpha)}65%{transform:translate3d(calc(var(--scene-width)*.76),calc(var(--stage-height)*var(--rise)*.8 - 12px),0);opacity:calc(var(--alpha)*.72)}88%{opacity:var(--alpha)}100%{transform:translate3d(calc(var(--scene-width)*1.18),calc(var(--stage-height)*var(--rise)),0);opacity:0}}
@keyframes petal-flutter{from{transform:rotate(var(--turn)) rotateY(-35deg) scale(.85)}to{transform:rotate(calc(var(--turn) + 72deg)) rotateY(45deg) scale(1)}}
@media(min-width:521px){body{background:#e9e7df}.journey{box-shadow:0 0 80px #26352c18}.stage{border-left:1px solid #ffffff60;border-right:1px solid #ffffff60}}
@media(max-height:680px){.promise{top:33%}.couple{font-size:48px}.promise-date{margin-top:20px}.hint-title{font-size:25px}.hint-action{font-size:9px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.painting,.depth-plane{will-change:auto!important}.touch-hint,.replay{transition:none}.sky{top:0;height:100%;transform:none}.near,.depth-plane{filter:none!important}.opening-particles,.wind-depth{display:none}.light-wash,.botanical-bend,.botanical-bend img,.botanical-sway,.touch-hint{animation:none!important}.light-wash{opacity:.12}}