/* ========================================
   ANIMATIONS.CSS
   Keyframes, GSAP initial states,
   CSS transitions, prefers-reduced-motion.
   No layout — only motion.
   ======================================== */


/* === GSAP INITIAL STATES ===
   Elements start invisible/offset.
   GSAP animates TO opacity:1, y:0, etc.
   Undone by prefers-reduced-motion below. */

.reveal-up {
  opacity: 0;
  transform: translateY(30px);
}

.split-chars .char,
.split-words .word {
  opacity: 0;
  transform: translateY(20px);
}

.section__line,
.hero__line {
  transform: scaleX(0);
  transform-origin: left;
}


/* === CSS TRANSITIONS === */
.faq__icon {
  transition: transform var(--dur-normal) var(--ease-out);
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}

.method__step {
  transition: border-color var(--dur-normal) var(--ease-out);
}


/* === KEYFRAMES === */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(29, 158, 141, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(29, 158, 141, 0);
  }
}

.cta-final .btn {
  animation: pulse-glow 3s ease-in-out infinite;
}


/* === PREFERS REDUCED MOTION ===
   Removes all animation initial states
   and disables CSS animations/transitions.
   JS (animations.js) also checks this
   and skips GSAP initialization. */

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .split-chars .char,
  .split-words .word {
    opacity: 1 !important;
    transform: none !important;
  }

  .section__line,
  .hero__line {
    transform: scaleX(1) !important;
  }

  .cta-final .btn {
    animation: none;
  }

  .faq__icon {
    transition: none;
  }

  .method__step {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}