#gallery-section > :not(.aexa-runner-shell) {
  display: none !important;
}

#gallery-section {
  scroll-margin-top: 92px;
}

#gallery-section .aexa-runner-shell {
  position: relative;
  width: 100%;
  max-width: 2000px;
  height: auto;
  max-height: 750px;
  aspect-ratio: 8 / 3;
  margin: 0 auto;
  overflow: visible;
  border: 1px solid #ffffff;
  background: #bcbcbc;
}

#gallery-section .aexa-runner-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #bcbcbc;
  contain: strict;
}

#gallery-section .aexa-runner-shell > .corner {
  z-index: 3;
}

/*
 * Keep one animated grain surface and give it fixed pixel overscan. The
 * original percentage-sized layers duplicated work in portrait and could
 * expose an edge when Safari's visual viewport changed in landscape.
 */
#root .landing-page .grain {
  display: none !important;
}

#root .landing-page > .grain,
#root .landing-page .hero .grain {
  position: fixed;
  top: calc(-128px - env(safe-area-inset-top, 0px));
  right: calc(-128px - env(safe-area-inset-right, 0px));
  bottom: calc(-128px - env(safe-area-inset-bottom, 0px));
  left: calc(-128px - env(safe-area-inset-left, 0px));
  width: auto;
  height: auto;
  contain: paint;
  backface-visibility: hidden;
  animation: aexa-grain-drift 1.1s steps(1, end) infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

#root .landing-page > .grain {
  display: block !important;
}

/*
 * Match the live mobile hero stack: the background image sits at -10, grain
 * at 1, and hero copy at 10. Use this as the sole mobile grain surface so the
 * texture remains visible without crossing over content or lower-page cards.
 */
@media (max-width: 639px) {
  #root .landing-page > .grain {
    display: none !important;
  }

  #root .landing-page .hero .grain {
    display: block !important;
    z-index: 1;
    opacity: 0.3;
  }
}

/* The site's portrait hero is hidden at the sm breakpoint, so landscape
 * phones retain the root background grain instead of losing both layers. */
@media (min-width: 640px) and (max-height: 500px) {
  #root .landing-page > .grain {
    display: block !important;
    z-index: 1;
    opacity: 0.3;
  }
}

@keyframes aexa-grain-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  20% {
    transform: translate3d(-34px, 20px, 0);
  }

  40% {
    transform: translate3d(22px, -32px, 0);
  }

  60% {
    transform: translate3d(-24px, -16px, 0);
  }

  80% {
    transform: translate3d(28px, 26px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Keep the background texture, but stop its compositor animation while the
 * game owns the frame budget. It resumes whenever play is paused or ends. */
html.aexa-runner-active #root .landing-page > .grain,
html.aexa-runner-active #root .landing-page .hero .grain {
  animation-play-state: paused !important;
}

/*
 * While the canvas is moving, avoid re-blurring it through the surrounding
 * glass panels. Their existing translucent fills preserve the visual style.
 */
@media (max-width: 900px), (max-height: 500px) {
  html.aexa-runner-active #root .landing-page > .grain,
  html.aexa-runner-active #root .landing-page .hero .grain {
    display: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.aexa-runner-active #gallery-section {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  html.aexa-runner-active .glass-surface,
  html.aexa-runner-active .about-section,
  html.aexa-runner-active #faq-section,
  html.aexa-runner-active footer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (max-width: 640px) {
  #gallery-section {
    scroll-margin-top: 82px;
  }

  #gallery-section .aexa-runner-shell {
    height: clamp(280px, calc(100vh - 96px), 330px);
    margin-bottom: 1.5rem;
  }

  #faq-section {
    border-top: 1px solid #ffffff !important;
  }
}

@media (min-width: 641px) {
  #faq-section {
    margin-top: 0 !important;
    border-top: 0 !important;
  }
}