/*
 * BGaming preloader logotype — the "wall" (ENG-1921).
 *
 * Loaded by every profile's index.html so the static HTML preloader and the
 * React <BgamingLogoWall> on the Home splash share one source of truth: the
 * two render back to back across the fade hand-off and must be pixel-identical.
 *
 * Geometry: the wall used to be baked into home-screen.svg as a static group
 * spanning x 265 -> 814.228, y 1434 -> 1529.19 of the 1080x1920 viewBox. That
 * group was removed; these rules put a live wall back in the same place.
 * The letter PNGs are that same logotype at 1:2 scale, drawn on an 80u-tall
 * canvas whose ink occupies rows 3..76 — hence the 3u top bleed folded into
 * `top` below. Natural wall box: 427.25u x 80u.
 */

/* Reproduce object-fit:cover for the splash so the wall can be positioned in
   the SVG's own coordinate space instead of guessing where cover cropped it. */
.loading-container {
  position: relative;
  container-type: size;
}

.loading-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100cqw, 100cqh * 0.5625);
  aspect-ratio: 1080 / 1920;
}

.loading-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.preloader-logo {
  position: absolute;
  left: 24.537%;
  top: 74.4867%;
  width: 50.85%;
  height: 5.3558%;
  display: flex;
  align-items: stretch;
  /* Own container so cells and dividers can be sized in % of the wall itself
     (1cqw = 4.2725u) rather than in % of whatever cell they happen to sit in. */
  container-type: size;
}

.preloader-logo__tile {
  width: 13.8092cqw; /* 59u */
  height: 100%;
}

.preloader-logo__cell {
  position: relative;
  width: 14.3944cqw; /* 61.5u */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* First cell butts against the B tile, with no divider between them. */
.preloader-logo__cell--first {
  width: 13.8092cqw; /* 59u */
}

/* Divider straddles the cell boundary, matching the 4.06u bars in the SVG. */
.preloader-logo__cell::after {
  content: '';
  position: absolute;
  top: 0;
  right: -0.3511cqw; /* 1.5u */
  width: 0.7022cqw; /* 3u */
  height: 100%;
  background: url('/preloader/split.png') center / 100% 100% no-repeat;
}

.preloader-logo__glyph {
  width: auto;
  height: 100%;
}

/* The blurred reel smear spans the full cell height, unlike the letters. */
.preloader-logo__spin {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: auto;
  height: 100%;
}

/* Spinning is the default: the reels start in the HTML preloader and keep
   turning through the hand-off to React. React lands them one at a time by
   adding --landed to each cell in turn, so the state is per reel rather than
   per wall — the HTML wall is driven the same way while it is still on top. */
.preloader-logo__cell--reel .preloader-logo__glyph {
  visibility: hidden;
}

.preloader-logo__cell--landed .preloader-logo__spin {
  display: none;
}

.preloader-logo__cell--landed .preloader-logo__glyph {
  visibility: visible;
}

/* A GIF cannot be paused from CSS, so reduced motion drops the reels entirely
   and shows the finished logotype from the start. */
@media (prefers-reduced-motion: reduce) {
  .preloader-logo__spin {
    display: none;
  }

  .preloader-logo__cell--reel .preloader-logo__glyph {
    visibility: visible;
  }
}