:root{color-scheme:dark;--gold:#edd39a;--cream:#fff4da;--green:#102d26;--serif:'Cormorant Garamond',Georgia,serif;--sans:Montserrat,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#071b16}body{margin:0;color:var(--cream);font-family:var(--serif)}button,a,summary{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #fff2bd;outline-offset:6px}.invitation{position:relative;max-width:480px;margin:auto;isolation:isolate;overflow:hidden;box-shadow:0 0 100px #0008}.woodland,.veil,#magic{position:fixed;inset:0;left:50%;width:min(100%,480px);transform:translateX(-50%);pointer-events:none}.woodland{background:url('assets/bosque.png') center center/cover no-repeat;z-index:-3;height:105lvh;transform:translateX(-50%) translateY(var(--forest-y,0px)) scale(1.04)}.veil{background:linear-gradient(180deg,#061e1222,#071d1944 25%,#061c1833 65%,#071b16cc);z-index:-2;height:100lvh}#magic{z-index:4;height:100lvh}.motion-toggle{position:fixed;z-index:10;top:max(16px,env(safe-area-inset-top));right:max(16px,calc((100vw - 480px)/2 + 16px));height:38px;width:38px;border:1px solid #ecd29555;border-radius:50%;color:var(--gold);background:#0b261cb3;backdrop-filter:blur(6px);font:14px var(--sans);cursor:pointer}.opening{min-height:740px;height:100svh;max-height:1100px;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;padding:70px 26px 24px}.eyebrow{font:9px/1.8 var(--sans);letter-spacing:2.2px;text-transform:uppercase;margin:0;color:#e6dec7}.welcome{font-size:8px;letter-spacing:2.1px;text-shadow:0 1px 10px #000}.title-group{margin:auto -15px 0;position:relative;width:calc(100% + 30px);padding:0 10px}.little-star{display:block;color:var(--gold);font-size:29px;margin-bottom:22px;text-shadow:0 0 16px #f5d77d}h1{font:italic 600 clamp(95px,25vw,126px)/1.05 var(--serif);margin:6px 0 0;letter-spacing:-5px;color:#fbe7af;text-shadow:0 0 12px #efce8066,0 0 45px #cba74c55}h1.ready{color:#ead698aa}.age{display:flex;align-items:center;justify-content:center;gap:13px;margin:4px 0 0}.age>span{height:1px;width:32px;background:linear-gradient(90deg,transparent,#d3b879)}.age>span:last-child{transform:rotate(180deg)}.age p{font-size:23px;margin:0;color:var(--gold)}.age em{font-style:normal;font-size:34px;padding:0 3px}.intro{font-style:italic;font-size:20px;margin:22px 0 0;text-shadow:0 2px 10px #000}.opening-bottom{margin-top:auto;padding-top:70px;width:100%}.date-preview{display:flex;flex-direction:column;gap:8px;font-size:25px;text-shadow:0 1px 10px #000}.date-preview .time{font:10px var(--sans);letter-spacing:3px;color:#e5dac0}.next-scene{display:flex;flex-direction:column;align-items:center;text-decoration:none;margin:32px auto 0;width:230px;gap:10px;font:8px var(--sans);letter-spacing:2px;text-transform:uppercase;color:#e6d6ae;padding:8px}.next-scene svg{width:27px;height:36px;fill:none;stroke:var(--gold);stroke-width:1;animation:beckon 2.7s ease-in-out infinite}.next-scene .leaf{fill:#d1b67333}.fairy-scene{position:relative;text-align:center;padding:55px 20px 28px;background:linear-gradient(180deg,transparent,#08291b33 30%,#08261fe8 65%,#09241df9)}.scene-caption h2{font-size:34px;line-height:1.1;font-weight:400;font-style:italic;margin:9px 0 0;text-shadow:0 2px 16px #000}.scene-caption .eyebrow{font-size:8px}.fairy-stage{height:375px;position:relative;margin:0 -20px}.fairy-float{position:absolute;width:310px;height:355px;left:50%;top:14px;margin-left:-155px;animation:float 5.7s ease-in-out infinite;transform-origin:50% 80%;will-change:transform}.bruna{position:absolute;z-index:2;width:245px;height:auto;left:26px;bottom:5px;filter:drop-shadow(0 10px 17px #08180c88)}.wing{position:absolute;z-index:1;width:172px;top:23px;filter:drop-shadow(0 0 8px #e9ce7c88)}.wing-right{right:-18px;transform-origin:5% 87%;animation:wing-right 2.8s ease-in-out infinite}.wing-left{left:-19px;transform:scaleX(-1);transform-origin:95% 87%;animation:wing-left 2.8s ease-in-out infinite}.halo{position:absolute;inset:35px 30px 10px;background:radial-gradient(ellipse,#e8cd6c26,transparent 65%);filter:blur(12px)}.butterfly{position:absolute;width:24px;height:22px;filter:drop-shadow(0 0 7px #ffe990);animation:butterfly-flight 8s ease-in-out infinite;z-index:3}.butterfly i{position:absolute;background:linear-gradient(40deg,#d1a459,#fff1c9);width:12px;height:19px;border-radius:80% 20% 80% 30%;transform-origin:100% 100%;animation:flutter .7s ease-in-out infinite alternate}.butterfly i+ i{left:12px;transform-origin:0 100%;border-radius:20% 80% 30% 80%;animation-delay:-.35s}.b1{left:12%;top:70px;transform:rotate(-20deg)}.b2{right:10%;top:250px;animation-delay:-4s;scale:.7}.b3{left:16%;top:300px;animation-delay:-2s;scale:.5}.celebration{position:relative;z-index:5;max-width:342px;margin:0 auto}.invitation-copy{font-size:22px;line-height:1.35;margin:2px 0 18px}.invitation-copy em{display:inline-block;color:var(--gold);margin-top:12px}.ornament{font-size:24px;color:#d8bd7d;display:flex;align-items:center;justify-content:center;gap:25px;opacity:.85}.ornament span{font-size:20px}.event-date{font-size:34px;margin:18px 0 3px}.event-time{font:10px var(--sans);letter-spacing:2.5px;margin:0 0 27px}details{border-top:1px solid #c6ac6b55;border-bottom:1px solid #c6ac6b55;background:#0c2b2280}summary{cursor:pointer;list-style:none;min-height:56px;display:flex;align-items:center;justify-content:center;gap:12px;font:10px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}summary::-webkit-details-marker{display:none}.spark{font:23px var(--serif)}.plus{font:20px var(--serif);margin-left:10px}details[open] .plus{transform:rotate(45deg)}.details-content{padding:6px 18px 26px;animation:appear .45s ease-out}.details-content .eyebrow{font-size:8px}.details-content h3{font-size:33px;font-weight:400;margin:8px 0}.details-content>p:not(.eyebrow){font-size:19px;margin:0 0 22px}.map-button{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #e2cc87a6;border-radius:32px;min-height:48px;background:linear-gradient(120deg,#b2974625,#e8cd8912);font:10px var(--sans);letter-spacing:1px;text-decoration:none;color:#f7dfab}.map-button svg{width:17px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3}.closing{font-size:19px;font-style:italic;margin:36px 0 0;color:#daceaf}.signature{font-style:italic;font-size:47px;color:var(--gold);margin:4px 0 22px}.signature span{font-size:21px}.back-top{font:8px var(--sans);letter-spacing:1px;color:#c2bea5;text-decoration:none;display:inline-block;padding:15px}.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}.paused{scroll-behavior:auto}@keyframes float{50%{transform:translate(4px,-14px) rotate(1.2deg)}}@keyframes wing-right{50%{transform:perspective(500px) rotateY(42deg) rotate(-5deg)}}@keyframes wing-left{50%{transform:perspective(500px) scaleX(-1) rotateY(35deg) rotate(-5deg)}}@keyframes butterfly-flight{50%{translate:16px -30px;rotate:20deg}}@keyframes flutter{to{transform:scaleX(.25)}}@keyframes beckon{50%{transform:translateY(6px)}}@keyframes appear{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(max-width:360px){.opening{padding-left:18px;padding-right:18px}.eyebrow{letter-spacing:1.5px}.intro{font-size:18px}.fairy-float{scale:.92}.scene-caption h2{font-size:30px}}@media(max-height:740px){.opening{min-height:650px;padding-top:55px}.opening-bottom{padding-top:42px}.little-star{margin-bottom:14px}.next-scene{margin-top:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Second proposal: storybook lettering and a flight rig anchored at the back. */
:root{--serif:'Berkshire Swash',Georgia,serif;--sans:'Short Stack',sans-serif}
body{font-family:var(--sans)}
h1{font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(78px,22vw,108px);letter-spacing:-2px;line-height:1.35;margin:0}
.eyebrow{font-size:9px;letter-spacing:1.2px;text-transform:none;line-height:1.9}
.welcome{font-size:10px;letter-spacing:.7px;max-width:285px}
.age p{font:20px var(--serif)}.age em{font:32px var(--serif)}
.intro{font:12px/1.9 var(--sans);max-width:270px;margin:20px auto 0}
.date-preview{font:24px var(--serif)}.date-preview .time{font-size:10px;letter-spacing:1.2px}
.next-scene{font-size:9px;text-transform:none;letter-spacing:.5px}
.scene-caption h2{font:28px/1.3 var(--serif);max-width:330px;margin:9px auto 0}
.scene-caption .eyebrow{font-size:10px}
.fairy-stage{height:435px;margin-top:8px}
.fairy-float{width:360px;height:415px;margin-left:-180px;top:10px;transform-origin:50% 50%;animation:fairy-flight 6s ease-in-out infinite}
.bruna{width:258px;height:387px;object-fit:contain;left:51px;top:15px;bottom:auto;filter:saturate(.83) brightness(.88) drop-shadow(0 4px 8px #09241c22)}
.wing{width:195px;height:auto;top:40px;left:170px;right:auto;transform-origin:6% 60%;filter:saturate(.75) brightness(.84) drop-shadow(0 0 5px #e1ca7433);backface-visibility:visible}
.wing-right{animation:open-right 2.2s ease-in-out infinite;transform:rotate(-8deg)}
.wing-left{animation:open-left 2.2s ease-in-out infinite;transform:scaleX(-1) rotate(-8deg)}
.halo{inset:65px 35px 30px;background:radial-gradient(ellipse,#ead37e12,transparent 65%)}
.b1{left:9%;top:65px}.b2{right:8%;top:315px}.b3{left:15%;top:370px}
.invitation-copy{font:14px/1.9 var(--sans);margin:4px 0 22px}.invitation-copy em{font-style:normal;font-size:14px}
.event-date{font:30px var(--serif);margin:22px 0 10px}.event-time{font-size:11px;letter-spacing:1px;margin-bottom:25px}
.event-location{border-top:1px solid #c6ac6b55;border-bottom:1px solid #c6ac6b55;background:linear-gradient(180deg,#133d2c55,#0c2b2255);padding:25px 0 0}
.details-content{animation:none;padding:0 18px 27px}.details-content .eyebrow{font-size:9px}.details-content h3{font:30px var(--serif);margin:12px 0}.details-content>p:not(.eyebrow){font:12px/1.8 var(--sans);margin:0 0 23px}
.map-button{font-size:11px;letter-spacing:.2px;min-height:50px;background:linear-gradient(120deg,#b2974630,#e8cd8918)}
.closing{font:12px/1.9 var(--sans);margin:30px auto 10px;max-width:270px}.signature{font:42px var(--serif)}.back-top{font-size:9px;letter-spacing:0}
@keyframes fairy-flight{0%,100%{transform:translate(-3px,0) rotate(-3deg)}50%{transform:translate(5px,-12px) rotate(1deg)}}
@keyframes open-right{0%,100%{transform:perspective(650px) rotate(-8deg) rotateY(4deg)}50%{transform:perspective(650px) rotate(-3deg) rotateY(32deg)}}
@keyframes open-left{0%,100%{transform:perspective(650px) scaleX(-1) rotate(-8deg) rotateY(4deg)}50%{transform:perspective(650px) scaleX(-1) rotate(-3deg) rotateY(32deg)}}
@media(max-width:360px){.fairy-float{scale:.84}.scene-caption h2{font-size:25px}.intro{font-size:11px}.fairy-stage{height:400px}}

/* Keep animated scenery inside the viewport, outside the document's scroll area. */
html,body{overscroll-behavior-y:none;background-color:#071b16}
body{overflow-x:clip}
.invitation{overflow:clip}
.forest-window{position:fixed;top:0;left:50%;width:min(100%,480px);height:100vh;height:100dvh;transform:translateX(-50%);overflow:hidden;contain:strict;pointer-events:none;z-index:-1}
.forest-window .woodland,.forest-window .veil{position:absolute;left:0;width:100%;bottom:auto}
.forest-window .woodland{height:calc(100% + 40px);transform:translateY(var(--forest-y,0px)) scale(1.04)}
.forest-window .veil{height:100%;transform:none}

/* A bounded scroll journey: distant fairy, middle trees, then foreground. */
.journey{position:relative;height:100svh;min-height:580px;--near-scale:1;--mid-scale:1;--fairy-scale:.24;--intro-opacity:1;--whisper-opacity:0;--journey-progress:0}
.has-journey .journey{height:260svh}
.journey-viewport{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;isolation:isolate}
.journey-light{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 59%,#ddc76c1c,transparent 32%);pointer-events:none}
.journey .opening{position:absolute;inset:0;z-index:5;min-height:0;height:100%;max-height:none;padding:0 20px;opacity:var(--intro-opacity);transform:translateY(var(--intro-y,0px));pointer-events:none}
.journey .welcome{position:absolute;top:9%;left:50%;transform:translateX(-50%);width:90%}
.journey .title-group{position:absolute;top:17%;left:0;width:100%;margin:0;padding:0 12px}
.journey .little-star{font-size:22px;margin-bottom:10px}
.journey h1{font-size:clamp(76px,22vw,105px);line-height:1.2}
.journey .intro{margin:12px auto 0;font-size:11px}
.journey .opening-bottom{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:0;padding:0 18px;margin:0}
.journey .date-preview{font-size:23px;gap:7px}
.journey .next-scene{margin:16px auto 0;padding:8px;gap:6px;pointer-events:auto}
.journey .fairy-stage{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:1}
.fairy-approach{position:absolute;left:50%;top:61%;width:360px;height:415px;transform:translate(-50%,-50%) scale(var(--fairy-scale));transform-origin:50% 50%;will-change:transform}
.journey .fairy-float{position:relative;left:0;top:0;margin:0;scale:1}
.journey .halo{inset:30% 20% 10%;opacity:calc(.3 + var(--journey-progress)*.7)}
.journey .butterfly{opacity:var(--journey-progress)}
.journey .b1{top:42%}.journey .b2{top:70%}.journey .b3{top:76%}
.depth-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transform-origin:50% 61%;will-change:transform}
.depth-mid{z-index:2;transform:scale(var(--mid-scale));filter:brightness(.79) saturate(.85)}
.depth-near{z-index:3;transform:scale(var(--near-scale));filter:brightness(.58) saturate(.8)}
.journey-whisper{position:absolute;z-index:4;left:20px;right:20px;top:17%;text-align:center;font:18px/1.6 var(--serif);color:var(--gold);opacity:var(--whisper-opacity);text-shadow:0 2px 10px #06231e;margin:0;pointer-events:none}
.journey-destination{position:absolute;top:calc(100% - 100svh);left:0;width:1px;height:1px;pointer-events:none}
.forest-window .woodland{transform:translateY(var(--forest-y,0px)) scale(var(--forest-scale,1.04));transform-origin:50% 61%}
.fairy-scene{padding-top:35px}.fairy-scene .scene-caption{margin-bottom:32px}
.reduced-motion .journey{height:100svh}.reduced-motion .journey-viewport{position:relative}
.reduced-motion .depth-layer{will-change:auto}.reduced-motion .fairy-approach{will-change:auto}
@media(max-height:650px){.journey .title-group{top:13%}.journey .welcome{top:5%}.journey .intro{margin-top:7px}.journey h1{font-size:76px}.journey .little-star{margin-bottom:4px}.journey .next-scene{margin-top:8px}.journey .fairy-approach{top:62%}}