/* A short, user-triggered falling-circle transition between documents. */
html::before {
  content: "";
  position: fixed;
  left: 50%;
  top: -90px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  z-index: 2000;
  pointer-events: none;
  background: #ff5b2e;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.75);
}

html.page-leaving::before {
  opacity: 1;
  animation: circle-drop-cover 520ms cubic-bezier(.35, 0, .25, 1) both;
}

html.page-arriving::before {
  opacity: 1;
  top: 50vh;
  transform: translate(-50%, -50%) scale(var(--circle-scale, 45));
}

html.page-arriving.page-arrival-ready::before {
  animation: circle-drop-away 400ms cubic-bezier(.6, 0, .25, 1) both;
}

@keyframes circle-drop-cover {
  0% {
    top: -90px;
    transform: translate(-50%, -50%) scale(.75);
  }
  38% {
    top: 44vh;
    transform: translate(-50%, -50%) scale(1);
  }
  51% {
    top: 40vh;
    transform: translate(-50%, -50%) scale(1.06);
  }
  100% {
    top: 50vh;
    transform: translate(-50%, -50%) scale(var(--circle-scale, 45));
  }
}

@keyframes circle-drop-away {
  0% {
    top: 50vh;
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--circle-scale, 45));
  }
  70% {
    top: 74vh;
    opacity: 1;
    transform: translate(-50%, -50%) scale(.9);
  }
  100% {
    top: 120vh;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before {
    display: none !important;
    animation: none !important;
  }
}