/* Only the picture moves. The black glass and monitor bezel stay in place. */
.screen-picture{position:relative;isolation:isolate;min-width:0;background:var(--ink);transform-origin:50% var(--crt-origin-y,50%)}
.welcome-screen>.screen-picture{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background:#031328}
html[data-crt-phase] .screen{background:#000}
html[data-crt-phase="boot"] .screen-picture{opacity:0}
html[data-crt-phase="off"] .screen-picture{animation:picture-shutdown .64s linear forwards;will-change:transform,filter,opacity;pointer-events:none}
html[data-crt-phase="on"] .screen-picture{animation:picture-startup 1.5s linear forwards;will-change:transform,filter,opacity}
@keyframes picture-shutdown{
  0%{transform:scaleY(1.3);filter:brightness(1);opacity:1}
  50%{transform:scale(1.3,.001);filter:brightness(10);opacity:1}
  100%{transform:scale(0);filter:brightness(50);opacity:0}
}
@keyframes picture-startup{
  0%{transform:scaleY(.8) translateZ(0);filter:brightness(30);opacity:1}
  4.2%{transform:scaleY(.8) translate3d(0,100%,0)}
  4.32%{transform:scaleY(.8) translate3d(0,-100%,0);opacity:1}
  10.8%{transform:scale(1.3,.6) translate3d(0,100%,0);filter:brightness(30);opacity:0}
  13.2%{transform:scale(1) translateZ(0);filter:contrast(0) brightness(0) saturate(1);opacity:0}
  100%{transform:scale(1) translateZ(0);filter:contrast(1.075) brightness(1.14) saturate(1.3);opacity:1}
}
@keyframes picture-soft-off{from{opacity:1}to{opacity:0}}
@keyframes picture-soft-on{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  html[data-crt-phase="off"] .screen-picture{animation:picture-soft-off 80ms linear forwards!important;transform:none;filter:none}
  html[data-crt-phase="on"] .screen-picture{animation:picture-soft-on 160ms linear forwards!important;transform:none;filter:none}
}