/* ============================================
   Motion — entrance reveals (Motion.inView triggers .is-in)
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-premium),
              transform var(--dur-reveal) var(--ease-premium);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal--fade { transform: none; }

.reveal--scale { transform: translateY(18px) scale(0.96); }

.reveal--left { transform: translateX(-36px); }

.reveal--right { transform: translateX(36px); }

.reveal--sm { transition-duration: var(--dur-reveal-sm); }
.reveal--lg { transition-duration: var(--dur-reveal-lg); }

/* Stagger groups get a per-child transition-delay written to this custom
   property by JS (index * step) so the CSS itself stays generic. */
.reveal { transition-delay: var(--reveal-delay, 0ms); }

/* Narrow viewports sit close to the container edge, so the full desktop
   slide distance on .reveal--left/--right pushes elements past 100vw pre-
   animation and forces horizontal scroll — pull all offsets in instead of
   just those two, since it reads better proportionally at this size too. */
@media (max-width: 760px) {
  .reveal { transform: translateY(18px); }
  .reveal--scale { transform: translateY(14px) scale(0.97); }
  .reveal--left { transform: translateX(-18px); }
  .reveal--right { transform: translateX(18px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .site-footer__logo img {
    animation: none;
  }
}