/* Tumbling cans band.
 *
 * Cans roll across the page, tumbling around their own center. Each can
 * has independent travel time + spin rate (operator-tunable in
 * Site_Config -> tumble_cans). Direction (left↔right vs right↔left),
 * initial timing, and vertical scatter are randomized per page-load by
 * cans-band.js — there's no lock-step.
 *
 * Design intent:
 *  - No clipping. The band runs `overflow: visible` and forms its own
 *    stacking context (z-index: 3) so cans paint above neighbors.
 *  - Performance. One element per can; `translate` + `rotate` are
 *    individual transform properties so the browser composites both on
 *    the GPU. `content-visibility: auto` skips paint entirely when
 *    offscreen.
 */

.cans-band {
  position: relative;
  margin: 30px 0;
  padding: 30px 0 50px;
  overflow: visible;
  isolation: isolate;
  z-index: 3;
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

.cans-band__lane {
  position: relative;
  height: clamp(220px, 22vw, 320px);
}

.cans-band__can {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  /* Per-can scale via --can-scale (set inline). 1.0 = baseline. */
  width: calc(clamp(110px, 13vw, 170px) * var(--can-scale, 1));
  height: auto;
  text-decoration: none;
  outline: none;
  transform-origin: 50% 50%;
  /* Default direction: right → left. */
  translate: 100vw calc(-50% + var(--lane-y, 0px));
  animation:
    can-roll-rl var(--travel, 22s) linear infinite,
    can-spin    var(--spin,   3.3s) linear infinite;
}
/* Flipped direction: left → right. */
.cans-band__can--lr {
  translate: -100% calc(-50% + var(--lane-y, 0px));
  animation:
    can-roll-lr var(--travel, 22s) linear infinite,
    can-spin    var(--spin,   3.3s) linear infinite;
}

.cans-band__can img {
  width: 100%;
  height: auto;
  display: block;
}

.cans-band__can:hover,
.cans-band__can:focus-visible { animation-play-state: paused; }
.cans-band__can:focus-visible img {
  outline: 3px solid var(--p3);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Pause every can while the band is offscreen. */
.cans-band.is-paused .cans-band__can { animation-play-state: paused; }

@keyframes can-roll-rl {
  from { translate: 100vw                    calc(-50% + var(--lane-y, 0px)); }
  to   { translate: calc(-100% - 0vw - 200px) calc(-50% + var(--lane-y, 0px)); }
}
@keyframes can-roll-lr {
  from { translate: -100%                    calc(-50% + var(--lane-y, 0px)); }
  to   { translate: calc(100vw + 200px)      calc(-50% + var(--lane-y, 0px)); }
}

@keyframes can-spin {
  from { rotate: 0deg; }
  to   { rotate: -360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .cans-band__can,
  .cans-band__can--lr {
    animation: none;
    left: auto;
    translate: 0;
    position: static;
    width: clamp(80px, 10vw, 120px);
  }
  .cans-band__lane {
    display: flex; gap: 24px; justify-content: center; align-items: center;
  }
}