/* ==========================================================================
   DOIS Consultora — Animaciones
   Motion sutil y con propósito: revela contenido, da feedback, no distrae.
   ========================================================================== */

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45), var(--shadow-lg); }
  50% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0), var(--shadow-lg); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(1.5%, -2%, 0) rotate(1.2deg); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* ---- Scroll reveal (activado vía IntersectionObserver en animations.js) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

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

/* Retraso escalonado para grupos de tarjetas */
.reveal-group > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.34s; }
.reveal-group.is-visible > * { opacity: 1; transform: translateY(0); }

.hero__inner { animation: fade-in-up 0.9s var(--ease) 0.1s both; }
.hero__mesh { animation: drift 18s ease-in-out infinite; }

/* Íconos de pilares: leve "pop" al entrar en viewport, vía clase compartida */
.pillar-card.is-visible .pillar-card__icon { animation: scale-in 0.5s var(--ease) both; }

/* Logo header: ligera rotación del ícono al pasar el mouse por el brand */
.brand:hover .brand__mark { animation: spin-slow 3.5s linear infinite; }

/* Botones: micro-interacción de "shine" en primary */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease);
}
.btn--primary:hover::before { transform: translateX(120%); }

/* Contadores animados: solo transición de color al completar */
.stat-card__num.is-counting { color: var(--rose-500); }

/* Skeleton/placeholder sutil para imágenes con carga diferida */
img[loading="lazy"] {
  background: linear-gradient(90deg, var(--paper-alt) 25%, var(--paper-deep) 37%, var(--paper-alt) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.6s ease infinite;
}
img[loading="lazy"].is-loaded { animation: none; background: none; }
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
  .hero__mesh { animation: none; }
  .brand:hover .brand__mark { animation: none; }
}