.maga-loader-host {
  position: relative;
}

.maga-image-loader {
  position: absolute;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--maga-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--maga-rows), minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: #171615;
}

.maga-image-loader.is-light {
  background: #fff;
}

.maga-image-loader__cell {
  min-width: 0;
  min-height: 0;
  background: var(--maga-cell, #34312f);
  animation: maga-cell-blink 1.45s ease-in-out infinite alternate;
  animation-delay: var(--maga-delay, 0ms);
  transform-origin: center;
  will-change: opacity, transform;
}

.maga-image-loader__cell:nth-child(7n + 3),
.maga-image-loader__cell:nth-child(11n + 5) {
  --maga-cell: #e85d3a;
}

.maga-image-loader.is-light .maga-image-loader__cell {
  --maga-cell: #e8e5e1;
}

.maga-image-loader.is-light .maga-image-loader__cell:nth-child(11n + 5) {
  --maga-cell: #e85d3a;
}

.maga-image-loader.is-finishing .maga-image-loader__cell {
  animation: maga-cell-out 420ms cubic-bezier(.22, .8, .25, 1) forwards;
  animation-delay: var(--maga-out-delay, 0ms);
}

.maga-img-fade {
  opacity: 0;
  transition: opacity 320ms ease;
}

.maga-img-fade.is-visible {
  opacity: 1;
}

@keyframes maga-cell-blink {
  0% { opacity: .5; }
  100% { opacity: .94; }
}

@keyframes maga-cell-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.35); }
}

@media (prefers-reduced-motion: reduce) {
  .maga-image-loader {
    display: none;
  }

  .maga-img-fade {
    transition-duration: 120ms;
  }
}