/* Camera movement and lid rotation are independent: the hinge stays on the base. */
.room{will-change:transform;transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter 1.2s}
.computer{perspective:1800px;transform-style:preserve-3d;transform:translate(-50%,-46%);transition:none;opacity:0;visibility:hidden}
.screen-frame{transform-origin:50% 100%;backface-visibility:hidden;transform-style:preserve-3d;will-change:transform;transform:rotateX(-86deg);background:linear-gradient(120deg,#454441,#080909 30%,#242527)}
.screen-frame:after{content:'';position:absolute;inset:1px;border-radius:22px;pointer-events:none;background:linear-gradient(118deg,transparent 28%,#ffffff24 48%,transparent 69%);opacity:0}
.computer-base{position:relative;z-index:2;height:13px;box-shadow:0 12px 35px #0009;transform-origin:center top}
.desktop{opacity:0;transition:none;filter:brightness(0)}
.seated .room{transform:scale(3.2) translate(2%,5%);filter:blur(4px) brightness(.48);animation:camera-arrive 3.8s both cubic-bezier(.25,.1,.18,1)}
.seated .computer{visibility:visible;opacity:1;transform:translate(-50%,-46%);animation:approach-laptop 3.8s both cubic-bezier(.25,.1,.18,1)}
.seated .screen-frame{transform:rotateX(0deg);animation:open-lid 2.3s 1.2s both cubic-bezier(.22,.72,.23,1)}
.seated .screen-frame:after{animation:glass-reflection 2.4s 1.2s both}
.seated .desktop{opacity:1;filter:brightness(1);animation:screen-wake 1s 2.75s both ease-out}
.seated .computer-base{animation:base-settle 3.8s both ease-out}
@keyframes camera-arrive{
 0%{transform:scale(1) translate(0,0);filter:blur(0) brightness(1)}
 25%{transform:scale(1.45) translate(-1.2%,2%);filter:blur(.4px) brightness(.9)}
 62%{transform:scale(2.7) translate(1.5%,6%);filter:blur(2px) brightness(.62)}
 88%{transform:scale(3.24) translate(2%,4.8%);filter:blur(4px) brightness(.48)}
 100%{transform:scale(3.2) translate(2%,5%);filter:blur(4px) brightness(.48)}
}
@keyframes approach-laptop{
 0%,15%{opacity:0;transform:translate(-53%,-48%) scale(.23) rotateY(-13deg) rotateZ(-5deg)}
 30%{opacity:1;transform:translate(-52%,-45%) scale(.39) rotateY(-10deg) rotateZ(-3deg)}
 65%{opacity:1;transform:translate(-50%,-43%) scale(.85) rotateY(-3deg) rotateZ(-.5deg)}
 88%{transform:translate(-50%,-46.6%) scale(1.01) rotateY(0) rotateZ(0)}
 100%{opacity:1;transform:translate(-50%,-46%) scale(1) rotateY(0) rotateZ(0)}
}
@keyframes open-lid{
 0%{transform:rotateX(-86deg);box-shadow:0 4px 12px #0008}
 20%{transform:rotateX(-72deg)}
 65%{transform:rotateX(-24deg)}
 90%{transform:rotateX(1.5deg)}
 100%{transform:rotateX(0);box-shadow:0 25px 100px #000b}
}
@keyframes screen-wake{0%{opacity:0;filter:brightness(0)}40%{opacity:1;filter:brightness(.25)}100%{opacity:1;filter:brightness(1)}}
@keyframes glass-reflection{0%{opacity:.7;background-position:0 0}60%{opacity:.35}100%{opacity:0}}
@keyframes base-settle{0%,25%{transform:scaleY(.45)}75%,100%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.seated .room,.seated .computer,.seated .screen-frame,.seated .screen-frame:after,.seated .desktop,.seated .computer-base{animation:none}.seated .computer{transform:translate(-50%,-46%)}.seated .screen-frame{transform:none}.seated .desktop{opacity:1;filter:none}}