[data-preloader] {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111;
  color: var(--color-paper);
}

.preloader__stack {
  position: relative;
  isolation: isolate;
  width: clamp(13rem, 20vw, 25rem);
  aspect-ratio: 3 / 2;
}

.preloader__card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(0);
  backface-visibility: hidden;
  will-change: transform;
}

.preloader__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(2);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.preloader__card:nth-child(1) { z-index: 1; }
.preloader__card:nth-child(2) { z-index: 2; }
.preloader__card:nth-child(3) { z-index: 3; }
.preloader__card:nth-child(4) { z-index: 4; }

.preloader__count {
  position: absolute;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  inset-inline: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(0.875rem, 1vw, 1.125rem);
  font-weight: 400;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

@media (max-width: 767px) {
  .preloader__stack {
    width: clamp(12rem, 58vw, 16.25rem);
  }
}