.sis-hero .hero-media {
  overflow: hidden;
}

.sis-hero .hero-media img {
  inset: -2%;
  width: 104%;
  height: 104%;
  max-width: none;
  transform-origin: 50% 50%;
  animation: sis-hero-background-drift 32s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.sis-hero .hero-shade::after {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 42% 46%, rgba(91, 143, 255, .13), transparent 42%);
  opacity: .34;
  pointer-events: none;
  transform: translate3d(-1.2%, 0, 0);
  animation: sis-hero-ambient-drift 26s ease-in-out infinite alternate;
}

@keyframes sis-hero-background-drift {
  0% {
    transform: translate3d(-.35%, .12%, 0) scale(1.018);
  }

  52% {
    transform: translate3d(.12%, -.18%, 0) scale(1.026);
  }

  100% {
    transform: translate3d(.38%, .08%, 0) scale(1.022);
  }
}

@keyframes sis-hero-ambient-drift {
  from {
    opacity: .24;
    transform: translate3d(-1.2%, 0, 0);
  }

  to {
    opacity: .38;
    transform: translate3d(1.2%, -.6%, 0);
  }
}

@keyframes sis-hero-background-drift-mobile {
  0% {
    transform: translate3d(-.8%, .3%, 0) scale(1.026);
  }

  50% {
    transform: translate3d(.15%, -.45%, 0) scale(1.034);
  }

  100% {
    transform: translate3d(.85%, .18%, 0) scale(1.029);
  }
}

@media (max-width: 700px) {
  .sis-hero .hero-media img {
    inset: -3%;
    width: 106%;
    height: 106%;
    animation-name: sis-hero-background-drift-mobile;
    animation-duration: 22s;
  }

  .sis-hero .hero-shade::after {
    opacity: .3;
    animation-duration: 24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sis-hero .hero-media img {
    animation: none;
    transform: none;
  }

  .sis-hero .hero-shade::after {
    display: none;
    animation: none;
  }
}