/**
 * Hooks and utilities for GSAP / Lottie motion.
 * Add this stylesheet on pages that use AegisMotion (e.g. index).
 */

/* Containers for Lottie (prevents layout shift) */
.lottie-container {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
}

.lottie-container canvas,
.lottie-container svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
}

/* Elements that will be animated by GSAP – avoid flash of unstyled content */
[data-motion-reveal] {
  opacity: 0;
}

[data-motion-reveal].motion-done {
  opacity: 1;
}

/* Respect reduced motion when GSAP is disabled */
@media (prefers-reduced-motion: reduce) {
  [data-motion-reveal] {
    opacity: 1;
  }
}