/* Branded first-visit transition. The screen is visible only after loader.js opts in. */
.site-loader {
  display: none;
}

html.site-loading,
html.site-loading body {
  overflow: hidden;
}

html.site-loading .site-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 32px max(24px, env(safe-area-inset-right)) 32px max(24px, env(safe-area-inset-left));
  background: #bd3025;
  color: #fff;
  text-align: center;
  isolation: isolate;
}

.site-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateY(-8px);
}

.site-loader-wordmark {
  display: block;
  position: relative;
  width: clamp(280px, 42vw, 540px);
  height: auto;
}
.site-loader-wordmark > img { position: absolute; display: block; height: auto; }

.loader-character, .loader-strike, .loader-answer { opacity: 0; }
[data-sequence-started] .loader-character {
  animation: loader-letter-in .08s ease-out both;
  animation-delay: calc(.03s + var(--letter-index) * .085s);
}
[data-sequence-started] .loader-strike {
  animation: loader-strike-in .20s ease-out .60s both;
}
[data-sequence-started] .loader-answer {
  animation: loader-letter-in .18s ease-out .82s both;
}
@keyframes loader-letter-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes loader-strike-in {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

.site-loader-progress {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.site-loader-progress-track {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / .32);
}

.site-loader-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.site-loader-progress-value {
  font-family: BrainSans, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
}

.site-loader-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html.site-loading .hero {
    opacity: .72;
    transform: scale(1.025);
  }

  html.site-loading .page-header,
  html.site-loading .doctor-tab {
    opacity: 0;
  }

  html.site-entering .site-loader {
    animation: loader-curtain-away .74s cubic-bezier(.24, .75, .26, 1) both;
    pointer-events: none;
  }

  html.site-entering .site-loader-inner {
    animation: loader-mark-away .42s ease-in both;
  }

  html.site-entering .hero {
    animation: loader-hero-enter .85s cubic-bezier(.17, .67, .28, 1) both;
  }

  html.site-entering .page-header,
  html.site-entering .doctor-tab {
    animation: loader-tools-enter .56s ease-out .22s both;
  }
}

@keyframes loader-curtain-away {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5%); }
}

@keyframes loader-mark-away {
  from { opacity: 1; transform: translateY(-8px) scale(1); }
  to { opacity: 0; transform: translateY(-30px) scale(.96); }
}

@keyframes loader-hero-enter {
  from { opacity: .72; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes loader-tools-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .site-loader-wordmark { width: min(80vw, 420px); }
  .site-loader-inner { gap: 15px; }
  .site-loader-progress { width: 144px; }
}

@media (prefers-reduced-motion: reduce) {
  html.site-loading .site-loader { display: none; }
  html.site-loading,
  html.site-loading body { overflow: auto; }
}