/* V3 candidate: slower, replayable home opening sequence. */
.home-v3.is-v3-loading .home-interface {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.v3-loader {
  position: fixed;
  z-index: 110;
  inset: 0;
  contain: strict;
  overflow: hidden;
  background: #111;
  color: #f4f4f2;
  opacity: 1;
  visibility: visible;
  transition: opacity .68s ease, visibility .68s ease;
}

.v3-loader[hidden] {
  display: none;
}

.v3-loader.is-finished {
  opacity: 0;
  visibility: hidden;
}

.v3-loader-percent {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: opacity .3s ease;
}

.v3-loader.is-counted .v3-loader-percent {
  opacity: 0;
}

.v3-loader-gallery {
  position: absolute;
  inset: 0;
}

.v3-loader-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(54px, 5.8vw, 100px);
  height: clamp(34px, 3.8vw, 64px);
  object-fit: cover;
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--v3-row-x), 42vh) scale(.72);
  transform-origin: center;
  transition: opacity .32s ease, transform .94s var(--ease), filter .5s ease;
  will-change: transform, opacity;
}

.v3-loader-tile:nth-child(1) { --v3-row-x: -24vw; --v3-mosaic: translate(-16vw, -18vh) scale(4.7); }
.v3-loader-tile:nth-child(2) { --v3-row-x: -18vw; --v3-mosaic: translate(-36vw, 8vh) scale(3); }
.v3-loader-tile:nth-child(3) { --v3-row-x: -12vw; --v3-mosaic: translate(23vw, -35vh) scale(3.5); }
.v3-loader-tile:nth-child(4) { --v3-row-x: -6vw; --v3-mosaic: translate(-38vw, -32vh) scale(3.3); }
.v3-loader-tile:nth-child(5) { --v3-row-x: 0vw; --v3-mosaic: translate(2vw, -40vh) scale(3); }
.v3-loader-tile:nth-child(6) { --v3-row-x: 6vw; --v3-mosaic: translate(25vw, 8vh) scale(4); }
.v3-loader-tile:nth-child(7) { --v3-row-x: 12vw; --v3-mosaic: translate(-22vw, -42vh) scale(3.2); }
.v3-loader-tile:nth-child(8) { --v3-row-x: 18vw; --v3-mosaic: translate(-36vw, 27vh) scale(4); }
.v3-loader-tile:nth-child(9) { --v3-row-x: 24vw; --v3-mosaic: translate(34vw, -12vh) scale(3.4); }

.v3-loader.is-row .v3-loader-tile {
  opacity: 1;
  transform: translate(-50%, -50%) translate(var(--v3-row-x), 42vh) scale(1);
}

.v3-loader.is-mosaic .v3-loader-tile {
  transform: translate(-50%, -50%) var(--v3-mosaic);
}

.v3-loader.is-opening .v3-loader-tile {
  opacity: 0;
  filter: brightness(.75);
}

.v3-loader.is-opening .v3-loader-tile--lead {
  z-index: 5;
  opacity: 1;
  transform: translate(-50%, -50%) scale(24);
  filter: none;
}

@media (max-width: 560px) {
  .v3-loader-tile:nth-child(n + 6) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-loader {
    display: none !important;
  }

  .home-v3.is-v3-loading .home-interface {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
