/* One video supplies the entire camera move. The page then fills its last frame. */
.scene { width: 100%; height: 100%; inset: 0; transform: none; transform-origin: 0 0; }
.scene>video,.scene>.intro-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene>.intro-fallback { display: none; }
.still-intro .scene>video { display: none; }
.still-intro .scene>.intro-fallback { display: block; }
.screen-hit { display: grid; place-items: center; transform: none; opacity: 0; padding: 0; border-radius: 10% / 11%; transition: opacity .25s; }
.screen-hit.ready { opacity: 1; }
.screen-hit[hidden] { display: none; }
.screen-hit .mobile-start { display: block; font-family: var(--terminal); font-size: clamp(38px,5vw,78px); font-weight: 400; letter-spacing: .03em; color: #ecf3ff; text-shadow: 1px 0 #6796ff,-1px 0 #f5fcff77,0 0 15px #90b8ff55; }
.mobile-start>span { font-size: .6em; padding-right: 8px; vertical-align: .1em; }
.screen-hit:hover .mobile-start { text-shadow: 0 0 18px #9cbbff; }
.screen-hit:focus-visible:before { left: 35%; top: 64%; width: 30%; height: 0; }
#screen-portal { display: contents; }
#screen-portal[hidden] { display: none; }
#screen-portal.projecting { display: block; position: fixed; z-index: 101; overflow: hidden; background: #111215; pointer-events: none; will-change: width,height,left,top; }
.projecting #portfolio { transform-origin: 0 0; background: #111215; color: #edf0f5; }
.projecting .header { position: relative; }
.projecting .skip-link { visibility: hidden; }
.intro-top { opacity: calc(1 - var(--expansion,0)); }
.intro-bottom { z-index: 110; }
body.locked .intro-bottom { position: fixed; }
.intro-bottom .prompt { position: relative; }
body.locked:has(.projecting) .intro-bottom { left: 0; right: 0; bottom: 0; justify-content: center; padding: 12px; background: linear-gradient(transparent,#030610b0); pointer-events: none; }
body.locked:has(.projecting) .intro-bottom .prompt { pointer-events: auto; }
body.locked:has(.projecting) .intro-bottom>span { display: none; }
body.locked:has(.projecting) .entrance { z-index: auto; }
body.locked:has(.projecting) .intro-stage { isolation: auto; }
@media(max-width:700px) {
 .scene { display: none; }
 .screen-hit { left: 50%; top: 50%; width: auto; height: auto; padding: 24px; transform: translate(-50%,-50%); }
 .screen-hit .mobile-start { font-size: clamp(62px,18vw,90px); }
 body.locked .intro-bottom { bottom: 32px; }
}