/* =====================================================================
   SQUIRRO MOTION
   Reveal animations only. Subtle, fast, supportive.
   ===================================================================== */

:root {
  --sq-motion-distance: 12px;     /* between 8 and 16 */
  --sq-motion-duration: 400ms;    /* between 300 and 500 */
  --sq-motion-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out, smooth deceleration */
  --sq-motion-stagger: 70ms;      /* between 50 and 100 */
}

/* Base: elements opt-in by adding .sq-reveal. They start hidden,
   and become visible by adding .is-in (typically via IntersectionObserver). */
.sq-reveal {
  opacity: 0;
  transform: translateY(var(--sq-motion-distance));
  transition:
    opacity var(--sq-motion-duration) var(--sq-motion-ease),
    transform var(--sq-motion-duration) var(--sq-motion-ease);
  will-change: opacity, transform;
}
.sq-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers: place .sq-reveal on N siblings; the parent decides delay
   via an inline --i custom property, or use these utility classes. */
.sq-reveal-stagger > .sq-reveal { transition-delay: calc(var(--sq-motion-stagger) * var(--i, 0)); }

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .sq-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}