.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.page-transition.is-active {
  visibility: visible;
  pointer-events: auto;
}

.page-transition__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-transition__wave {
  fill: #a163a5;
  stroke: #a163a5;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.page-transition__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(13rem, 42vw);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transform-origin: center;
  filter: brightness(0) invert(1);
  will-change: transform, opacity;
}

body.is-page-transitioning {
  cursor: progress;
}

@media (max-width: 640px) {
  .page-transition__logo {
    width: min(10rem, 50vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    display: none;
  }
}