.vanish-in {
  animation: 0.3s ease-in 1.1s forwards vanish-in;
  filter: blur(90px) opacity(0);
  .shadow {
    animation: 1.8s ease-in 1.6s forwards shift-back;
  }
}

.fade-away {
  animation: 1.6s ease-in 0 forwards fade-away;
  filter: blur(0px) opacity(100%);
}

.burn-away {
  opacity: 0;
  position: absolute;
  background-color: #23241c;
  border-radius: 50%;
  height: 3000px;
  width: 3000px;
  top: calc(50% - 1500px);
  right: calc(50% - 1500px);
  transform: scale(0);
  animation: 1.6s ease-in 0s 1 forwards burn-away;
  border: 3px solid rgb(49, 22, 1);
  -webkit-box-shadow:
    inset 0px 0px 6px 2px #fffb5c00,
    inset 0px 0px 8px 3px rgb(52, 21, 0),
    0px 0px 6px 2px #3f1c0100,
    0px 0px 15px 10px rgba(105, 46, 0, 0),
    0px 0px 17px 18px #401d02eb,
    inset 0px 0px 29px 22px #c4720f00;
  -moz-box-shadow:
    inset 0px 0px 6px 2px #fffb5c00,
    inset 0px 0px 8px 3px rgb(52, 21, 0),
    0px 0px 6px 2px #3f1c0100,
    0px 0px 15px 10px rgba(105, 46, 0, 0),
    0px 0px 17px 18px #401d02eb,
    inset 0px 0px 29px 22px #c4720f00;
  box-shadow:
    inset 0px 0px 6px 2px #fffb5c00,
    inset 0px 0px 8px 3px rgb(52, 21, 0),
    0px 0px 6px 2px #3f1c0100,
    0px 0px 15px 10px rgba(105, 46, 0, 0),
    0px 0px 17px 18px #401d02eb,
    inset 0px 0px 29px 22px #c4720f00;
}

.highlight {
  position: absolute;
  border-radius: 50%;
  height: 3000px;
  width: 3000px;
  top: calc(50% - 1500px);
  right: calc(50% - 1500px);
  transform: scale(0);
  box-shadow: 0px 0px 71px 101px transparent;
  animation: 2.1s ease-in 0.2s 1 forwards grow-highlight;
}

@media (prefers-reduced-motion) {
  .vanish-in,
  .fade-away {
    animation: none;
    filter: none;
  }
  .vanish-in {
    .shadow {
      animation: none;
      translate: -8px -3px;
    }
  }
  .fade-away {
    visibility: hidden;
  }
  .burn-away,
  .highlight {
    animation: none;
    display: none;
  }
}

@keyframes shift-back {
  0% {
    translate: 0;
  }
  100% {
    translate: -8px -3px;
  }
}
@keyframes fade-away {
  0% {
    filter: blur(0px) opacity(100%);
  }
  100% {
    filter: blur(90px) opacity(0%);
  }
}
@keyframes vanish-in {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}
@keyframes burn-away {
  0% {
    transform: scale(0);
    opacity: 1;
    border: 3px solid #fffb5c;
    -webkit-box-shadow:
      inset 0px 0px 6px 2px #fffb5c,
      inset 0px 0px 5px 6px rgba(243, 108, 0, 0.5),
      0px 0px 6px 2px #fffb5c,
      0px 0px 15px 10px rgba(241, 124, 4, 0.6),
      0px 0px 8px 11px #1c0901eb,
      inset 0px 0px 29px 22px #c4720f42;
    -moz-box-shadow:
      inset 0px 0px 6px 2px #fffb5c,
      inset 0px 0px 5px 6px rgba(243, 108, 0, 0.5),
      0px 0px 6px 2px #fffb5c,
      0px 0px 15px 10px rgba(241, 124, 4, 0.6),
      0px 0px 8px 11px #1c0901eb,
      inset 0px 0px 29px 22px #c4720f42;
    box-shadow:
      inset 0px 0px 6px 2px #fffb5c,
      inset 0px 0px 5px 6px rgba(243, 108, 0, 0.5),
      0px 0px 6px 2px #fffb5c,
      0px 0px 15px 10px rgba(241, 124, 4, 0.6),
      0px 0px 8px 11px #1c0901eb,
      inset 0px 0px 29px 22px #c4720f42;
  }
  60% {
    transform: scale(1);
    border: 3px solid #fffb5c;
    -webkit-box-shadow:
      inset 0px 0px 6px 2px #fffb5c,
      inset 0px 0px 5px 6px rgba(243, 108, 0, 0.5),
      0px 0px 6px 2px #fffb5c,
      0px 0px 15px 10px rgba(241, 124, 4, 0.6),
      0px 0px 8px 11px #1c0901eb,
      inset 0px 0px 29px 22px #c4720f42;
    -moz-box-shadow:
      inset 0px 0px 6px 2px #fffb5c,
      inset 0px 0px 5px 6px rgba(243, 108, 0, 0.5),
      0px 0px 6px 2px #fffb5c,
      0px 0px 15px 10px rgba(241, 124, 4, 0.6),
      0px 0px 8px 11px #1c0901eb,
      inset 0px 0px 29px 22px #c4720f42;
    box-shadow:
      inset 0px 0px 6px 2px #fffb5c,
      inset 0px 0px 5px 6px rgba(243, 108, 0, 0.5),
      0px 0px 6px 2px #fffb5c,
      0px 0px 15px 10px rgba(241, 124, 4, 0.6),
      0px 0px 8px 11px #1c0901eb,
      inset 0px 0px 29px 22px #c4720f42;
  }
  66% {
    border: 3px solid rgb(49, 22, 1);
    -webkit-box-shadow:
      inset 0px 0px 6px 2px #fffb5c00,
      inset 0px 0px 8px 3px rgb(52, 21, 0),
      0px 0px 6px 2px #3f1c0100,
      0px 0px 15px 10px rgba(105, 46, 0, 0),
      0px 0px 17px 18px #401d02eb,
      inset 0px 0px 29px 22px #c4720f00;
    -moz-box-shadow:
      inset 0px 0px 6px 2px #fffb5c00,
      inset 0px 0px 8px 3px rgb(52, 21, 0),
      0px 0px 6px 2px #3f1c0100,
      0px 0px 15px 10px rgba(105, 46, 0, 0),
      0px 0px 17px 18px #401d02eb,
      inset 0px 0px 29px 22px #c4720f00;
    box-shadow:
      inset 0px 0px 6px 2px #fffb5c00,
      inset 0px 0px 8px 3px rgb(52, 21, 0),
      0px 0px 6px 2px #3f1c0100,
      0px 0px 15px 10px rgba(105, 46, 0, 0),
      0px 0px 17px 18px #401d02eb,
      inset 0px 0px 29px 22px #c4720f00;
  }
  75% {
    transform: scale(1);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes grow-highlight {
  0% {
    transform: scale(0);
    box-shadow: 0px 0px 71px 101px #dcaa71;
  }
  53% {
    box-shadow: 0px 0px 91px 121px #dcaa71;
  }
  66% {
    transform: scale(1);
    box-shadow: 0px 0px 121px 171px transparent;
  }
}