*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#f3eee5}
body{min-height:100vh;display:grid;place-items:center;overflow:hidden}
main{width:100%;min-height:100vh;display:grid;place-items:center;padding:0}
.stage{
  appearance:none;border:0;padding:0;margin:0;background:transparent;
  position:relative;width:min(100vw,1024px);aspect-ratio:1024/768;
  cursor:pointer;overflow:hidden;display:block;
}
.state{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  transition:opacity .8s ease,transform 1.05s cubic-bezier(.2,.75,.2,1);
  user-select:none;-webkit-user-drag:none;
}
.closed{opacity:1;transform:scale(1)}
.opened{opacity:0;transform:translateY(26px) scale(.99)}
.stage.open .closed{opacity:0;transform:scale(1.01)}
.stage.open .opened{opacity:1;transform:translateY(0) scale(1)}
@media (max-width:700px){
  body{overflow:auto}
  .stage{width:100vw;aspect-ratio:1024/768}
}