/**
 * motion.css — Talk Arabic scroll animation utilities
 * Companion to js/motion.js. Do NOT link this standalone;
 * add <link rel="stylesheet" href="css/motion.css"> after main CSS.
 */

/* Safe default: content stays visible unless the GSAP runtime opts in. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

/* If motion runtime is active, it takes control from hidden -> visible. */
.ta-motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* Word-split spans for hero title animation */
.ta-split-word {
  display: inline-block;
  will-change: opacity, transform;
}

/* Lenis active state — only applied when lenis class is toggled by JS */
html.lenis {
  height: auto;
}

html.lenis body {
  overflow: hidden;
}

/* Reduced-motion: always show content regardless of JS state */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-hero-title] {
    opacity: 1 !important;
    transform: none !important;
  }
  .ta-split-word {
    opacity: 1 !important;
    transform: none !important;
  }
}