/* ==========================================================================
   DERMATREATZ — Animations
   ========================================================================== */

/* Scroll reveal base states (activated by JS adding .is-visible) */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* staggered children */
[data-stagger] > * {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }

/* hero intro — the floating loop only. Content reveal is handled by the
   reliable [data-reveal]/[data-stagger] IntersectionObserver system. */

/* floating hero card + badges (decorative loop; do not hide content) */
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-0.4deg); }
}
.hero.is-ready .hero__card { animation: floatCard 6s ease-in-out infinite 0.8s; }

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero.is-ready .hero__float--doc { animation: floatBadge 5s ease-in-out infinite; }
.hero.is-ready .hero__float--rating { animation: floatBadge 5.5s ease-in-out infinite 0.6s; }

/* marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ripple */
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

/* whatsapp pulse */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* counter subtle */
@keyframes countPop {
  0% { transform: scale(0.9); } 100% { transform: scale(1); }
}

/* thank-you check pop */
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.page__icon { animation: popIn 0.7s var(--ease-lux) both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > *, .hero__line span,
  .hero__sub, .hero__desc, .hero__cta, .hero__badges, .hero__visual {
    opacity: 1 !important; transform: none !important;
  }
}