/* animations.css — Sistema centralizado de animaciones — Rowzen */

/* ===== KEYFRAMES ===== */

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

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.9); }
  70%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

/* ===== INTERSECTION OBSERVER — [data-animate] ===== */
/* JS en ui-enhancements.js añade .is-visible cuando el elemento entra al viewport */

[data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 280ms ease, transform 280ms ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="slide-right"] {
  transform: translateX(16px);
}
[data-animate="slide-right"].is-visible {
  transform: translateX(0);
}

[data-animate="scale"] {
  transform: scale(0.96);
}
[data-animate="scale"].is-visible {
  transform: scale(1);
}

/* Delay en cascada para listas de cards */
[data-animate][data-delay="1"] { transition-delay: 60ms; }
[data-animate][data-delay="2"] { transition-delay: 120ms; }
[data-animate][data-delay="3"] { transition-delay: 180ms; }
[data-animate][data-delay="4"] { transition-delay: 240ms; }
[data-animate][data-delay="5"] { transition-delay: 300ms; }
[data-animate][data-delay="6"] { transition-delay: 360ms; }

/* ===== CLASES DE ANIMACIÓN DIRECTA ===== */

.anim-fade-in {
  animation: fadeIn 280ms ease both;
}

.anim-fade-in-fast {
  animation: fadeInFast 150ms ease both;
}

.anim-slide-up {
  animation: slideInUp 280ms ease both;
}

.anim-slide-right {
  animation: slideInRight 280ms ease both;
}

.anim-scale-in {
  animation: scaleIn 200ms ease both;
}

.anim-scale-bounce {
  animation: scaleInBounce 320ms ease both;
}

/* ===== SPINNER ===== */

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  flex-shrink: 0;
}

.spinner-sm {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 1.5px;
}

.spinner-lg {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 3px;
}

.spinner-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
}

/* ===== GRADIENTE DE TEXTO (acento tipográfico) ===== */

.gradient-text {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== PULSE — indicadores de estado activo ===== */

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse 2s ease-in-out infinite;
}

.pulse-dot.warning { background: var(--color-warning); }
.pulse-dot.error   { background: var(--color-error); }
.pulse-dot.info    { background: var(--color-info); }

/* ===== HOVER INTERACTIVO — para cards y filas clickeables ===== */

.card-interactive {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  cursor: pointer;
}

.card-interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Desactivar en dispositivos táctiles */
@media (hover: none) {
  .card-interactive:hover {
    transform: none;
    box-shadow: var(--shadow-base);
  }
}

/* ===== BTN LOADING STATE ===== */

.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading::after {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  margin-left: var(--spacing-2);
  vertical-align: middle;
}

/* ===== REDUCIR MOVIMIENTO — Accesibilidad ===== */

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .anim-fade-in,
  .anim-slide-up,
  .anim-scale-in,
  .anim-scale-bounce {
    animation: none;
  }

  .spinner {
    animation-duration: 1200ms;
  }
}