/* Progressive image loading. The JS removes these classes after each reveal,
   returning full control to the page-specific hover and transition effects. */
html.smooth-images img:not([src=""]):not(.smooth-image-ready):not(.smooth-image-revealed) {
  opacity: 0 !important;
}

html.smooth-images img.smooth-image-loading {
  filter: blur(12px) !important;
  opacity: 0 !important;
  transform: scale(1.012) !important;
}

html.smooth-images img.smooth-image-ready {
  filter: blur(0) !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  transition:
    filter 620ms cubic-bezier(.22, .61, .36, 1),
    opacity 460ms ease,
    transform 720ms cubic-bezier(.22, .61, .36, 1) !important;
}

html.smooth-images img.smooth-image-revealed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.smooth-images img.smooth-image-loading,
  html.smooth-images img.smooth-image-ready {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}