.page-transition-loader[hidden] {
  display: none !important;
}

.page-transition-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: rgb(244 252 254 / .76);
  backdrop-filter: blur(2px);
  color: var(--brand-aqua-dark, var(--ui-accent-dark, #028ca0));
}

.page-transition-loader__status {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: none;
  color: var(--ink, var(--ui-ink, #17231e));
  font-size: .92rem;
  font-weight: 760;
  line-height: 1.35;
  text-align: center;
}

.page-transition-loader__status [data-page-transition-text] {
  position: absolute;
  top: calc(50% + 48px);
  width: min(90vw, 560px);
}

.page-transition-loader__ecg {
  display: grid;
  place-items: center;
  width: 66.6667vw;
  height: 72px;
  flex: 0 0 auto;
  color: var(--brand-aqua-dark, var(--ui-accent-dark, #028ca0));
}

.page-transition-loader__ecg svg {
  width: 100%;
  height: 72px;
  overflow: visible;
}
.page-transition-loader__wave--desktop { display: none; }

.page-transition-loader__baseline,
.page-transition-loader__trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.page-transition-loader__baseline {
  stroke: rgb(2 140 160 / .22);
  stroke-width: 1px;
}

.page-transition-loader__trace {
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: page-transition-ecg 1.5s linear infinite;
}

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

@media (min-width: 761px) {
  .page-transition-loader__ecg {
    width: 66.6667vw;
    height: clamp(112px, 16vh, 168px);
  }
  .page-transition-loader__ecg svg { height: 100%; }
  .page-transition-loader__wave--mobile { display: none; }
  .page-transition-loader__wave--desktop { display: block; }
  .page-transition-loader__status [data-page-transition-text] {
    top: calc(50% + clamp(76px, 10vh, 98px));
  }
}

@keyframes page-transition-ecg {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  68% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  84%, 100% {
    stroke-dashoffset: 0;
    opacity: .18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-loader__trace {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}