/* Reference: foil blooms, seal rises, light escapes, stationery appears. */
:root{--foil-image:url('envelope-foil.webp')}
.monogram{display:inline-flex;gap:3px;align-items:center}.monogram span{margin:0!important;top:4px!important}
.envelope{transition:none;background:#160a0c}.envelope-inner{perspective:none;background:#210c10}.cover-title,.cover-footer{display:none}.lining{background:#281013}
.wing{background:linear-gradient(90deg,#1b090c,#321217 45%,#1c0a0d);filter:drop-shadow(0 0 1px #c8a882);transition:none}.wing svg{opacity:.06}
.wing:after,.bottom-flap:before{content:'';position:absolute;inset:0;background:var(--foil-image) center/100% 100%;opacity:.12;mix-blend-mode:screen;clip-path:inset(0);pointer-events:none}
.top-flap{background:linear-gradient(180deg,#4d1b24 0%,#331017 35%,#220c11 70%);filter:drop-shadow(0 2px 3px #100306);backface-visibility:visible;transition:none}.top-flap:after{background:#b5a18a9c}.bottom-flap{background:linear-gradient(180deg,#2a0e13,#220d11);transition:none}.bottom-flap:after{background:#9b866f88}
.wax{width:88px;height:88px;background:radial-gradient(ellipse at 33% 22%,#f5d4b4,#dbb18e 46%,#b98764 78%,#f0c7a6);color:#a87b59;box-shadow:0 5px 8px #0009,inset 0 0 1px 3px #efd0ad,inset -4px -6px 5px #9e6a4e88;clip-path:polygon(50% 0%,61% 3%,72% 2%,81% 10%,84% 19%,95% 26%,97% 39%,100% 49%,96% 62%,97% 72%,87% 81%,79% 85%,72% 96%,59% 97%,48% 100%,37% 96%,25% 96%,18% 87%,8% 81%,4% 70%,5% 60%,0% 49%,4% 38%,4% 25%,14% 18%,20% 9%,33% 6%,41% 1%);transition:none;animation:seal-breathe 3.5s ease-in-out infinite}
.wax:before{inset:8px;border-color:#bd9270;box-shadow:0 1px 1px #fff8,inset 0 2px 3px #a9774b55}.wax-ring{inset:14px;border-color:#c89e78;box-shadow:inset 0 0 2px #956d51}.monogram{font-size:32px}.monogram span{font-size:27px}.wax:hover{transform:translate(-50%,-50%) rotate(-9deg) scale(1.025)}
.glow{inset:0;z-index:5;opacity:0;background:radial-gradient(ellipse 8% 11% at 50% 52%,#fffef1 0%,#fff1bc 20%,#ffc371a6 50%,#ffa94b00 100%),radial-gradient(ellipse 45% 34% at 50% 52%,#ffb64650,transparent 80%);mix-blend-mode:screen;transition:none}
.glow:before{content:'';position:absolute;left:48.2%;top:47%;width:3.6%;height:12%;background:#fffbea;box-shadow:0 0 12px 8px #fff0bc,0 0 32px 17px #ffc46a,0 0 70px 25px #ffb33e77;filter:blur(2px);transform:scaleY(.2)}
.glow:after{content:'';position:absolute;inset:22% 10%;background:repeating-conic-gradient(from 0deg at 50% 52%,transparent 0deg,#ffe4a455 2deg,transparent 5deg,transparent 45deg);filter:blur(3px);mask-image:radial-gradient(ellipse,#000 8%,transparent 68%)}
.opening.envelope{opacity:1;visibility:visible;animation:envelope-away 7.6s linear forwards}
.opening .wing-right{animation:right-door 7.6s cubic-bezier(.4,0,.2,1) forwards}.opening .wing-left{animation:left-door 7.6s cubic-bezier(.4,0,.2,1) forwards}
.opening .wing:after,.opening .bottom-flap:before{animation:foil-bloom 7.6s ease-in-out forwards}
.opening .top-flap{animation:upper-fold 7.6s ease-in-out forwards;transform:none}.opening .bottom-flap{animation:lower-fold 7.6s ease-in-out forwards;transform:none}.opening .wax{animation:seal-rise 7.6s ease-in-out forwards}.opening .glow{animation:light-release 7.6s ease-in-out forwards}.opening .glow:before{animation:light-slit 7.6s ease-in-out forwards}
.opened main{animation:stationery-in 8.6s ease-out both}
h1{flex-direction:column;gap:0;font-size:72px;line-height:1.1;margin-top:20px}h1 em{margin:0;font-size:25px;line-height:1}h1 span:last-child{margin-top:-5px}.hero-copy .flourish{margin-top:8px}
@keyframes foil-bloom{0%,5%{opacity:.1;clip-path:inset(0)}28%{opacity:.22}48%{opacity:.13}68%{opacity:.32}84%,100%{opacity:.18;clip-path:inset(0)}}
@keyframes seal-rise{0%,36%{top:50%;opacity:1;transform:translate(-50%,-50%) rotate(-9deg)}64%,79%{top:36%;opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(1.04)}90%{top:24%;opacity:0;transform:translate(-50%,-50%) rotate(-9deg) scale(1.14)}100%{top:20%;opacity:0}}
@keyframes upper-fold{0%,36%{transform:translateY(0);filter:brightness(1)}64%,84%{transform:translateY(-14%);filter:brightness(2)}100%{transform:translateY(-18%);filter:brightness(2)}}
@keyframes lower-fold{0%,36%{transform:translateY(0)}64%,84%{transform:translateY(14%)}100%{transform:translateY(18%)}}
@keyframes right-door{0%,36%{transform:translateX(0)}64%,84%{transform:translateX(6%)}100%{transform:translateX(9%)}}
@keyframes left-door{0%,36%{transform:translateX(0)}64%,84%{transform:translateX(-6%)}100%{transform:translateX(-9%)}}
@keyframes light-release{0%,34%{opacity:0;transform:scale(.5)}47%{opacity:.75;transform:scale(.8)}62%,78%{opacity:1;transform:scale(1.2)}90%{opacity:1;transform:scale(2.1)}100%{opacity:0;transform:scale(3)}}
@keyframes light-slit{0%,35%{transform:scaleY(0)}65%,80%{transform:scaleY(1)}100%{transform:scaleY(2)}}
@keyframes envelope-away{0%,83%{opacity:1}100%{opacity:0}}
@keyframes stationery-in{0%,68%{filter:brightness(1.3)}100%{filter:brightness(1)}}
@keyframes seal-breathe{50%{filter:brightness(1.08)}}
@media(max-width:600px){.wax{width:96px;height:96px}h1{font-size:67px}.hero-copy{padding-top:25px}}
@media(prefers-reduced-motion:reduce){.opening.envelope{opacity:0}.opened main{transform:none;filter:none}}

/* Light is masked by the engraved botanical artwork, travelling along each vine. */
.hero{height:100svh;min-height:660px;max-height:1100px;background:#f5e8da}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.hero-copy{position:absolute;top:21%;width:100%;padding:0 40px}
.hero .eyebrow{font-family:Amiri,serif;font-size:26px;margin:0 0 4px;color:#6c3428}
.hero .intro{font-size:18px;color:#6c3428}
.hero h1{margin-top:26px;font-size:72px;color:#591e24}
.hero-copy .flourish{display:none}
.hero-bottom{bottom:24%;}.hero-bottom p{font-size:21px}.hero-bottom .scroll-hint{font-size:28px;line-height:1.1}
nav{position:sticky;top:0;background:#f5e8daf5;z-index:8}
@media(max-height:740px){.hero h1{font-size:58px;margin-top:16px}.hero .eyebrow{font-size:23px}.hero .intro{font-size:16px}}
.wing:before,.foil-light{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--foil-image) center/100% 100%;mix-blend-mode:screen;filter:url('#engraving-light');opacity:0;mask-repeat:no-repeat;mask-size:100% 32%;mask-image:radial-gradient(ellipse 47% 46% at 15% 50%,#fff 4%,#ffffffde 24%,#ffffff55 52%,transparent 80%)}
.wing-right:before{mask-image:radial-gradient(ellipse 47% 46% at 85% 50%,#fff 4%,#ffffffde 24%,#ffffff55 52%,transparent 80%)}
.opening .wing-left:before{animation:vine-light-left 7.6s linear forwards}
.opening .wing-right:before{animation:vine-light-right 7.6s linear forwards}
.foil-light{mask-size:100% 38%;mask-image:radial-gradient(ellipse 70% 46% at 50% 50%,#fff 4%,#ffffffb0 30%,transparent 78%)}
.opening .foil-light{animation:vine-light-bottom 7.6s linear forwards}
@keyframes vine-light-left{0%{opacity:0;mask-position:0 40%}7%{opacity:.9;mask-position:0 35%}18%{opacity:1;mask-position:0 9%}33%{opacity:1;mask-position:0 68%}44%{opacity:.85;mask-position:0 100%}52%{opacity:0;mask-position:0 110%}58%{opacity:.8;mask-position:0 95%}73%{opacity:1;mask-position:0 28%}84%{opacity:.5;mask-position:0 0%}100%{opacity:0;mask-position:0 -30%}}
@keyframes vine-light-right{0%,5%{opacity:0;mask-position:0 44%}12%{opacity:1;mask-position:0 32%}23%{opacity:1;mask-position:0 10%}38%{opacity:1;mask-position:0 72%}48%{opacity:.85;mask-position:0 100%}55%{opacity:0;mask-position:0 110%}61%{opacity:.8;mask-position:0 95%}76%{opacity:1;mask-position:0 30%}87%{opacity:.5;mask-position:0 0%}100%{opacity:0;mask-position:0 -30%}}
@keyframes vine-light-bottom{0%,25%{opacity:0;mask-position:0 55%}32%{opacity:.7;mask-position:0 70%}43%{opacity:1;mask-position:0 100%}52%{opacity:0;mask-position:0 120%}62%{opacity:.8;mask-position:0 100%}77%{opacity:1;mask-position:0 60%}90%,100%{opacity:0;mask-position:0 40%}}