/* nestech.dk's motion, as Elementor drew it: entrance animations and the photos' hover zoom.
   An element with data-animation="<name>" stays hidden until site.js marks it .animated as it
   scrolls into view, then plays the animation once. Without JavaScript, or for visitors who ask
   for reduced motion, nothing is hidden or moved. */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-animation]:not(.animated) { visibility: hidden; }
  [data-animation].animated { animation-duration: 1.25s; }
  [data-animation="fade-in"].animated { animation-name: fade-in; }
  [data-animation="fade-in-up"].animated { animation-name: fade-in-up; }
  [data-animation="fade-in-down"].animated { animation-name: fade-in-down; }
  [data-animation="fade-in-left"].animated { animation-name: fade-in-left; }
  [data-animation="fade-in-right"].animated { animation-name: fade-in-right; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } }
@keyframes fade-in-down { from { opacity: 0; transform: translate3d(0, -100%, 0); } }
@keyframes fade-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } }
@keyframes fade-in-right { from { opacity: 0; transform: translate3d(100%, 0, 0); } }

.library img, .person img { transition: transform 1.5s; }
:is(.library li, .person):hover img { transform: scale(1.2); }