.hero-photo[data-hero-cinematic] {
  --hero-x: 0px;
  --hero-y: 0px;
  --hero-scroll-y: 0px;
  --hero-rx: 0deg;
  --hero-ry: 0deg;
  --hero-scale: 1;
  overflow: hidden;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.school-page .hero-photo[data-hero-cinematic] img {
  transform-origin: 50% 50%;
  transform:
    translate3d(var(--hero-x), calc(var(--hero-y) + var(--hero-scroll-y)), 0)
    rotateX(var(--hero-rx))
    rotateY(var(--hero-ry))
    scale(var(--hero-scale));
  transition: transform 2400ms cubic-bezier(0.2, 0.7, 0.18, 1);
  backface-visibility: hidden;
  will-change: transform;
}

.school-page .hero-photo[data-hero-cinematic].is-cinematic-settled img {
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(0.18, 0.72, 0.22, 1);
}

@media (max-width: 720px) {
  .school-page .hero-photo[data-hero-cinematic] img {
    transition-duration: 1800ms;
  }

  .school-page .hero-photo[data-hero-cinematic].is-cinematic-settled img {
    transition-duration: 650ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .school-page .hero-photo[data-hero-cinematic] img {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}