/* ═══════════════════════════════════════════════════════════
   animations.css — Keyframes, scroll-reveal, hover states,
   microinteracciones, transiciones globales
   ═══════════════════════════════════════════════════════════ */

/* ── Keyframes ── */

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%       { transform: translateY(8px); opacity: 0.9; }
}

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

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

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

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.5);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0);
  }
}

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 169, 97, 0.1); }
  50%       { box-shadow: 0 0 40px rgba(201, 169, 97, 0.22); }
}

@keyframes boardPieceFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 6px rgba(201, 169, 97, 0.4)); }
  50%       { transform: translateY(-5px); filter: drop-shadow(0 0 14px rgba(201, 169, 97, 0.7)); }
}

@keyframes docLineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Live dot ── */
.live-dot {
  animation: livePulse 2.2s ease-in-out infinite;
}

/* ── Scroll hint ── */
.scroll-hint-arrow {
  animation: bounceDown 2s ease-in-out infinite;
}

/* ── Hero entrada ── */
.hero-inner .kicker {
  animation: fadeInUp var(--dur-slow) var(--ease-out) 0.1s both;
}

.hero-inner h1 {
  animation: fadeInUp var(--dur-slow) var(--ease-out) 0.25s both;
}

.hero-inner .hero-lead {
  animation: fadeInUp var(--dur-slow) var(--ease-out) 0.4s both;
}

.hero-inner .hero-form {
  animation: fadeInUp var(--dur-slow) var(--ease-out) 0.55s both;
}

.hero-inner .hero-stats {
  animation: fadeInUp var(--dur-slow) var(--ease-out) 0.7s both;
}

.scroll-hint {
  animation: fadeIn 1s var(--ease-out) 1.2s both;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Variante más rápida para elementos más pequeños */
.reveal-fast {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}

.reveal-fast.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Topic cards (transición gestionada desde JS con delay) ── */
.topic-card {
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

/* ── Chess pieces animados ── */
.board-piece--king {
  animation: boardPieceFloat 3.2s ease-in-out infinite;
}

.board-piece--rook {
  animation: boardPieceFloat 3.8s ease-in-out 0.6s infinite;
}

.board-piece--bishop {
  animation: boardPieceFloat 4.1s ease-in-out 1.1s infinite;
}

.board-piece--knight {
  animation: boardPieceFloat 3.5s ease-in-out 1.8s infinite;
}

.board-piece--pawn {
  animation: boardPieceFloat 5s ease-in-out 0.3s infinite;
}

/* ── Pricing featured card ── */
.pricing-card--featured {
  animation: goldGlow 3.5s ease-in-out infinite;
}

/* ── Nav logo hover ── */
.nav-logo .logo-icon {
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.nav-logo:hover .logo-icon {
  background: var(--gold-light);
  transform: rotate(-6deg);
}

/* ── Botones CTA — ripple effect via pseudo ── */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity var(--dur-fast);
}

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

/* ── Issue items ── */
.issue-item {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

/* ── Community stats ── */
.community-stat:nth-child(2) { transition-delay: 0.1s; }
.community-stat:nth-child(3) { transition-delay: 0.2s; }

/* ── Accordion panel animation ── */
.accordion-panel {
  animation: fadeInUp 0.3s var(--ease-out) both;
}

/* ── Sección CTA ── */
.section-cta .cta-inner h2 {
  animation: fadeInUp var(--dur-slow) var(--ease-out) both;
}

/* ── Toast slide ── */
.toast {
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.45s var(--ease-out);
}

/* ── Hover en links del footer ── */
.footer-col a {
  position: relative;
}

.footer-col a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--dur) var(--ease-out);
}

.footer-col a:hover::after {
  width: 100%;
}

/* ── Doc lines animadas al entrar en viewport ── */
.visual-card.revealed .doc-line {
  animation: docLineGrow 0.6s var(--ease-out) both;
}

.visual-card.revealed .doc-line:nth-child(1) { animation-delay: 0.1s; }
.visual-card.revealed .doc-line:nth-child(2) { animation-delay: 0.2s; }
.visual-card.revealed .doc-line:nth-child(3) { animation-delay: 0.3s; }
.visual-card.revealed .doc-line:nth-child(4) { animation-delay: 0.4s; }
.visual-card.revealed .doc-line:nth-child(5) { animation-delay: 0.5s; }
.visual-card.revealed .doc-line:nth-child(6) { animation-delay: 0.6s; }

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

  .reveal,
  .reveal-fast,
  .topic-card,
  .issue-item {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-kicker {
    opacity: 1 !important;
    transform: none !important;
  }
}