/* Motion only: keyframes, and the selectors that play them.
   js/motion.js adds .motion-on to <html>, then .is-visible to each .scroll-in as it scrolls into view.
   Stagger comes from the .delay-1 … .delay-5 classes in styles.css. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(56px); }
}
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes tile-in {
  from { opacity: 0; transform: scale(0.94); }
}
@keyframes line-in {
  from { transform: scaleX(0); }
}
@keyframes logo-marquee {
  to { transform: translateX(-50%); }
}

.motion-on .scroll-in:not(.is-visible) { opacity: 0; }

.scroll-in.is-visible {
  animation-name: rise-in;
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
}
.scroll-in.is-fade.is-visible {
  animation-name: fade-in;
  animation-duration: 1.4s;
}
.scroll-in.is-tile.is-visible {
  animation-name: tile-in;
  animation-duration: 1.5s;
}
.scroll-in.is-line.is-visible {
  animation-name: line-in;
  transform-origin: left center;
}

.logo-track { animation: logo-marquee 40s linear infinite; }
.logo-track:hover { animation-play-state: paused; }