/* ============================================================
   JERSEY RACK · canvas overlay for the hanging kits
   ============================================================
   Linked with js/jersey-rack.js. The WebGL picture sits in the
   same grid cell as the rail; the buttons stay on top and keep
   receiving pointer and keyboard. `is-gl` is set only after a
   context boots, so a failed renderer leaves the PNGs up.
   ============================================================ */

.k-wall__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.k-wall.is-gl .k-wall__kit img {
  visibility: hidden;
  transform: none;
}

.k-wall.is-gl .k-wall__kit {
  animation: none;
}

/* Closet stack: each kit on the right sits in front of the one
   on its left, matching the WebGL depth. The chosen shirt still
   comes to the front. Hover must not steal that order.

   The part is also the canvas now. CSS translateX on the items
   was a second clock against the WebGL damp, and getBoundingClientRect
   every frame was sampling that fight. Hit targets stay put. */
.k-wall.is-gl .k-wall__item,
.k-wall.is-gl .k-wall__item:hover,
.k-wall.is-gl .k-wall__item:focus-within,
.k-wall.is-gl .k-wall__item:has(~ .k-wall__item .k-wall__kit[aria-pressed="true"]),
.k-wall.is-gl .k-wall__item:has(.k-wall__kit[aria-pressed="true"]) ~ .k-wall__item,
.k-wall.is-gl .k-wall__item:has(.k-wall__kit[aria-pressed="true"]) {
  z-index: calc(1 + var(--k-n, 0));
  transform: none;
  transition: none;
}
.k-wall.is-gl .k-wall__item:has(.k-wall__kit[aria-pressed="true"]) {
  z-index: 20;
}