/* The threshold shares the artwork's midnight ink, sand gold and cool metal. */
#intro{--intro-x:0px;--intro-y:0px;--intro-tilt-x:0deg;--intro-tilt-y:0deg;position:fixed;inset:0;z-index:40;isolation:isolate;overflow:hidden;background:#070e17;perspective:1000px;touch-action:manipulation;opacity:1;transition:opacity .9s ease;contain:layout paint}
#intro .intro-night{position:absolute;inset:-8%;background:radial-gradient(ellipse at 50% 43%,#23374655 0,#1d252633 23%,transparent 48%),radial-gradient(ellipse at 50% 110%,#76614c44,transparent 54%),linear-gradient(#050b13,#0a111b 65%,#151b1e);transition:opacity .55s ease}
#intro .intro-horizon{position:absolute;left:-15%;right:-15%;bottom:-10%;height:28%;border-radius:50% 55% 0 0;transform:rotate(-4deg);background:linear-gradient(170deg,#a1835922,#181d1f 44%,#080f17);box-shadow:0 -1px 0 #bc9b6333,0 -15px 80px #8e70451a;opacity:.6;transition:opacity .55s ease}
#intro .intro-horizon:after{content:'';position:absolute;inset:30% -5% -20%;border-radius:45% 60% 0 0;background:linear-gradient(165deg,#39342955,#0c141d);transform:rotate(9deg);box-shadow:0 -1px 0 #77664f22}
#intro .intro-starfield{position:absolute;inset:0;pointer-events:none;transition:opacity .55s ease}
#intro .intro-starfield i{position:absolute;width:2px;height:2px;border-radius:50%;background:#eeddb7;box-shadow:0 0 12px #efdebc88;opacity:.38}
#intro .intro-starfield i:nth-child(1){left:21%;top:26%}#intro .intro-starfield i:nth-child(2){left:76%;top:21%}#intro .intro-starfield i:nth-child(3){left:59%;top:11%;width:1px;height:1px}#intro .intro-starfield i:nth-child(4){left:12%;top:62%;width:1px;height:1px}#intro .intro-starfield i:nth-child(5){left:87%;top:49%}#intro .intro-starfield i:nth-child(6){left:37%;top:14%;width:1px;height:1px}#intro .intro-starfield i:nth-child(7){left:67%;top:69%;width:1px;height:1px}#intro .intro-starfield i:nth-child(8){left:33%;top:75%}
#intro .intro-begin{position:absolute;left:50%;top:46%;width:clamp(285px,56vmin,570px);height:auto;aspect-ratio:1;display:block;padding:0;margin:0;border:0;background:none;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;outline:none;transition:transform 1.3s cubic-bezier(.25,.1,.15,1),opacity .55s ease;filter:drop-shadow(0 16px 30px #0006)}
#intro .intro-begin svg{display:block;width:100%;height:100%;overflow:visible;transform:translate(var(--intro-x),var(--intro-y)) rotateX(var(--intro-tilt-x)) rotateY(var(--intro-tilt-y));transition:transform .65s cubic-bezier(.16,.7,.25,1)}
#intro .intro-dial{transform-origin:300px 300px;animation:intro-orbit 95s linear infinite}
#intro .intro-prism{animation:intro-float 7.5s ease-in-out infinite}
#intro .intro-glint{animation:intro-glimmer 6.5s ease-in-out infinite}
#intro .intro-begin:focus-visible .intro-dial,#intro .intro-begin:hover .intro-dial{stroke:#f5dfad;filter:drop-shadow(0 0 4px #ddb66e77)}
#intro .intro-year{position:absolute;left:50%;top:calc(46% + clamp(132px,25vmin,260px));transform:translateX(-50%);text-align:center;min-width:130px;color:#c0a77e;font:20px/1.3 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;letter-spacing:.23em;transition:top .95s cubic-bezier(.19,.72,.17,1),transform .95s cubic-bezier(.19,.72,.17,1),color .95s ease,opacity .55s ease;text-shadow:0 2px 30px #ddc6a00d}
#intro .intro-year span{display:block;white-space:nowrap}#intro .intro-year i{position:absolute;left:50%;top:100%;display:block;width:1px;height:33px;margin:22px 0 0;background:linear-gradient(#ccb38777,transparent);transition:opacity .45s ease}
#intro .intro-iris{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(ellipse at 50% 46%,transparent 0,#04070c 65%,#04070c 100%);transition:opacity .55s ease}
#intro[data-state=focusing] .intro-year,#intro[data-state=counting] .intro-year,#intro[data-state=arriving] .intro-year{top:50%;transform:translate(-50%,-50%) scale(2.7);color:#e3d3b5}
#intro[data-state=focusing] .intro-year i,#intro[data-state=counting] .intro-year i,#intro[data-state=arriving] .intro-year i{opacity:0}
#intro[data-state=focusing] .intro-begin{opacity:.08;transform:translate(-50%,-50%) scale(.96)}
#intro[data-state=counting] .intro-begin,#intro[data-state=arriving] .intro-begin{opacity:.035;transform:translate(-50%,-50%) scale(.96)}
#intro.intro-dark{background:#03070b}#intro.intro-dark .intro-night,#intro.intro-dark .intro-horizon,#intro.intro-dark .intro-starfield,#intro.intro-dark .intro-begin,#intro.intro-dark .intro-year{opacity:0}#intro.intro-dark .intro-iris{opacity:1}
#intro.intro-depart{opacity:0;pointer-events:none}
body.intro-active .masthead,body.intro-active #experience{visibility:hidden}
@keyframes intro-orbit{to{transform:rotate(360deg)}}@keyframes intro-float{50%{transform:translateY(-6px)}}@keyframes intro-glimmer{50%{opacity:.28}}
#intro.intro-reduced *,#intro.intro-reduced *:before,#intro.intro-reduced *:after{animation:none!important;transition-duration:.16s!important}#intro.intro-reduced .intro-begin svg{transform:none}#intro.intro-reduced[data-state] .intro-begin{transform:translate(-50%,-50%)}#intro.intro-reduced .intro-year{transition-property:opacity}#intro.intro-reduced[data-state] .intro-year{transform:translate(-50%,-50%);font-size:38px}
@media(max-width:700px){#intro .intro-begin{width:min(93vw,64vh);top:43%}#intro .intro-year{top:calc(43% + min(41vw,28vh));font-size:18px}#intro[data-state=focusing] .intro-year,#intro[data-state=counting] .intro-year,#intro[data-state=arriving] .intro-year{transform:translate(-50%,-50%) scale(2.25)}#intro .intro-year i{height:26px;margin-top:18px}#intro .intro-horizon{bottom:-8%;height:24%}#intro.intro-reduced[data-state] .intro-year{transform:translate(-50%,-50%)}}
@media(max-height:500px) and (min-width:700px){#intro .intro-begin{width:72vh;top:42%}#intro .intro-year{top:77%;font-size:16px}#intro .intro-year i{height:20px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){#intro *,#intro *:before,#intro *:after{animation:none!important;transition-duration:.16s!important}#intro .intro-begin svg{transform:none}#intro .intro-year{transition-property:opacity}#intro[data-state] .intro-year{transform:translate(-50%,-50%);font-size:38px}}