.page-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  background: var(--color-hero);
  color: var(--color-page);
  pointer-events: auto;
  transition: opacity var(--dur-page-loader-exit) var(--ease-out), visibility var(--dur-page-loader-exit) var(--ease-out);
}

.page-loader.is-complete {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.page-loader__count {
  position: absolute;
  inset-inline-start: var(--space-page-loader-count-inline);
  inset-block-end: var(--space-page-loader-count-bottom);
  display: block;
  width: var(--size-page-loader-count-box);
  color: inherit;
  font-family: var(--font-primary);
  font-size: var(--fs-page-loader-count);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-page-loader-count);
  text-align: center;
  text-transform: uppercase;
  transform: translate3d(0, calc(-1 * var(--page-loader-count-lift, 0px)), 0);
  will-change: transform;
}

.page-loader__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: block;
  width: var(--size-page-loader-bar-inline);
  height: 100%;
  background: var(--color-accent);
  transform: scaleY(var(--page-loader-bar-progress, 0));
  transform-origin: bottom;
  will-change: transform;
}

@media (max-width: 767px) {
  .page-loader__count {
    width: var(--size-page-loader-count-box-mobile);
  }
}

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