@layer theme,base;@layer components{.snow{pointer-events:none;position:absolute;inset:0;overflow:hidden}.snow__far{opacity:.5;background-image:radial-gradient(1.2px 1.2px at 22px 30px,#f4f7ff 60%,#0000),radial-gradient(1.2px 1.2px at 96px 84px,#f4f7ff 60%,#0000),radial-gradient(1px 1px at 150px 18px,#f4f7ff 60%,#0000),radial-gradient(1.4px 1.4px at 58px 142px,#f4f7ff 60%,#0000),radial-gradient(1px 1px at 134px 124px,#f4f7ff 60%,#0000),radial-gradient(1.2px 1.2px at 170px 160px,#f4f7ff 60%,#0000),radial-gradient(1px 1px at 40px 96px,#f4f7ff 60%,#0000),radial-gradient(1.3px 1.3px at 112px 40px,#f4f7ff 60%,#0000),radial-gradient(1px 1px at 18px 64px,#f4f7ff 60%,#0000),radial-gradient(1.2px 1.2px at 80px 112px,#f4f7ff 60%,#0000);background-size:180px 180px,180px 180px,180px 180px,180px 180px,180px 180px,180px 180px,135px 135px,135px 135px,135px 135px,135px 135px;animation:45s linear infinite snow-far;position:absolute;inset:-540px 0 0}.snow__fall{height:100%;color:var(--snow-50);transform:translateY(var(--rest));animation:snow-column var(--fall-dur,18s) linear var(--fall-delay,0s) infinite;position:absolute;top:0}.snow__sway{animation:snow-turn var(--sway-dur,6s) ease-in-out var(--sway-delay,0s) infinite alternate;display:block}.snow__sway svg{fill:currentColor;display:block}}@layer utilities;@keyframes snow-far{0%{transform:translate(0,0)}to{transform:translateY(540px)}}@keyframes snow-column{0%{transform:translateY(-20px)}to{transform:translateY(calc(100% + 20px))}}@keyframes snow-turn{0%{transform:translateX(calc(var(--sway,10px) * -1)) rotate(0deg)}to{transform:translateX(var(--sway,10px)) rotate(180deg)}}@media (prefers-reduced-motion:reduce){.snow__fall--extra{display:none}}
@layer theme,base;@layer components{.hero{isolation:isolate;contain:paint;background:var(--night-950);margin:0;position:relative;overflow:hidden}.hero--gate{background:0 0;height:clamp(400px,60svh,500px)}.hero--compact{aspect-ratio:390/330;width:100%}.hero__stage{perspective:900px;perspective-origin:50% 85%;transform-origin:50% 62%;position:absolute;inset:0}.hero--gate .hero__stage{aspect-ratio:390/520;width:100%;max-width:440px;margin-inline:auto;inset:28px 0 auto}.popup-layer{transform-origin:50% var(--foot,100%);position:absolute;inset:0}.popup-layer>svg{width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.hero__sky{background:linear-gradient(var(--night-950) 0%, var(--night-900) 36%, #16244a 62%, #2a3260 74%, var(--dusk-500) 79%, var(--dusk-300) 84%, var(--dusk-500) 92%, var(--night-800) 100%);bottom:auto}.hero[data-mood=nochebuena] .hero__sky{background:linear-gradient(var(--night-950) 0%, var(--night-900) 34%, #0f2b2a 60%, var(--fir-950) 72%, #1f4a39 80%, #2f5f49 84%, var(--fir-950) 94%, var(--night-800) 100%)}.hero__water{background:linear-gradient(var(--lake-500), var(--night-900));position:absolute;inset-inline:0}.hero[data-mood=nochebuena]{--frieze-paper:var(--fir-950);background:var(--fir-950)}.hero[data-mood=nochebuena] .hero__water{background:linear-gradient(#1d4a52, #12352d 55%, var(--fir-950))}.hero[data-mood=nochebuena]{--quay-stone:color-mix(in oklab, var(--night-600) 45%, var(--fir-700));--quay-course:color-mix(in oklab, var(--night-500) 45%, var(--fir-600));--quay-riprap:color-mix(in oklab, var(--night-700) 40%, var(--fir-800))}.hero__snow{pointer-events:none;position:absolute;inset-inline:0;overflow:hidden}.hero--gate .hero__snow{-webkit-mask-image:linear-gradient(#0000,#000 48px);mask-image:linear-gradient(#0000,#000 48px)}.hero__vignette{pointer-events:none;transition:opacity .9s var(--ease-fold) .28s;background:radial-gradient(120% 90% at 50% 40%,#0000 55%,#060b188c);position:absolute;inset:0}.hero--gate .hero__vignette{-webkit-mask-image:linear-gradient(#000 62%,#0000 92%);mask-image:linear-gradient(#000 62%,#0000 92%)}.hero-frieze{aspect-ratio:390/40;perspective:400px;width:100%;max-width:440px;margin-inline:auto;position:relative}.hero-frieze__core{width:100%;height:100%;display:block;position:absolute;inset:0}.hero-frieze__run{display:none}.hero--compact:has(.hero__frieze) :is(.hero-steamer,.hero-steamer-wing){display:none}.hero__frieze.hero-frieze{max-width:none;position:absolute;inset:auto 0 0}.hero-frieze__rosette{aspect-ratio:1;backface-visibility:hidden;width:7.18%;position:absolute;top:27%;left:50%;translate:-50%}.hero-frieze__rosette>svg{width:100%;height:100%;display:block}.hero [data-wing]{display:none}.hero__horizon{background:linear-gradient(var(--night-800), #16244a 55%, var(--lake-500));display:none;position:absolute}.hero[data-mood=nochebuena] .hero__horizon{background:linear-gradient(var(--night-800), var(--fir-950) 55%, #1d4a52)}@media (min-width:40rem){.hero--compact .hero__horizon{display:block}}@media (min-width:441px){.hero--gate .hero__horizon{display:block}}@container scene (min-width:1872px){.hero .canvas-fade{-webkit-mask:var(--canvas-fade);mask:var(--canvas-fade)}}@container scene (min-aspect-ratio:4){.hero--compact .canvas-fade{-webkit-mask:var(--canvas-fade);mask:var(--canvas-fade)}}@container scene (min-aspect-ratio:7/2){.hero--gate .canvas-fade{-webkit-mask:var(--canvas-fade);mask:var(--canvas-fade)}}@media (min-width:40rem){.hero--compact [data-wing]{display:inline}.hero--compact .hero__snow{left:-100%;right:-100%}.hero--compact :is(.hero__sky,.hero__water,.hero__horizon){left:-400%;right:-400%}.hero--compact .hero-steamer{display:none}}@media (min-width:441px){.hero--gate [data-wing]{display:inline}.hero--gate .hero__snow{left:-100%;right:-100%}.hero--gate :is(.hero__sky,.hero__water,.hero__horizon){left:-400%;right:-400%}.hero--gate .hero-steamer{display:none}.hero--gate .hero__sky:before{content:"";background:var(--night-950);height:600%;position:absolute;inset:auto 0 100%}.gate .hero--gate.scene-band{contain:none;overflow:clip visible}}@media (min-width:40rem){.hero--compact{aspect-ratio:auto;--band-h:clamp(min(260px, 40svh), min(46svh, 34vw), 460px);height:var(--band-h);--cw:1170;--ch:330;--ox:390;--oy:0;--kw:390;--kh:330;--fx:585;--fy:165;--sh:290;background:linear-gradient(var(--night-950) 0%, var(--night-900) 45%, #16244a 70%, var(--dusk-500) 79%, var(--night-800) 81%, var(--lake-500) 95%, var(--night-900) 100%)}.hero--compact[data-mood=nochebuena]{background:linear-gradient(var(--night-950) 0%, var(--night-900) 45%, #0f2b2a 70%, #1f4a39 79%, var(--fir-950) 81%, #1d4a52 95%, var(--fir-950) 100%)}.hero.scene-band .hero__stage{perspective:calc(900 * var(--u,1px))}}@media (min-width:64rem) and (min-height:56rem){.hero--compact{--band-h:clamp(260px, min(46svh, 34vw), 460px)}}@media (min-width:64rem){.hero .snow__sway svg{scale:var(--flake-scale,1.25)}}@media (min-width:48rem){.hero--gate{--cw:1170;--ch:780;--ox:390;--oy:130;--kw:390;--kh:520;--fx:585;--fy:362;--sh:330}.hero.scene-band--md .hero__stage{perspective:calc(900 * var(--u,1px))}}@media (min-width:48rem) and (max-aspect-ratio:5/4){.hero--gate{--band-h:clamp(440px, 56svh, 620px);--span:520}}@media (min-width:48rem) and (min-aspect-ratio:5/4){.hero--gate{--band-h:max(100svh, 560px);--span:780}}@media (min-width:48rem) and (max-height:40rem){.hero--gate{--band-h:max(100svh, 360px);--span:780}}@media (min-width:40rem){.hero-frieze{aspect-ratio:auto;grid-template-columns:minmax(0,1fr) 390px minmax(0,1fr);max-width:none;height:40px;display:grid}.hero-frieze__core{grid-column:2;width:390px;height:40px;position:static}.hero-frieze__run{grid-row:1;width:100%;height:40px;display:block}.hero-frieze__run--l{grid-column:1}.hero-frieze__run--r{grid-column:3}.hero-frieze__rosette{width:28px;top:10.8px}}.hero .cut-shadow--near{transform:translate(2px,5px)}.hero .win-lit.is-out{opacity:0;transition:opacity .5s var(--ease-velvet)}.hero .win-lit{transition:opacity .9s var(--ease-velvet)}}@layer utilities;@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.hero__stage[data-intro=wait],.hero__stage[data-intro=wait] *{animation-play-state:paused!important}}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .popup-layer{animation:hero-hinge var(--dur-popup) var(--ease-hinge) var(--d,0s) both, fade-in .18s linear var(--d,0s) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) [data-layer=sky-wash],.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) [data-layer=sky]{animation:fade-in .4s var(--ease-velvet) var(--stage-sky) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) [data-layer=jura]{--d:var(--stage-jura)}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) [data-layer=castle]{--d:var(--stage-castle)}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) [data-layer=town]{--d:var(--stage-town)}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) [data-layer=quay]{--d:var(--stage-quay)}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) [data-layer=lake]{animation:lake-rise .6s var(--ease-paper) var(--stage-lake) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .popup-layer .cut-shadow{animation:shadow-lift var(--dur-popup) var(--ease-hinge) var(--d,0s) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .hero__snow{animation:fade-in 1.4s var(--ease-velvet) var(--stage-quay) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .win-lit{animation:light-on .22s var(--ease-velvet) calc(var(--stage-lights) + var(--win-delay,0s)) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .win-halo{transform-box:fill-box;transform-origin:50%;animation:halo-on .22s var(--ease-velvet) calc(var(--stage-lights) + var(--win-delay,0s)) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .castle-flood{animation:flood-climb var(--dur-scene) var(--ease-fold) var(--stage-flood) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) :is(.town-lit,.lamp-light){animation:fade-in .6s var(--ease-velvet) calc(var(--stage-lights) + .64s) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .ns-draw{animation:draw-on 1.6s var(--ease-velvet) calc(var(--stage-lights) + .82s + var(--ns-delay,0s)) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .hero-reflect,.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .hero-moonpath{animation:fade-in .8s var(--ease-velvet) var(--stage-reflection) both}.hero__stage[data-variant=gate]:is([data-intro=wait],[data-intro=full]) .hero-streaks{transform-box:fill-box;transform-origin:50% 0;animation:streak-grow .8s var(--ease-paper) var(--stage-reflection) both}.hero__stage.is-popping .popup-layer:not([data-layer=sky-wash],[data-layer=sky]){will-change:transform, opacity}.hero__stage[data-intro=quick]{animation:fade-in .3s var(--ease-velvet) both}.hero__stage[data-variant=compact]:is([data-intro=wait],[data-intro=lights]) .win-lit{animation:light-on .2s var(--ease-velvet) calc(.12s + var(--win-delay,0s) * .55) both}.hero__stage[data-variant=compact]:is([data-intro=wait],[data-intro=lights]) .win-halo{transform-box:fill-box;transform-origin:50%;animation:halo-on .2s var(--ease-velvet) calc(.12s + var(--win-delay,0s) * .55) both}.hero__stage[data-variant=compact]:is([data-intro=wait],[data-intro=lights]) .castle-flood{animation:flood-climb .9s var(--ease-fold) both}.hero__stage[data-variant=compact]:is([data-intro=wait],[data-intro=lights]) .hero-reflect{animation:fade-in .7s var(--ease-velvet) .3s both}@keyframes lake-rise{0%{opacity:0;transform:translateY(6px)}}@keyframes flood-climb{0%{opacity:0;transform:translateY(14px)}}@keyframes streak-grow{0%{transform:scaleY(0)}}@keyframes hero-hinge{0%{transform:rotateX(78deg)translateY(12px)}}@media (prefers-reduced-motion:reduce){.hero .hero__snow--near .snow__fall:first-child{--rest:30%!important;left:5%!important}.hero .hero__snow--near .snow__fall:nth-child(2){--rest:74%!important;left:9%!important}.hero .hero__snow--near .snow__fall:nth-child(3){--rest:14%!important;left:87%!important}.hero .hero__snow--near .snow__fall:nth-child(4){--rest:56%!important;left:93%!important}.hero .hero__snow--near .snow__fall:nth-child(5){--rest:88%!important;left:46%!important}.hero .hero__snow--near .snow__fall:nth-child(6){--rest:93%!important;left:70%!important}.hero--gate .hero__snow--near .snow__fall:first-child{--rest:14%!important}.hero--gate .hero__snow--near .snow__fall:nth-child(5){--rest:2%!important;left:40%!important}}@media (prefers-reduced-motion:reduce) and (min-width:40rem){.hero--compact .hero__snow--near .snow__fall:first-child{--rest:20%!important;left:10%!important}.hero--compact .hero__snow--near .snow__fall:nth-child(2){--rest:64%!important;left:24%!important}.hero--compact .hero__snow--near .snow__fall:nth-child(3){--rest:8%!important;left:33%!important}.hero--compact .hero__snow--near .snow__fall:nth-child(4){--rest:46%!important;left:76%!important}.hero--compact .hero__snow--near .snow__fall:nth-child(5){--rest:70%!important;left:80%!important}.hero--compact .hero__snow--near .snow__fall:nth-child(6){--rest:16%!important;left:92%!important}}@media (prefers-reduced-motion:reduce) and (min-width:441px){.hero--gate .hero__snow--near .snow__fall:first-child{--rest:20%!important;left:10%!important}.hero--gate .hero__snow--near .snow__fall:nth-child(2){--rest:64%!important;left:24%!important}.hero--gate .hero__snow--near .snow__fall:nth-child(3){--rest:8%!important;left:33%!important}.hero--gate .hero__snow--near .snow__fall:nth-child(4){--rest:46%!important;left:76%!important}.hero--gate .hero__snow--near .snow__fall:nth-child(5){--rest:70%!important;left:80%!important}.hero--gate .hero__snow--near .snow__fall:nth-child(6){--rest:16%!important;left:92%!important}}