/* The entrance is independent of the storefront's existing layout and artwork. */
body:not([data-entry="entered"]){overflow:hidden}
#entrance{position:fixed;inset:0;z-index:20;display:grid;place-items:center;min-height:100svh;padding:calc(32px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#000;opacity:1;isolation:isolate;overscroll-behavior:none;touch-action:manipulation;transition:opacity 600ms cubic-bezier(.4,0,.2,1)}
#entrance[hidden]{display:none}
.entrance-content{display:flex;flex-direction:column;align-items:center;width:100%;gap:clamp(28px,5svh,48px);opacity:1;transition:opacity 450ms ease}
.entrance-logo-slot{width:min(80vw,500px);max-width:100%;aspect-ratio:2048 / 682}
.entrance-logo{display:block;width:100%;height:auto;pointer-events:none;user-select:none;transform-origin:0 0}
/* Only the persistent logo sits above the black entrance curtain. Its original
   header box stays in layout, so transforms end at the exact responsive size. */
body:not([data-entry="entered"]) #twin-world header{z-index:21}
#twin-world header > :not(.brand){transition:opacity 600ms cubic-bezier(.4,0,.2,1)}
body:is([data-entry="idle"],[data-entry="entering"],[data-entry="gliding"]) #twin-world > :not(header),
body:is([data-entry="idle"],[data-entry="entering"],[data-entry="gliding"]) #twin-world header > :not(.brand){visibility:hidden}
body:is([data-entry="idle"],[data-entry="entering"],[data-entry="gliding"]) #twin-world header > :not(.brand){opacity:0}
#enter-world{display:grid;place-items:center;min-width:128px;min-height:48px;padding:12px 20px;border:0;background:transparent;color:#d3d3d9;font:11px Arial,Helvetica,sans-serif;letter-spacing:.24em;line-height:1.4;touch-action:manipulation}
#enter-world span{animation:entrance-breathe 3.6s ease-in-out infinite}
#enter-world:disabled{opacity:1;cursor:default}
#enter-world:focus-visible{outline:1px solid #d6d7de;outline-offset:4px}
body:not([data-entry="idle"]) .entrance-content{opacity:0;pointer-events:none}
body[data-entry="revealing"] #entrance{opacity:0;pointer-events:none}
body:not([data-entry="idle"]) #enter-world span{animation:none}
@keyframes entrance-breathe{0%,100%{opacity:.62}50%{opacity:1}}
@media(hover:hover){#enter-world:hover{color:#fff}}
@media(prefers-reduced-motion:reduce){#entrance,.entrance-content{transition:none}#enter-world span{animation:none;opacity:1}}