.hero.hero-runner-banner {
  background-image: none !important;
}

.hero.hero-runner-banner .ai-hero-visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  transform-origin: 69% 35%;
  animation: aiHeroSlowPush 18s ease-in-out infinite alternate;
}

.hero.hero-runner-banner .ai-hero-background,
.hero.hero-runner-banner .ai-hero-runner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  pointer-events: none;
  user-select: none;
}

.hero.hero-runner-banner .ai-hero-background {
  z-index: 0;
}

.hero.hero-runner-banner .ai-hero-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(248, 243, 250, .99) 0%,
    rgba(248, 243, 250, .97) 25%,
    rgba(248, 243, 250, .86) 39%,
    rgba(248, 243, 250, .54) 52%,
    rgba(248, 243, 250, .13) 69%,
    rgba(248, 243, 250, .02) 100%);
}

.hero.hero-runner-banner .ai-hero-motion-canvas {
  z-index: 1;
}

.hero.hero-runner-banner .ai-hero-runner {
  z-index: 2;
}

@keyframes aiHeroSlowPush {
  0% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1.075);
  }
}

@media (max-width: 900px) {
  .hero.hero-runner-banner .ai-hero-background,
  .hero.hero-runner-banner .ai-hero-runner {
    object-position: 61% center;
  }

  .hero.hero-runner-banner .ai-hero-visual {
    transform-origin: 66% 35%;
  }

  .hero.hero-runner-banner .ai-hero-tint {
    background: linear-gradient(90deg,
      rgba(248, 243, 250, .99) 0%,
      rgba(248, 243, 250, .96) 36%,
      rgba(248, 243, 250, .72) 56%,
      rgba(248, 243, 250, .12) 100%);
  }
}

@media (max-width: 620px) {
  .hero.hero-runner-banner .ai-hero-background,
  .hero.hero-runner-banner .ai-hero-runner {
    object-position: 66% center;
  }

  .hero.hero-runner-banner .ai-hero-visual {
    transform-origin: 72% 31%;
  }

  .hero.hero-runner-banner .ai-hero-tint {
    background: linear-gradient(180deg,
      rgba(248, 243, 250, .08) 0%,
      rgba(248, 243, 250, .22) 30%,
      rgba(248, 243, 250, .92) 55%,
      rgba(248, 243, 250, .99) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-runner-banner .ai-hero-visual {
    animation: none;
    transform: none;
  }
}