/* ==========================================================================
   CAMEEP — animations.css
   Animaciones y microinteracciones (CSS3 + soporte JS via IntersectionObserver)
   ========================================================================== */

@keyframes heroKenBurns {
  0%   { transform: scale(1.08) translate3d(0,0,0); }
  100% { transform: scale(1.16) translate3d(-1%, -1%, 0); }
}

@keyframes scrollCue {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes drawLine {
  from { stroke-dashoffset: var(--dash, 1000); }
  to   { stroke-dashoffset: 0; }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.fab-whatsapp { animation: pulseRing 3.2s ease-out infinite; }

/* ---- Scroll reveal --------------------------------------------------------
   .reveal se activa agregando la clase .is-visible via IntersectionObserver
   (ver js/animations.js). Sin JS o con prefers-reduced-motion, el contenido
   permanece visible (progressive enhancement).
---------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.23s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.41s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

.no-js .reveal,
.no-js .reveal-stagger > *,
.no-js .reveal-scale { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; transform: scale(1.02); }
  .reveal, .reveal-stagger > *, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fab-whatsapp { animation: none; }
}

/* Hover lift genérico reutilizable */
.hover-lift { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.hover-lift:hover { transform: translateY(-6px); }

/* Contador animado — el valor final se escribe via JS sobre data-count */
.stat-number[data-count] { font-variant-numeric: tabular-nums; }

/* Línea de proceso dibujada al hacer scroll */
.process-track.is-visible::before {
  animation: none;
}

/* Cursor parallax sutil en hero (aplicado via JS con custom properties) */
.hero-media img { will-change: transform; }
.hero[data-parallax] .hero-media img {
  transform: scale(1.08) translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
}