/* ============================================================
   ANIMATIONS — PISCIOTTI GÓMEZ ABOGADOS
   animations.css — Micro-animaciones y efectos visuales
   ============================================================ */


/* ── ANIMACIONES DE ENTRADA (Scroll-triggered via JS) ────── */

/* Estado inicial — elementos invisibles */
[data-animate] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Fade up (default) */
[data-animate="fade-up"] {
  transform: translateY(28px);
}

/* Fade in */
[data-animate="fade-in"] {
  transform: none;
}

/* Fade desde izquierda */
[data-animate="fade-right"] {
  transform: translateX(-28px);
}

/* Fade desde derecha */
[data-animate="fade-left"] {
  transform: translateX(28px);
}

/* Zoom in */
[data-animate="zoom-in"] {
  transform: scale(0.92);
}

/* Estado visible — se agrega via IntersectionObserver */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Delays escalonados para grids */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }


/* ── ANIMACIONES DE CARGA (Hero) ─────────────────────────── */

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

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

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

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

/* Clases de animación directa (sin JS) */
.animate-fade-up   { animation: fadeUp 0.7s ease both; }
.animate-fade-in   { animation: fadeIn 0.6s ease both; }
.animate-scale-in  { animation: scaleIn 0.6s ease both; }

/* Delays para uso inline */
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }
.delay-5 { animation-delay: 0.75s; }


/* ── BARRA DE PROGRESO (Stats counter) ───────────────────── */

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

.stat-num.is-visible {
  animation: countUp 0.5s ease both;
}


/* ── SHIMMER (Placeholders de carga) ────────────────────── */

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

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}


/* ── EFECTOS HOVER DE BOTONES ────────────────────────────── */

/* Ripple effect */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}

.btn:active::after {
  opacity: 1;
}


/* ── LÍNEA DE HERO (Top golden bar) ──────────────────────── */

@keyframes shimmerGold {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.hero-gold-bar {
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    var(--color-gold-light) 50%,
    var(--color-gold) 100%
  );
  background-size: 400px 100%;
  animation: shimmerGold 3s linear infinite;
}


/* ── PULSO DEL BADGE "ONLINE" ────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.7; }
}

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 1.8s ease-in-out infinite;
}


/* ── PASO ACTIVO (Proceso) ────────────────────────────────── */

@keyframes stepIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

.step.is-visible .step-num {
  animation: stepIn 0.4s ease both;
}


/* ── RESPETO A PREFERENCIAS DE MOVIMIENTO ────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
  }
}