html:has(#page-loader:not([data-page-ready="true"])) {
  --loader-progress: 0;
}

#page-loader.page-loader {
  visibility: visible;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#page-loader.page-loader[data-page-ready="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loader__mark {
  width: auto;
  height: 5.5rem;
  max-width: 7rem;
}

.page-loader__mark-img {
  display: block;
  object-fit: contain;
}

@media (min-width: 768px) {
  .page-loader__mark {
    height: 6.25rem;
    max-width: 7.75rem;
  }
}

.logo-mark-draw__path {
  stroke: none;
  fill-opacity: 1;
}

.logo-mark-draw__path--ink {
  fill: #231f20;
}

.logo-mark-draw__path--accent {
  fill: #33c0cd;
}

/*
 * Keyframed mark fill — clip-scale layer2, then fade layer1 / layer34.
 * Timing matches PageLoaderController MIN_ANIMATION_MS (~220ms).
 */
@keyframes page-loader-layer2 {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes page-loader-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#page-loader:not([data-page-ready="true"]) .logo-mark-draw__clip-rect--layer2 {
  transform-box: fill-box;
  transform-origin: 100% 0%;
  transform: scale(0);
}

#page-loader:not([data-page-ready="true"]) .logo-mark-draw__group--layer1,
#page-loader:not([data-page-ready="true"]) .logo-mark-draw__group--layer34 {
  opacity: 0;
}

#page-loader[data-page-loader-animate="true"]:not([data-page-ready="true"])
  .logo-mark-draw__clip-rect--layer2 {
  animation: page-loader-layer2 66ms linear forwards;
}

#page-loader[data-page-loader-animate="true"]:not([data-page-ready="true"])
  .logo-mark-draw__group--layer1 {
  animation: page-loader-fade-in 129ms linear 66ms forwards;
}

#page-loader[data-page-loader-animate="true"]:not([data-page-ready="true"])
  .logo-mark-draw__group--layer34 {
  animation: page-loader-fade-in 105ms linear 195ms forwards;
}

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

  #page-loader:not([data-page-ready="true"]) .logo-mark-draw__clip-rect--layer2 {
    transform: scale(1);
    animation: none;
  }

  #page-loader:not([data-page-ready="true"]) .logo-mark-draw__group--layer1,
  #page-loader:not([data-page-ready="true"]) .logo-mark-draw__group--layer34 {
    opacity: 1;
    animation: none;
  }
}