:root {
  --x: 200%;
  --y: 200%;
  --bg-x: 0;
  --bg-y: 0;
  --cursor-size: min(30vw, 30vh);
  --doc-height: 100%;
  --rotation: 0deg;
  --inside-image: url("laundry.jpg");
  --outside-image: url("suitcase.jpg");
}

html, body {
  margin: 0;
  padding: 0;
  overscroll-behavior: contain;
  height: 100vh;
  height: var(--doc-height);
}
body {
  height:100%;
  position:fixed;
  /* prevent overscroll bounce*/ overflow-y:scroll;
  -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */
}
#load {
  top: 0.5px;
  display: block;
  background-color: white;
  width: 100vw;
  height: 100vh; /* fallback for Js load */
  height: var(--doc-height);
  position: absolute;
  left: 0;
  overflow: clip;
  background-image: var(--outside-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center
}

#load .scanline {
  position: absolute;
  top: 10vh;
  left: 0;
  right: 0;
  height: 100px;
  position: absolute;
  z-index: 1;
  mix-blend-mode: difference;
  animation: xray 1.6s infinite alternate ease-in-out;
  background: linear-gradient(0deg, rgb(185 75 127 / 0%) 0%, rgb(178 87 199) 50%, rgb(195 110 201 / 0%) 100%);
}

#load span {
  z-index: 10;
  position: absolute;
  width: 100vw;
  height: 100vh; /* fallback for Js load */
  height: var(--doc-height);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 50px;
  font-weight: bold;
  filter: drop-shadow(0px 0px 5px black);
}
@keyframes xray {
  to {
    transform: translateY(70vh);
  }
}

#scanner {
  top:0.5px;
  visibility: hidden;
  display: block;
  width: 100vw;
  height: 100vh; /* fallback for Js load */
  height: var(--doc-height);
  position: absolute;
  left: 0;
  overflow: clip;
  background: var(--outside-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#scanner #mask {
  filter: drop-shadow(0px 0px 25px rgba(0,0,0,0.5));
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#scanner #mask span {
  background-color: white;
  background-image: var(--inside-image);
  background-size: 120vw, calc(var(--doc-height) * 1.2);
  background-repeat: no-repeat;
  background-position: center;
  clip-path: circle(var(--cursor-size) at var(--x) calc(var(--y) - var(--cursor-size) * 1.2));
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: contain;
  background-attachment: fixed;
  background-position-x: calc(50% + var(--bg-x));
  background-position-y: calc(45% + var(--bg-y));
  z-index: 6;
}
#scanner #mask span.blur {
  clip-path: circle(calc(var(--cursor-size) *1.05) at var(--x) calc(var(--y) - var(--cursor-size) * 1.2));
  filter: blur(1px);
  z-index: 5;
  opacity: 0.8;
}
#scanner #mask span.blur2 {
  clip-path: circle(calc(var(--cursor-size) *1.1) at var(--x) calc(var(--y) - var(--cursor-size) * 1.2));
  filter: blur(3px);
  z-index: 4;
  opacity: 0.8;
}

#scanner #mask span.blur3 {
  clip-path: circle(calc(var(--cursor-size) *1.15) at var(--x) calc(var(--y) - var(--cursor-size) * 1.2));
  filter: blur(5px);
  z-index: 3;
  opacity: 0.8;
}
#scanner #mask span.blur4 {
  clip-path: circle(calc(var(--cursor-size) *1.2) at var(--x) calc(var(--y) - var(--cursor-size) * 1.2));
  filter: blur(7px);
  z-index: 2;
  opacity: 0.8;
}

#scanner #mask span.frame {
  clip-path: circle(calc(var(--cursor-size) *1.3) at var(--x) calc(var(--y) - var(--cursor-size) * 1.2));
  background: black;
  z-index: 1;
}
#scanner #mask .handle {
  background: black;
  z-index: 1;
  width: calc(var(--cursor-size) / 3);
  height: calc(var(--cursor-size) * 1.2);
  top: calc(var(--y) - var(--cursor-size) / 8);
  position: absolute;
  left: calc(var(--x) - var(--cursor-size) / 6);
  transform: rotate(var(--rotation));
  border-radius: 15px;
  transform-origin: center calc(var(--cursor-size) * -1);
}