/* Homepage hero: preserve heading semantics, arrow, shade and hero height. */
[data-hero-parallax] { --parallax-css-ready: 3; }
[data-hero-parallax] > .hero-banner__image {
  image-rendering: pixelated;
  transform: scale(1.025);
  transform-origin: center center;
}
.hero-parallax {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.hero-parallax__layer {
  position: absolute;
  max-width: none;
  /* Source pixels are enlarged with nearest sampling in a resize-only cache.
     Smooth only its fractional SCREEN-pixel translation, not the source art. */
  image-rendering: auto;
}
.hero-parallax.is-active .hero-parallax__layer { will-change: transform; }
.hero-motion-toggle {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  top: min(calc(100% - 68px - env(safe-area-inset-bottom, 0px)), calc(100svh - 68px - env(safe-area-inset-bottom, 0px)));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
}
.hero-motion-toggle[hidden], .hero-parallax[hidden], .hero-parallax__layer[hidden] { display: none; }
.hero-motion-toggle:hover, .hero-motion-toggle:focus-visible {
  color: #fff;
  background: rgba(7, 12, 24, 0.45);
}
.hero-motion-toggle svg { width: 20px; height: 20px; fill: currentColor; }
/* Keep the pause/resume control on desktop only. Mobile motion is unchanged. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .hero-motion-toggle { display: none; }
}
.hero-motion-toggle__play { display: none; }
.hero-motion-toggle[aria-pressed='true'] .hero-motion-toggle__play { display: block; }
.hero-motion-toggle[aria-pressed='true'] .hero-motion-toggle__pause { display: none; }
/* Styling is independent of H1 semantics. Limit the size change to homepages. */
.hero-banner .game-title { font-size: 24px; }
@media (min-width: 1000px) {
  .hero-banner .game-title { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-parallax, .hero-motion-toggle { display: none; }
  [data-hero-parallax] > .hero-banner__image { visibility: visible !important; }
}