.site-loader {
  --site-loader-icon-height: clamp(132px, 19svh, 184px);
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  transition: opacity 480ms ease, visibility 0s linear 480ms;
}

.site-loader__icon {
  width: auto;
  height: var(--site-loader-icon-height);
  max-width: 38vw;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.92);
  animation: site-loader-icon-in 2600ms cubic-bezier(0.22, 1, 0.36, 1) 50ms forwards;
}

.site-loader::after {
  position: absolute;
  inset: 0;
  width: auto;
  height: var(--site-loader-icon-height);
  margin: auto;
  aspect-ratio: 1276 / 2660;
  content: "";
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 204, 0.48) 50%, transparent 65%) -125% 0 / 240% 100% no-repeat;
  opacity: 0;
  -webkit-mask: url("../../Ma%27moor%20Icon.png") center / contain no-repeat;
  mask: url("../../Ma%27moor%20Icon.png") center / contain no-repeat;
  animation: site-loader-shimmer 2600ms ease-in-out 50ms forwards;
}

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

@keyframes site-loader-icon-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes site-loader-shimmer {
  0% {
    background-position: -125% 0;
    opacity: 0;
  }

  20% {
    opacity: 0.28;
  }

  82% {
    opacity: 0.22;
  }

  100% {
    background-position: 125% 0;
    opacity: 0;
  }
}

@media (max-width: 620px) {
  .site-loader {
    --site-loader-icon-height: min(21svh, 154px);
  }

  .site-loader__icon {
    max-width: 32vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader {
    transition-duration: 160ms;
  }

  .site-loader__icon {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .site-loader::after {
    display: none;
  }
}