/* A ripple carries navigation between the studio pages. */
html.pt-boot body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #06090c;
  pointer-events: none;
}

html.pt-exiting body { pointer-events: none; }

.pt-wave {
  --pt-x: 50%;
  --pt-y: 50%;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at var(--pt-x) var(--pt-y), #242b32 0%, #0a0d11 38%, #030506 100%);
}

.pt-wave-ring,
.pt-wave-ring::after {
  position: absolute;
  border: 1px solid rgba(224, 237, 245, .68);
  border-radius: 50%;
  pointer-events: none;
}

.pt-wave-ring {
  left: var(--pt-x);
  top: var(--pt-y);
  width: var(--pt-size, 0px);
  height: var(--pt-size, 0px);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px rgba(215, 232, 243, .28), inset 0 0 18px rgba(215, 232, 243, .15);
  opacity: var(--pt-ring-opacity, 1);
}

.pt-wave-ring::after {
  content: "";
  inset: -18px;
  border-color: rgba(224, 237, 245, .16);
}

.pt-wave-core {
  position: absolute;
  left: var(--pt-x);
  top: var(--pt-y);
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #e74742;
  box-shadow: 0 0 0 5px rgba(231, 71, 66, .13), 0 0 24px rgba(231, 71, 66, .8);
  opacity: var(--pt-core-opacity, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.pt-boot body::before,
  .pt-wave { display: none; }
}