@media (prefers-reduced-motion: no-preference) {
  .portfolio-reveal:not(:focus-within) {
    animation: portfolio-scroll-in 600ms cubic-bezier(.22, 1, .36, 1) var(--portfolio-reveal-delay, 0ms) both;
  }

  .gallery-item.portfolio-reveal:not(:focus-within) { animation-duration: 480ms; }
}

@keyframes portfolio-scroll-in {
  from { opacity: .24; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  :is(.portfolio-hero__image, .project-hero__media) > img {
    transform: translate3d(0, var(--portfolio-hero-offset, 0px), 0) scale(1.09);
  }
}