/* =====================================================
   Scroll Reveal
===================================================== */
[data-fade] { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
[data-fade].is-visible { opacity: 1; transform: none; }
[data-delay="80"]  { transition-delay: 80ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="160"] { transition-delay: 200ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }

/* =====================================================
   Character Animation
===================================================== */
.hero__title .char,
.footer-cta__title .char,
.footer-cta__sub .char {
  display: inline-block; opacity: 0; transform: translateX(-12px);
  animation: charIn .35s ease forwards;
  animation-play-state: paused;
}
.hero__title .char { animation-play-state: running; }
.footer-cta__title.is-playing .char,
.footer-cta__sub.is-playing .char { animation-play-state: running; }
@keyframes charIn { to { opacity: 1; transform: translateX(0); } }

/* Slide animations */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}