:root {
  --transition-stroke-1: #d8d9d7;
  --transition-stroke-2: #0e0e0e;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: clip;
  opacity: 0;
  contain: layout style paint;
  will-change: opacity;
}

.page-transition svg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  filter: blur(0.4px);
  transform: translateZ(0) scale(1.16);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

@media (max-width: 768px) {
  .page-transition svg {
    transform: translate3d(0, -7%, 0) scale(1.02);
  }
}

.page-transition path {
  vector-effect: non-scaling-stroke;
  transform-origin: center;
  will-change: stroke-dashoffset, stroke-width;
}