@font-face{font-family:"DM Serif Display";src:url("assets/fonts/dm-serif-display-latin.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("assets/fonts/dm-serif-display-italic-latin.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/fonts/dm-sans-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}

:root{color-scheme:dark;--midnight:#101c38;--deep:#20385d;--ice:#dceaf5;--silver:#bcc8d6;--white:#fafcff;--serif:"DM Serif Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{min-width:280px;min-height:100%;background:var(--midnight)}
body{margin:0;color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--white);outline-offset:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.experience{position:relative;isolation:isolate;width:100%;min-height:100svh;overflow:hidden;background:var(--midnight)}

/* The night continues behind the window, so the opening feels like moving into the sky. */
.cover{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;min-height:100dvh;padding:clamp(145px,19svh,205px) 25px 100px;overflow:hidden;background:radial-gradient(ellipse 65% 38% at 51% 48%,#254165 0%,#192e51 42%,transparent 100%),linear-gradient(180deg,#101c38 0%,#142545 53%,#091529 100%);opacity:0;transform:scale(1.055);transition:opacity 1.65s ease,transform 2s cubic-bezier(.16,.65,.2,1)}
.cover.is-visible,.no-js .cover{opacity:1;transform:none}
.sky-haze{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 48% 32% at 50% 96%,rgba(179,207,233,.15),transparent 100%),radial-gradient(ellipse 28% 20% at 25% 28%,rgba(113,156,199,.09),transparent 100%)}
.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.stars i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:var(--white);opacity:var(--opacity);box-shadow:0 0 8px 1px rgba(220,234,245,.34)}
.stars i.twinkle{animation:twinkle 6s ease-in-out var(--delay) infinite}
@keyframes twinkle{0%,100%{opacity:calc(var(--opacity) * .65)}50%{opacity:var(--opacity)}}
.moon{position:absolute;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff 0%,#e8f1f8 48%,#b9cbdb 77%,#91acc8 100%);box-shadow:0 0 27px rgba(220,234,245,.45),0 0 90px 14px rgba(153,185,215,.16),inset -8px -10px 13px rgba(60,90,135,.18)}
.moon::after{content:"";position:absolute;inset:17% 16% auto auto;width:18%;aspect-ratio:1;border-radius:50%;background:#a2bbd0;opacity:.14}
.moon--cover{top:12%;right:20%;width:clamp(38px,5.4vw,72px);aspect-ratio:1}
.light-arc{position:absolute;top:-8px;left:0;width:100%;height:clamp(105px,18vw,200px);overflow:visible;filter:drop-shadow(0 0 8px rgba(250,252,255,.53));pointer-events:none}

/* Metallic ribbons and light-catching glass are composed in layers. */
.ornament{position:absolute;top:0;z-index:1;pointer-events:none;transform-origin:top center;animation:sway 8s ease-in-out infinite alternate}
.ornament .ribbon{position:absolute;bottom:calc(100% - 2px);left:50%;width:1px;height:var(--drop);background:linear-gradient(90deg,#6e89a6,#e5eff6,#7992aa);box-shadow:1px 0 2px rgba(246,250,255,.35)}
.ornament--star{width:var(--size);height:var(--size);margin-top:var(--drop)}
.ornament--star svg{display:block;width:100%;height:100%;filter:drop-shadow(0 5px 10px rgba(0,9,27,.44))}
.star-shell{fill:#c8d5e2;stroke:#f3f8fc;stroke-width:1.3;stroke-linejoin:round}
.star-line{fill:none;stroke:#839bb2;stroke-width:1;stroke-linecap:round}
.ornament--one{--drop:26svh;--size:42px;left:12%;animation-delay:-2s}
.ornament--two{--drop:15svh;--size:28px;left:78%;animation-delay:-4s}
.ornament--three{--drop:36svh;--size:21px;left:90%;animation-delay:-1s}
.ornament--bauble{width:var(--size);height:var(--size);margin-top:var(--drop)}
.ornament--four{--drop:15svh;--size:68px;left:8%;animation-delay:-5s}
.ornament--five{--drop:29svh;--size:51px;right:9%;animation-delay:-3s}
.ornament--six{--drop:11svh;--size:31px;left:72%;animation-delay:-6s}
.ornament .cap,.window-bauble-cap{position:absolute;z-index:2;top:-6px;left:50%;width:28%;height:10px;transform:translateX(-50%);border:1px solid #e1ebf3;border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,#738da6,#edf5fa 45%,#8da4b9)}
.ornament .glass,.window-bauble-glass{position:absolute;inset:0;overflow:hidden;border:1.5px solid rgba(228,240,249,.81);border-radius:50%;background:radial-gradient(circle at 26% 22%,rgba(255,255,255,.72) 0 2%,transparent 15%),radial-gradient(circle at 73% 77%,rgba(188,215,239,.48),transparent 41%),radial-gradient(circle at 40% 36%,rgba(222,237,249,.26),rgba(90,137,180,.16) 56%,rgba(216,233,246,.44) 100%);box-shadow:inset -9px -10px 18px rgba(190,215,236,.29),inset 7px 8px 16px rgba(255,255,255,.17),0 12px 23px rgba(1,10,27,.27)}
.ornament .glass::before,.window-bauble-glass::before{content:"";position:absolute;top:12%;left:18%;width:31%;height:24%;border-top:2px solid rgba(255,255,255,.85);border-left:2px solid rgba(255,255,255,.62);border-radius:50%;transform:rotate(-28deg);filter:blur(.2px)}
.ornament .glass::after,.window-bauble-glass::after{content:"";position:absolute;right:9%;bottom:12%;width:15%;height:9%;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(3px)}
.ornament .glass i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
.ornament .glass i:nth-child(1){left:32%;top:62%}.ornament .glass i:nth-child(2){left:57%;top:27%}.ornament .glass i:nth-child(3){left:68%;top:72%}
@keyframes sway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}

.cover-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(100%,900px);text-align:center;text-shadow:0 2px 24px rgba(4,14,35,.6)}
@keyframes content-in{to{opacity:1;transform:none}}
.eyebrow{margin:0 0 2rem;color:var(--silver);font-size:clamp(.63rem,1.1vw,.75rem);font-weight:600;letter-spacing:.32em;line-height:1.6;text-transform:uppercase}
.cover h1{margin:0;font:400 clamp(3.1rem,8vw,7.2rem)/.99 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.cover h1 em{color:var(--ice);font-weight:400}
.cover h1:focus{outline:none}
.cover-divider{display:flex;align-items:center;gap:15px;margin:clamp(28px,5vh,48px) 0 22px;color:#e3edf5;font-size:1rem}
.cover-divider span{width:46px;height:1px;background:linear-gradient(90deg,transparent,#bacddd)}

.family{margin:0;color:var(--white);font:400 clamp(1.55rem,3.2vw,2.2rem)/1.3 var(--serif)}
.message{max-width:500px;margin:18px auto 0;color:var(--ice);font-size:clamp(.91rem,1.35vw,1.02rem);line-height:1.75}
.discover{position:absolute;z-index:3;bottom:clamp(25px,6svh,58px);display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--ice);font-size:.72rem;font-weight:600;letter-spacing:.19em;text-decoration:none;text-transform:uppercase;opacity:0}
.cover.is-visible .discover,.no-js .discover{animation:content-in .7s ease 1.35s forwards}
.discover span{font-size:1.55rem;font-weight:300;line-height:1}
.discover:hover{color:#fff}

/* Interior wall, full-height window and hinged glass leaves. */
.entry{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;min-height:100dvh;padding:clamp(22px,4svh,50px) 16px;overflow:hidden;background:radial-gradient(ellipse 64% 65% at 50% 40%,#334b68 0%,#162947 58%,#0a1730 100%)}
.entry::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,12,30,.38),transparent 23% 77%,rgba(3,12,30,.38)),radial-gradient(ellipse at 50% 100%,rgba(3,11,26,.8),transparent 67%)}
.room-glow{position:absolute;top:6%;left:50%;width:70vw;height:70vh;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(179,208,232,.16),transparent 67%);pointer-events:none}
.entry h2{position:relative;z-index:2;margin:0 0 clamp(19px,3svh,38px);font:400 clamp(1.75rem,4.5vw,3.3rem)/1.06 var(--serif);letter-spacing:-.015em;text-align:center;text-shadow:0 6px 28px #08162c}
.entry h2 em{font-weight:400;color:var(--ice)}
.window-wrap{position:relative;z-index:2;width:min(91vw,830px);height:min(67svh,620px);min-height:270px;filter:drop-shadow(0 30px 32px rgba(0,8,27,.48))}
.window{position:absolute;inset:0;overflow:visible;border:14px solid #152a49;border-radius:7px;background:#122647;box-shadow:inset 0 0 0 2px #8da3ba,inset 0 0 0 7px #1d3656,0 0 0 2px #9eaec0,0 0 0 10px #102442,0 0 0 12px #687f9a;perspective:1250px;transform-style:preserve-3d}
.window-sky{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 48% 72%,#365679 0%,#213b60 43%,#101c38 100%);transition:transform 1.9s cubic-bezier(.2,.7,.2,1)}
.moon--window{top:20%;right:24%;width:clamp(30px,5vw,63px);aspect-ratio:1}
.window-garland{position:absolute;z-index:3;top:0;left:0;width:100%;height:95px;overflow:visible;filter:drop-shadow(0 0 5px #fafcff);pointer-events:none}
.window-bauble{position:absolute;z-index:3;top:0;width:36px;height:36px;pointer-events:none;transform-origin:top center;animation:sway 8s ease-in-out infinite alternate}
.window-bauble--left{left:19%;margin-top:87px}.window-bauble--right{right:14%;margin-top:58px;animation-delay:-4s}
.window-bauble-ribbon{position:absolute;bottom:calc(100% - 2px);left:50%;width:1px;height:70px;background:linear-gradient(90deg,#5c7590,#ecf3fa,#7891ab)}
.window-bauble--right .window-bauble-ribbon{height:42px}
.window-leaf{position:absolute;top:0;bottom:0;z-index:2;width:50%;border:7px solid #1b3354;background:rgba(59,95,135,.19);box-shadow:inset 0 0 0 2px #9db2c7,inset 0 0 0 6px #203b60,0 5px 13px rgba(4,17,41,.5);transform-style:preserve-3d;backface-visibility:visible;transition:transform 1.55s cubic-bezier(.28,.66,.1,1)}
.window-leaf--left{left:0;transform-origin:left center;border-right-width:9px}
.window-leaf--right{right:0;transform-origin:right center;border-left-width:9px}
.pane{position:absolute;inset:5px;overflow:hidden;border:1px solid rgba(220,234,245,.42);background:linear-gradient(135deg,rgba(228,244,255,.12),rgba(228,244,255,.015) 45%,rgba(226,243,255,.09));box-shadow:inset 0 0 25px rgba(237,246,255,.15),inset 0 0 0 1px rgba(8,26,54,.2)}
.pane::after{content:"";position:absolute;inset:12% 76% 7% 12%;transform:skew(-17deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);filter:blur(3px)}
.reflection{position:absolute;top:-15%;left:31%;width:27%;height:135%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(250,252,255,.12) 42%,rgba(250,252,255,.23) 50%,transparent 58%);filter:blur(2px);transition:opacity .7s ease}
.sash{position:absolute;top:49%;left:0;width:100%;height:9px;border-top:1px solid #cbd6e1;border-bottom:1px solid #96aabd;background:#1b3455;box-shadow:0 4px 8px rgba(0,10,27,.38)}
.handle{position:absolute;z-index:4;top:54%;width:5px;height:27px;border:1px solid #f4f8fc;border-radius:4px;background:linear-gradient(90deg,#829ab2,#e8f1f7,#9fb3c8);box-shadow:0 2px 7px rgba(0,5,18,.55)}
.window-leaf--left .handle{right:14px}.window-leaf--right .handle{left:14px}
.window-frame{position:absolute;inset:-14px;z-index:4;border:14px solid #142b4a;border-radius:7px;box-shadow:inset 0 0 0 2px #b5c3d2,inset 0 0 0 5px #254062,0 0 0 2px #a5b7c8;pointer-events:none}
.window-sill{position:absolute;z-index:5;left:-3.2%;right:-3.2%;bottom:-27px;height:20px;border-top:2px solid #aebfd0;border-radius:2px 2px 6px 6px;background:linear-gradient(180deg,#284566,#142c4d 45%,#0b1c36 100%);box-shadow:0 11px 12px rgba(0,8,24,.45)}
.window-trigger{position:absolute;inset:-14px;z-index:6;width:calc(100% + 28px);height:calc(100% + 28px);border:0;border-radius:7px;background:transparent;cursor:pointer}
.window-trigger:focus-visible{outline:3px solid var(--white);outline-offset:17px}
.entry-hint{position:relative;z-index:2;margin:clamp(38px,5svh,52px) 0 0;color:var(--ice);font-size:clamp(.7rem,1.2vw,.82rem);font-weight:600;letter-spacing:.15em;line-height:1.5;text-align:center;text-transform:uppercase}
.entry-hint span{display:block;margin-top:7px;color:var(--silver);font-size:1.25rem}
.entry.is-opening .window-trigger{pointer-events:none}
.no-js .entry{display:none}


/* ───────── Ambient life: parallax, snow, lights and glints ───────── */
.experience{--px:0;--py:0}
.snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.snow--cover{z-index:0}
.snow--window{z-index:1}
.stars--cover{translate:calc(var(--px) * -6px) calc(var(--py) * -4px)}
.moon--cover{translate:calc(var(--px) * -12px) calc(var(--py) * -8px);animation:moon-breathe 7s ease-in-out infinite}
.sky-haze{translate:calc(var(--px) * -4px) calc(var(--py) * -3px);animation:haze-drift 18s ease-in-out infinite alternate}
@keyframes moon-breathe{50%{box-shadow:0 0 34px rgba(220,234,245,.6),0 0 120px 22px rgba(153,185,215,.22),inset -8px -10px 13px rgba(60,90,135,.18)}}
@keyframes haze-drift{to{opacity:.7;transform:scale(1.08)}}

/* A falling star crosses the sky now and then. */
.shooting-star{position:absolute;top:14%;left:18%;z-index:0;width:130px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(250,252,255,.9));opacity:0;transform:rotate(-20deg) translateX(0);transform-origin:right center;pointer-events:none}
.shooting-star::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.8);transform:translateY(-50%)}
.cover.is-visible .shooting-star{animation:shoot 11s cubic-bezier(.4,0,.6,1) 4.5s infinite}
@keyframes shoot{0%{opacity:0;transform:rotate(-20deg) translateX(-60px) scaleX(.3)}1.5%{opacity:1}7%{opacity:0;transform:rotate(-20deg) translateX(-360px) scaleX(1)}100%{opacity:0;transform:rotate(-20deg) translateX(-360px)}}

/* The garland draws itself, then each bulb switches on and keeps shimmering. */
.arc-wire{stroke-dasharray:1;stroke-dashoffset:1}
.cover.is-visible .arc-wire,.no-js .arc-wire{transition:stroke-dashoffset 1.3s cubic-bezier(.45,0,.2,1) .1s;stroke-dashoffset:0}
.arc-bulb{opacity:0}
.cover.is-visible .arc-bulb,.no-js .arc-bulb{animation:bulb-on .5s ease-out calc(.3s + var(--n) * .08s) forwards}
.arc-bulb use{animation:bulb-shimmer 3.2s ease-in-out calc(var(--n) * -.53s) infinite}
@keyframes bulb-on{0%{opacity:0}45%{opacity:1}65%{opacity:.45}100%{opacity:1}}
@keyframes bulb-shimmer{0%,100%{opacity:1}50%{opacity:.5}}
.garland-bulbs circle{animation:bulb-shimmer 2.6s ease-in-out infinite}
.garland-bulbs circle:nth-child(3n+1){animation-delay:-.9s}.garland-bulbs circle:nth-child(3n+2){animation-delay:-1.8s}

/* Ornaments drop in on their ribbons with a soft bounce, then follow the pointer by depth. */
.ornament{top:calc(-1 * var(--drop) - var(--size) - 60px);translate:calc(var(--px) * var(--depth,14px)) calc(var(--py) * var(--depth,14px) * .5);transition:top 1.5s cubic-bezier(.3,1.35,.45,1) var(--fall,0s)}
.cover.is-visible .ornament,.no-js .ornament{top:0}
.ornament--one{--depth:18px;--fall:.25s}.ornament--two{--depth:10px;--fall:.55s}.ornament--three{--depth:7px;--fall:.75s}
.ornament--four{--depth:24px;--fall:.15s}.ornament--five{--depth:20px;--fall:.4s}.ornament--six{--depth:9px;--fall:.65s}
.ornament--star::after{content:"✦";position:absolute;top:-8%;right:-14%;color:#fff;font-size:calc(var(--size) * .5);line-height:1;text-shadow:0 0 8px #fff,0 0 16px rgba(220,234,245,.8);transform:scale(0) rotate(0);animation:glint 5.5s ease-in-out infinite;animation-delay:inherit}
@keyframes glint{0%,78%,100%{transform:scale(0) rotate(0);opacity:0}86%{transform:scale(1) rotate(90deg);opacity:1}94%{transform:scale(0) rotate(180deg);opacity:0}}
.ornament .glass i{animation:glitter 2.8s ease-in-out infinite}
.ornament .glass i:nth-child(2){animation-delay:-1s}.ornament .glass i:nth-child(3){animation-delay:-1.9s}
@keyframes glitter{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
.ornament .glass::before{animation:glass-sheen 6s ease-in-out infinite alternate}
@keyframes glass-sheen{to{opacity:.55;transform:rotate(-18deg) translate(6%,4%)}}

/* Cover text arrives line by line, out of a soft blur. */
.cover-content>*{opacity:0;transform:translateY(18px);filter:blur(6px)}
.cover.is-visible .cover-content>*,.no-js .cover-content>*{animation:reveal 1s cubic-bezier(.2,.7,.2,1) calc(.45s + var(--i) * .14s) forwards}
@keyframes reveal{to{opacity:1;transform:none;filter:blur(0)}}
.cover h1 em{background:linear-gradient(100deg,var(--ice) 0%,var(--ice) 38%,#fff 48%,#f4f9ff 52%,var(--ice) 62%,var(--ice) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;text-shadow:none;filter:drop-shadow(0 2px 18px rgba(4,14,35,.55))}
.cover.is-visible h1 em{animation:shine 6.5s ease-in-out 2.6s infinite}
@keyframes shine{0%{background-position:100% 0}35%,100%{background-position:0 0}}
.cover-divider span{transform-origin:right center;transform:scaleX(0)}
.cover-divider span:last-child{transform:scaleX(0);transform-origin:left center;background:linear-gradient(270deg,transparent,#bacddd)}
.cover.is-visible .cover-divider span{animation:line-grow 1s cubic-bezier(.2,.7,.2,1) .95s forwards}
@keyframes line-grow{to{transform:scaleX(1)}}
.cover-divider b{display:inline-block;text-shadow:0 0 12px rgba(250,252,255,.9)}
.cover.is-visible .cover-divider b{animation:spark-turn 9s linear infinite}
@keyframes spark-turn{to{transform:rotate(360deg)}}
.cover.is-visible .discover,.no-js .discover{animation:content-in .8s ease 1.4s forwards}
.discover span{animation:nudge 2.2s ease-in-out 2.2s infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(7px);opacity:1}}
.discover{transition:color .3s ease,letter-spacing .4s ease}
.discover:hover{letter-spacing:.24em}

/* The window invites a touch: it rattles in the breeze and opens a crack on hover. */
.room-glow{animation:room-breathe 6s ease-in-out infinite}
@keyframes room-breathe{50%{opacity:.65}}
.entry h2,.window-wrap,.entry-hint{animation:entry-rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.window-wrap{animation-delay:.15s}.entry-hint{animation-delay:.35s}
@keyframes entry-rise{from{opacity:0;transform:translateY(22px)}}
.entry-hint span{animation:hint-glow 2.4s ease-in-out infinite}
@keyframes hint-glow{50%{transform:scale(1.35) rotate(45deg);color:#fff;text-shadow:0 0 12px #fff}}
.window-leaf--left{animation:rattle-left 7s ease-in-out 2s infinite}
.window-leaf--right{animation:rattle-right 7s ease-in-out 2s infinite}
@keyframes rattle-left{0%,84%,100%{transform:rotateY(0)}88%{transform:rotateY(-6deg)}92%{transform:rotateY(-1.5deg)}95%{transform:rotateY(-3deg)}}
@keyframes rattle-right{0%,84%,100%{transform:rotateY(0)}88%{transform:rotateY(6deg)}92%{transform:rotateY(1.5deg)}95%{transform:rotateY(3deg)}}
.window-light{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 30% 60% at 50% 50%,rgba(250,252,255,.4),rgba(190,215,240,.14) 55%,transparent 80%);opacity:0;transition:opacity .5s ease}
.window-wrap:has(.window-trigger:hover,.window-trigger:focus-visible) .window-leaf--left{animation:none;transform:rotateY(-11deg)}
.window-wrap:has(.window-trigger:hover,.window-trigger:focus-visible) .window-leaf--right{animation:none;transform:rotateY(11deg)}
.window-wrap:has(.window-trigger:hover,.window-trigger:focus-visible) .window-light{opacity:.6}
.window-wrap:has(.window-trigger:hover,.window-trigger:focus-visible) .handle{transform:rotate(-35deg)}
.handle{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}

/* Opening: the handles turn and the leaves swing out, then the camera moves in through the open window to the sky. */
.entry{transform-origin:var(--zoom-x,50%) var(--zoom-y,50%)}
.cover{transform:scale(.92);transition:opacity .8s ease,transform 1.6s cubic-bezier(.16,.65,.2,1)}
.entry.is-opening{animation:approach 1.3s cubic-bezier(.6,0,.3,1) .55s forwards}
.entry.is-opening .window-wrap,.entry.is-opening h2,.entry.is-opening .entry-hint{animation:none}
.entry.is-opening .window-leaf{animation:none;transition:transform .95s cubic-bezier(.3,1.15,.4,1) .12s}
.entry.is-opening .window-leaf--left{transform:rotateY(-108deg)}
.entry.is-opening .window-leaf--right{transform:rotateY(108deg)}
.entry.is-opening .handle{transform:rotate(-90deg);transition-duration:.2s}
.entry.is-opening .reflection{opacity:0}
.entry.is-opening .window-light{opacity:.7;transition:opacity .8s ease .2s}
.entry.is-opening .window-sky{transform:scale(1.12)}
.entry.is-opening h2,.entry.is-opening .entry-hint{opacity:0;transition:opacity .4s ease}
@keyframes approach{0%{transform:scale(1);opacity:1;filter:blur(0)}70%{opacity:1;filter:blur(0)}100%{transform:scale(var(--zoom,4));opacity:0;filter:blur(3px)}}


@media(max-width:700px){
  .cover{padding:145px 25px 100px}
  .moon--cover{top:15%;right:18%;width:43px}
  .light-arc{height:130px}
  .ornament--one{left:5%;--drop:23svh;--size:27px}.ornament--two{left:82%;--drop:19svh;--size:23px}.ornament--three{left:92%;--drop:35svh;--size:15px}
  .ornament--four{left:-20px;--drop:17svh;--size:53px}.ornament--five{right:-15px;--drop:31svh;--size:47px}.ornament--six{left:79%;--drop:11svh;--size:25px}
  .cover-content{width:min(100%,480px)}
  .eyebrow{margin-bottom:24px;letter-spacing:.24em}
  .cover h1{font-size:clamp(3rem,11vw,4.6rem)}
  .message{max-width:340px;font-size:.9rem}
  .window-wrap{width:86vw;height:min(62svh,610px)}
  .window{border-width:9px}
  .window-frame{inset:-9px;border-width:9px}
  .window-leaf{border-width:5px}.window-leaf--left{border-right-width:7px}.window-leaf--right{border-left-width:7px}
  .window-trigger{inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px)}
  .window-bauble--left{left:12%;margin-top:80px}.window-bauble--right{right:10%;margin-top:53px}
  .window-sill{bottom:-21px;height:15px}
}
@media(max-width:430px){
  .entry{padding:18px 16px}
  .entry h2{font-size:clamp(1.8rem,8vw,2.4rem);margin-bottom:24px}
  .window-wrap{width:84vw;height:min(61svh,535px);min-height:320px}
  .window-garland{height:65px}
  .window-bauble{width:26px;height:26px}.window-bauble--left{margin-top:64px}.window-bauble--right{margin-top:45px}
  .window-bauble-ribbon{height:50px}.window-bauble--right .window-bauble-ribbon{height:30px}
  .entry-hint{max-width:265px;font-size:.67rem;letter-spacing:.12em;margin-top:34px}
  .moon--window{right:18%;width:35px}
}
@media(max-height:620px){.entry h2{margin-bottom:16px}.window-wrap{height:56svh;min-height:230px}.entry-hint{margin-top:28px}.cover{padding-top:100px}.light-arc{height:90px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .stars i.twinkle,.ornament,.window-bauble,.window-leaf,.shooting-star,.arc-bulb use,.garland-bulbs circle,.ornament--star::after,.discover span,.cover h1 em{animation:none!important}
  .snow{display:none}
  .ornament{top:0;translate:none}
  .arc-wire{stroke-dashoffset:0}.arc-bulb{opacity:1}
  .cover-content>*,.cover-divider span{opacity:1;transform:none;filter:none}
  .entry.is-opening{animation:none!important;transform:none}
  .entry.is-opening .window-leaf{transform:none}
  .entry.is-opening{opacity:0;transition:opacity .2s ease!important}
  .entry.is-opening .window-leaf,.entry.is-opening .window-sky{transform:none}
  .cover.is-visible .discover{opacity:1;transform:none}
}