/* Two engraved secret-room leaves slide apart behind the foreground host. */
.archive-welcome-pending body::after{content:"";position:fixed;inset:0;background:#dedbd3;z-index:89}
.archive-welcome{position:fixed;inset:8px;z-index:90;overflow:hidden;isolation:isolate;perspective:1600px;touch-action:none}
.welcome-doors{position:absolute;inset:0;filter:grayscale(1) drop-shadow(0 9px 18px #0005)}
.welcome-door{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;will-change:transform;background:#444}
.welcome-door::before{content:"";position:absolute;top:0;bottom:0;width:200%;background:url('secret-archive-doors-v1.png') center / cover no-repeat}
.welcome-door-left{left:0}.welcome-door-right{right:0}
.welcome-door-left::before{left:0}.welcome-door-right::before{right:0}
.welcome-lock{position:absolute;display:block;width:var(--door-art-width);height:var(--door-art-height);left:calc(100% - var(--door-art-width)/2);top:calc((100% - var(--door-art-height))/2);background:url('secret-archive-doors-v1.png') center/100% 100%;clip-path:circle(var(--door-lock-radius) at 50% 48.35%);transform-origin:50% 48.35%;will-change:transform}
.welcome-door-right .welcome-lock{left:calc(var(--door-art-width)/-2)}
.welcome-title{position:absolute;top:13%;left:50%;translate:-50% 0;width:max-content;max-width:85%;text-align:center;color:#262621;text-shadow:0 1px #fff9}
.welcome-title span{font:12px/1.4 monospace;letter-spacing:.26em;display:block}
.welcome-title strong{display:block;font:clamp(44px,6vw,88px)/1.15 Pirata,Georgia,serif;font-weight:400;margin:10px 0}
.welcome-title i{font:italic clamp(16px,1.6vw,23px)/1.2 Georgia,serif}
.welcome-host{position:absolute;left:-3%;bottom:-5%;width:min(62vw,87vh);aspect-ratio:1;opacity:0;filter:grayscale(1) drop-shadow(5px 6px 4px #0003);pointer-events:none;transform-origin:35% 100%}
.welcome-pose{position:absolute;inset:0;background-image:url('welcome-jordain-cutout-v2-tone-v1.png');background-size:200% 100%;background-repeat:no-repeat}
.welcome-rest{background-position:left center;transform:translateX(-10%)}.welcome-present{background-position:right center;opacity:0}
.welcome-skip{position:absolute;right:24px;bottom:23px;background:#f7f5eff2;border:1px solid #38362f;outline:3px double #777;outline-offset:3px;color:#25251f;padding:10px 18px;font:17px Georgia,serif;cursor:pointer}
.welcome-skip:hover,.welcome-skip:focus-visible{background:white;text-decoration:underline;text-underline-offset:4px}
.is-opening .welcome-lock{animation:archive-unlock 950ms 120ms cubic-bezier(.5,0,.2,1) both}
.is-opening .welcome-door-left{animation:archive-door-left 1850ms 1120ms cubic-bezier(.3,.04,.16,1) both}
.is-opening .welcome-door-right{animation:archive-door-right 1850ms 1120ms cubic-bezier(.3,.04,.16,1) both}
.is-opening .welcome-title{animation:archive-title 800ms 300ms ease both}
.is-opening.host-ready .welcome-host{animation:archive-host 4100ms cubic-bezier(.2,.7,.2,1) both}
.is-opening .welcome-present{animation:archive-present 580ms 1200ms ease-in-out forwards}
.is-opening .welcome-rest{animation:archive-present 580ms 1200ms ease-in-out reverse forwards}
.is-opening .welcome-skip{animation:archive-skip 4100ms linear both}
@keyframes archive-unlock{0%{transform:rotate(0)}75%{transform:rotate(94deg)}88%,100%{transform:rotate(90deg)}}
@keyframes archive-door-left{0%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes archive-door-right{0%{transform:translateX(0)}100%{transform:translateX(101%)}}
@keyframes archive-title{to{opacity:0;filter:blur(2px);translate:-50% -8px}}
@keyframes archive-present{from{opacity:0}to{opacity:1}}
@keyframes archive-host{0%{opacity:0;transform:translate(-8%,8%) rotate(-2deg)}14%,76%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(-9%,6%) rotate(-1deg)}}
@keyframes archive-skip{0%,86%{opacity:1}100%{opacity:0}}
.handheld-scene .welcome-host{width:min(80vw,84vh);left:-8%;bottom:-3%}
.handheld-scene .welcome-title{top:15%}.handheld-scene .welcome-title strong{font-size:90px}
.handheld-scene .welcome-title span{font-size:22px}.handheld-scene .welcome-title i{font-size:30px}
.handheld-scene .welcome-skip{font-size:30px;padding:20px 25px;right:35px;bottom:35px}
@media(max-width:650px){.archive-welcome{inset:4px}.welcome-host{width:96vw;left:-17%;bottom:0}.welcome-title{top:20%}.welcome-title strong{font-size:50px}.welcome-skip{right:14px;bottom:15px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.archive-welcome{display:none}}