.max-loader {
  --max-loader-width: 156px;
  display: block;
  width: var(--max-loader-width);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 18px rgb(35 24 14 / 12%));
}

.max-loader::before {
  content: "";
  display: block;
  width: 700%;
  height: 100%;
  background: url("/images/max-loading-sprite.png?v=20260831-1") left top / 100% 100% no-repeat;
  animation: max-loader-frames 1.12s steps(7, end) infinite;
  will-change: transform;
}

.max-loader--small {
  --max-loader-width: 112px;
}

.max-loader--on-dark {
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 34%));
}

@keyframes max-loader-frames {
  to { transform: translateX(-100%); }
}

@media (max-width: 640px) {
  .max-loader { --max-loader-width: 138px; }
  .max-loader--small { --max-loader-width: 102px; }
}

@media (prefers-reduced-motion: reduce) {
  .max-loader::before {
    animation: none;
    transform: translateX(-57.142857%);
  }
}