body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #150e3a;
}

code { font-family: 'Fira Code', monospace; }

@supports (font-variation-settings: normal) {
  code { font-family: 'Fira Code VF', monospace; }
}

code {
  display: block;
  flex-shrink: 0;
  position: relative;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

.helper {
  opacity: .4;
}

#scene {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 2vw 7vw;
  font-size: 7vw;
  display: flex;
  align-items: center;
  background: #391bc9;
  color: #fff;

  transition: left .8s ease-out, right .8s ease-out, top .8s ease-out, bottom .8s ease-out, border-radius .8s ease-out;
}

#scene:before {
  content: "";
  display: block;
  width: 180vh;
  height: 180vh;
  position: absolute;
  left: calc(50% - 90vh);
  bottom: calc(50% - 180vh);
  border-radius: 50%;
  background: radial-gradient(circle, #ffeab2 0, rgba(255, 234, 178, 0) 60%);
  z-index: 3;
  pointer-events: none;
}

#scene:after {
  content: "";
  display: block;
  width: 220vh;
  height: 250vh;
  position: absolute;
  left: calc(50% - 150vh);
  bottom: calc(50% - 180vh);
  border-radius: 50%;
  background: radial-gradient(circle,#ff0b9f 0, rgba(255, 36, 168, 0) 60%);
  z-index: 2;
  pointer-events: none;
}

#scene code {
  z-index: 5;
}

#scene code.fadeout {
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: fadeOut 0.8s ease;
  animation-fill-mode: forwards;
  transition: width .4s ease;
}

#scene code.sign {
  flex-grow: 2;
  transition: font-size .4s ease-in;
}

#scene code.big {
  font-size: 30vmin;
}

#scene code:first-child:after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.4vw;
  height: 8vw;
  margin-top: -4vw;
  background: #fff;
  animation: 1s blink step-end infinite;
}

#scene.blur code:first-child:after {
  display: none;
}

#scene.focus {
  left: calc(50% - 35vmin);
  right: calc(50% - 35vmin);
  top: calc(50% - 35vmin);
  bottom: calc(50% - 35vmin);
  border-radius: 26%;
  padding: 0;

  /*--smooth-corners: 4;*/
  /*mask-image: paint(smooth-corners);*/
  /*-webkit-mask-image: paint(smooth-corners);*/
}

#scene .hand {
  left: 50%;
  top: 50%;
  margin-left: -1.85em;
  margin-top: -1.12em;
  position: absolute;
  width: 3.2em;
  height: 3.2em;
  background-image: url(./static/img/hand.png);
  background-size: cover;
  animation: handIn 0.8s ease-out;
  transform: rotate(30deg);
  z-index: -1;
}

#scene .scar {
  right: calc(50% - 0.35em);
  top: 50%;
  margin-top: -0.6em;
  position: absolute;
  width: 0;
  height: 0;
  background-image: url(./static/img/scar.png);
  background-size: 0.65em;
  background-repeat: no-repeat;
  background-position: top right;
  filter: brightness(0) invert(1);
  transition: width .15s ease-in-out, height .15s ease-in-out, filter .3s ease;
}

#scene .scar.heal {
  animation: heal 3.9s linear;
  animation-fill-mode: forwards;
}

#scene .final .hand {
  animation: handOut 0.5s ease-in-out;
  opacity: 0;
}

#scene .final .scar {
  width: 0.65em;
  height: 1.15em;
}

@keyframes blink {
  from, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes heal {
  0% {
    transform: scale(1) skew(0, 0) rotate(0);
  }
  50% {
    transform: scale(.7) skew(-15deg, -30deg) rotate(-3deg);
  }
  100% {
    transform: scale(.4) skew(-30deg, -60deg) rotate(0);
  }
}

@keyframes handIn {
  from {
    opacity: 0;
    transform: rotate(-5deg) translateY(-60vmin) translateX(-5vmin) scale(.8);
  }
  to {
    opacity: 1;
    transform: rotate(30deg) translateY(0) translateX(0) scale(1);
  }
}

@keyframes handOut {
  0% {
    opacity: 1;
    transform: rotate(30deg) translateY(0) translateX(0) scale(1);
  }
  30% {
    opacity: 1;
    transform: rotate(23deg) translateY(1.25em) translateX(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(23deg) translateY(1.25em) translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(60deg) translateY(2em) translateX(-0.3em) scale(.8);
  }
}

#secret {
  position: absolute;
  top: 0;
  left: -9999px;
}

#preload-hand,
#preload-scar {
  width: 100px;
  height: 100px;
  position: fixed;
  left: -9999px;
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
#preload-hand {
  background-image: url(./static/img/hand.png);
}
#preload-scar {
  background-image: url(./static/img/scar.png);
}