.page-transition {
  --transition-x: 50vw;
  --transition-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(121, 180, 183, 0.18), transparent 34rem),
    #132925;
  clip-path: circle(0 at var(--transition-x) var(--transition-y));
  transition:
    clip-path 760ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 760ms;
}

.page-transition.is-active {
  visibility: visible;
  transition:
    clip-path 760ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0s;
}

.page-transition.is-covering {
  clip-path: circle(150vmax at var(--transition-x) var(--transition-y));
}

.page-transition__bloom {
  position: absolute;
  left: var(--transition-x);
  top: var(--transition-y);
  width: clamp(6rem, 13vw, 10rem);
  aspect-ratio: 1;
  background: #dbb27d;
  -webkit-mask: url("bloom colored.svg") center / contain no-repeat;
  mask: url("bloom colored.svg") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 2.25rem rgba(219, 178, 125, 0.34));
  transform: translate(-50%, -50%) scale(0.45) rotate(-24deg);
  transition:
    opacity 260ms ease,
    transform 760ms cubic-bezier(0.76, 0, 0.24, 1);
}

.page-transition.is-active .page-transition__bloom {
  opacity: 0.92;
}

.page-transition.is-covering .page-transition__bloom {
  transform: translate(-50%, -50%) scale(1) rotate(18deg);
}

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