/* Motion is applied to photographs only. */
:is(.hero-image-wrap, .home-intro-image, .home-work, .about-main-image, .about-small-image, .portfolio-card-image) img.photo-effect {
  opacity: 1; filter: none; clip-path: inset(0);
  transition: opacity .85s ease, filter .85s ease, clip-path .85s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
}
:is(.hero-image-wrap, .home-intro-image, .home-work, .about-main-image, .about-small-image, .portfolio-card-image) img.photo-effect.photo-pending {
  opacity: .05; filter: blur(8px); clip-path: inset(7% 0 7% 0);
}
@media (hover: hover) and (pointer: fine) {
  .photo-effect-frame:hover img.photo-reactive,
  .portfolio-card:focus-visible .photo-effect-frame img.photo-reactive {
    transform: scale(1.075) translate3d(var(--photo-x, 0px), var(--photo-y, 0px), 0);
    filter: brightness(1.05);
  }
}
#gallery-image.photo-changing { animation: photo-arrive .62s cubic-bezier(.2,.7,.2,1) both; }
@keyframes photo-arrive {
  from { opacity: .2; filter: blur(7px); transform: scale(1.055); }
  to { opacity: 1; filter: none; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.hero-image-wrap, .home-intro-image, .home-work, .about-main-image, .about-small-image, .portfolio-card-image) img.photo-effect,
  :is(.hero-image-wrap, .home-intro-image, .home-work, .about-main-image, .about-small-image, .portfolio-card-image) img.photo-effect.photo-pending {
    opacity: 1 !important; filter: none !important; clip-path: none !important; transform: none !important; transition: none !important;
  }
  #gallery-image.photo-changing { animation: none !important; }
  .magazine .portfolio-card:hover img, .photo-effect-frame:hover img.photo-reactive { transform: none !important; }
}