/* Homepage hero "game wall": five vertical columns of game screenshots
   scrolling in alternating directions behind the headline.
   All rules are scoped under .page-header.hero-wall so the ~28 other views
   that reuse .page-header are untouched. Keyframes are hw- prefixed to avoid
   colliding with the minified Soft UI bundle. */

.page-header.hero-wall {
  /* graphite gradient (matches the site/footer scheme) shows between tiles */
  background-image: linear-gradient(310deg, #141727 0%, #28333F 100%) !important;
  overflow: visible;                   /* don't clip the Wistia player, which renders as an
                                          out-of-flow overlay; the wall is clipped by .hero-bg below */
  min-height: 660px;                   /* give the wall a proper canvas + room for the video */
  position: relative;
  z-index: 1;                          /* own stacking context BELOW the navbar (.z-index-3), so the
                                          inner content z-indexes don't rise over the nav dropdowns */
}

/* Animated wall layer, below the scrim and content. Clips the scrolling tiles
   (and the scale(1.06) bleed) independently of the .page-header overflow. */
.page-header.hero-wall .hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.page-header.hero-wall .mode-columns {
  display: flex;
  gap: 14px;
  padding: 0 14px;
  height: 100%;
  align-items: stretch;
  transform: scale(1.06);              /* bleed tile edges past the bounds */
}

.page-header.hero-wall .col {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.page-header.hero-wall .col-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.page-header.hero-wall .col-track img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  margin-bottom: 14px;                 /* margin NOT gap: required for the exact 50% loop */
  -webkit-user-drag: none;
  user-select: none;
}

.page-header.hero-wall .col-up   .col-track { animation: hw-col-up   linear infinite; }
.page-header.hero-wall .col-down .col-track { animation: hw-col-down linear infinite; }

@keyframes hw-col-up   { from { transform: translateY(0);    } to { transform: translateY(-50%); } }
@keyframes hw-col-down { from { transform: translateY(-50%); } to { transform: translateY(0);    } }

.page-header.hero-wall .hero-bg.paused .col-track { animation-play-state: paused; }

/* Readability scrim: above the wall, below the content. Two layers - a subtle
   top band behind the headline (which sits above the vignette's center) plus
   the handoff's center vignette. */
.page-header.hero-wall .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8, 16, 38, .92) 0%,
      rgba(8, 16, 38, .60) 24%,
      rgba(8, 16, 38, 0)   48%),
    radial-gradient(120% 90% at 50% 42%,
      rgba(8, 16, 38, .78) 0%,
      rgba(8, 16, 38, .52) 38%,
      rgba(8, 16, 38, .20) 68%,
      rgba(8, 16, 38, .34) 100%);
}

/* Handoff text-shadows for extra legibility over the busy wall. */
.page-header.hero-wall h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.page-header.hero-wall h2 { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }

/* Stacking: hero-bg(0) < scrim(1) < waves(2) < content/video(3). Waves sit above
   the scrim (so they aren't darkened) but below the content, so the video shows
   in front of the waves instead of being clipped by them. */
.page-header.hero-wall .position-absolute.bottom-0 { z-index: 2 !important; }
.page-header.hero-wall .container { position: relative; z-index: 3; }

/* Frozen collage for users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .page-header.hero-wall .col-track { animation: none !important; }
}

/* Tablet: drop to 3 columns. */
@media (max-width: 820px) {
  .page-header.hero-wall .mode-columns { gap: 8px; padding: 0 8px; transform: scale(1.04); }
  .page-header.hero-wall .col:nth-child(n+4) { display: none; }
}

/* Phone: 2 columns (JS also freezes them, see hero-game-wall.js). */
@media (max-width: 480px) {
  .page-header.hero-wall .col:nth-child(n+3) { display: none; }
}