/**
 * Sistema de animações de entrada — Clínica Creabily
 * As classes abaixo definem o estado inicial/final de cada tipo de
 * animação; quem alterna `.is-visible` é shared/components/scroll-reveal.js
 * (IntersectionObserver, JS puro). Sem bibliotecas externas.
 *
 * Uso:
 *   <h2 data-reveal="fade-up">...</h2>
 *   <p data-reveal="fade-up-sm">...</p>
 *   <div data-reveal-group data-reveal-stagger="150">
 *     <div class="card" data-reveal="fade-up">...</div>
 *   </div>
 *   <span data-reveal="counter" data-counter-target="15">0</span>
 */

[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-reveal].is-visible {
  opacity: 1;
}

[data-reveal="fade-up"] {
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
[data-reveal="fade-up"].is-visible {
  transform: translateY(0);
}

[data-reveal="fade-up-sm"] {
  transform: translateY(20px);
  transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
}
[data-reveal="fade-up-sm"].is-visible {
  transform: translateY(0);
}

[data-reveal="fade-in"] {
  transition: opacity 0.6s ease-out;
}

[data-reveal="slide-left"] {
  transform: translateX(-24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-reveal="slide-left"].is-visible {
  transform: translateX(0);
}

[data-reveal="scale-fade"] {
  transform: scale(0.95);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
[data-reveal="scale-fade"].is-visible {
  transform: scale(1);
}

[data-reveal="counter"] {
  transition: opacity 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Hero: cascata de entrada (independe de scroll) ---------- */

@keyframes hero-cascade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__cta {
  animation: hero-cascade 0.6s ease-out both;
}

.hero__eyebrow {
  animation-delay: 0.3s;
}
.hero__title {
  animation-delay: 0.5s;
}
.hero__subtitle {
  animation-delay: 0.7s;
}
.hero__cta {
  animation-delay: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__cta {
    animation: none;
  }
}

/* ---------- WhatsApp sticky: entrada com bounce ---------- */

@keyframes wa-sticky-in {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(20px);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.wa-sticky {
  animation: wa-sticky-in 0.5s ease-out 2s both;
}

@media (prefers-reduced-motion: reduce) {
  .wa-sticky {
    animation: none;
  }
}