html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#fff;
}
.transition-page{
  width:100vw;
  height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}
.image-wrap{
  position:relative;
  width:min(100vw, calc(100svh * 2.973)); /* aspect ratio of the supplied 1664x560 image */
  height:min(100svh, calc(100vw / 2.973));
  display:flex;
  align-items:center;
  justify-content:center;
}
.transition-image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.hotspot{
  position:absolute;
  left:50%;
  top:68.45%;
  width:26.5%;
  height:8.1%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  z-index:3;
}
.hotspot:focus-visible{
  outline:3px solid rgba(238,43,99,.65);
  outline-offset:6px;
}
@media (max-aspect-ratio: 16/9){
  .image-wrap{
    width:100vw;
    height:auto;
    aspect-ratio:1664/560;
  }
}
@media (max-width:700px){
  /*
   Keep the whole artwork visible. It becomes letterboxed rather than cropped.
   The button hotspot follows the exact artwork coordinates.
  */
  .image-wrap{
    width:100vw;
    height:auto;
    aspect-ratio:1664/560;
  }
  .hotspot{
    width:28%;
    height:8.5%;
  }
}