/*
  ANIMATIONS — "Ningún Animal Atrás"
  Micro-interacciones sutiles. Todo lo que se anima aquí respeta
  prefers-reduced-motion: se desactiva el movimiento pero el contenido
  final sigue siendo correcto (no depende de la animación para mostrarse).
*/

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scroll-reveal genérico: se aplica vía JS añadiendo .is-visible
   cuando el elemento entra en el viewport (IntersectionObserver). */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-group] > * {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

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

/* Contador: pequeño "pulso" cuando termina de contar */
.counter__value.is-counted {
  animation: pop-in var(--duration-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .counter__value.is-counted { animation: none; }
}

/* Hover diagonal reutilizable en tarjetas interactivas */
.hover-diag {
  position: relative;
  overflow: hidden;
}
.hover-diag::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-20deg);
  transition: left var(--duration-slow) var(--ease-out);
  pointer-events: none;
}
.hover-diag:hover::after { left: 120%; }
@media (prefers-reduced-motion: reduce) {
  .hover-diag::after { display: none; }
}

/* Toast de estado de formulario */
.form-status.is-visible {
  animation: fade-up var(--duration-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .form-status.is-visible { animation: none; }
}