/* Shared visible loading feedback and non-destructive image loading polish. */
#site-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  background: rgba(5, 18, 38, 0.88);
  color: #fff;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}
#site-page-loader.is-hidden,
#site-page-loader[aria-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.site-loader-panel {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 24px 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(14, 38, 68, 0.94);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
  font:
    600 14px/1.4 system-ui,
    sans-serif;
  letter-spacing: 0.04em;
}
.site-loader-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(255, 255, 255, 0.22);
  border-top-color: #45d5e8;
  border-right-color: #f6b93b;
  border-radius: 50%;
  animation: site-loader-spin 0.75s linear infinite;
}
#site-load-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 0;
  height: 4px;
  z-index: 2147483647;
  background: linear-gradient(90deg, #0b5fc4, #29c7d8, #f6a623);
  box-shadow: 0 0 12px #29c7d899;
  pointer-events: none;
  transition:
    width 0.22s ease,
    opacity 0.25s ease;
}
#site-load-progress.is-loading {
  width: 72%;
  opacity: 1;
}
#site-load-progress.is-finishing {
  width: 100%;
  opacity: 1;
}
img[loading="lazy"] {
  background-color: rgba(120, 145, 170, 0.12);
}
img.is-image-loading {
  background-color: rgba(120, 145, 170, 0.12);
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    rgba(140, 165, 190, 0.25) 40%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: site-image-shimmer 1.4s ease-in-out infinite;
}
img.is-image-ready {
  animation: none;
}
img.is-image-error {
  opacity: 0.72;
}
@keyframes site-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes site-image-shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #site-page-loader,
  #site-load-progress,
  img.is-image-loading {
    transition: none;
    animation: none;
  }
}