/* Ticopa · animaciones «Marcador» (capa aparte, versión A)
 * Reglas: solo transform y opacity · todo dura menos de 400 ms (salvo el punto que late) · nada cambia textos ni lógica.
 * Todo vive dentro de «prefers-reduced-motion: no-preference»: con movimiento reducido no se mueve nada.
 * Las entradas las marca animaciones.js con data-anim, UNA sola vez por bloque (sobreviven a que el Hub redibuje la sección);
 * tocar algo solo da el efecto de pulsación. */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --anim-rapido: cubic-bezier(.2, .8, .2, 1);   /* sale rápido y frena suave, como un marcador que cambia */
    --anim-rojo: var(--rojo, #ff2d55);
  }

  /* ---------- 1. Punto rojo que late (partido en vivo o próximo) ---------- */
  .mc-destacado-cab .mc-est-info::before,
  .mc-est-vivo::before,
  .est-vivo::before { background: var(--anim-rojo); animation: anim-late 1.6s ease-in-out infinite; }
  .mc-destacado-cab .mc-est-info, .mc-est-vivo, .est-vivo { position: relative; }
  .mc-destacado-cab .mc-est-info::after, .mc-est-vivo::after, .est-vivo::after {
    content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
    border: 1.5px solid var(--anim-rojo); opacity: 0; pointer-events: none; animation: anim-onda 1.6s ease-out infinite;
  }
  .torneo-activo-card.curso .ta-punto { animation: anim-late-suave 2.2s ease-in-out infinite; }
  @keyframes anim-late { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .65; } }
  @keyframes anim-late-suave { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.75); opacity: .55; } }
  @keyframes anim-onda { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

  /* ---------- 2. Números: cifras parejas para que no salten mientras cuentan ---------- */
  .gaming-stat-chip strong, .mc-res b, .col-pts, .metric-card h3, .metric-card .h3, [data-saldo], .mc-hora-g { font-variant-numeric: tabular-nums; }

  /* ---------- 3. Tarjetas que se levantan (mouse) y se hunden un poco (toque) ---------- */
  .mc-tarjeta, .mc-herr, .mc-mini, .mc-marcador, .torneo-activo-card, .gaming-stat-chip, .club-social-section,
  .preinscripcion-card, .hs-canal, .home-world-link, .metric-card {
    transition: transform .16s var(--anim-rapido);
  }
  @media (hover: hover) {
    .mc-tarjeta:hover, .mc-herr:hover, .mc-mini:hover, .torneo-activo-card:hover, .gaming-stat-chip:hover,
    .preinscripcion-card:hover, .hs-canal:hover, .home-world-link:hover, .metric-card:hover { transform: translateY(-3px); }
    .mc-marcador:hover { transform: translateY(-2px); }
    .mc-btn:hover { transform: translateY(-1px); }
  }
  .mc-tarjeta:active, .mc-herr:active, .mc-mini:active, .mc-marcador:active, .torneo-activo-card:active,
  .preinscripcion-card:active, .hs-canal:active, .metric-card:active { transform: translateY(-2px) scale(.992); transition-duration: .08s; }
  .mc-btn:active, .btn:active, .tab-btn:active, .nav-link:active, .ia-boton:active, .ia-pestana:active { transform: scale(.96); transition: transform .08s ease-out; }
  .mc-btn, .ia-boton, .ia-pestana { transition: transform .12s var(--anim-rapido); }

  /* ---------- 4. Entradas: las pone animaciones.js UNA sola vez por bloque (atributo data-anim) ----------
   Un elemento que ya se veía NUNCA vuelve a opacidad 0: nada de esto depende de clases globales ni de estilos que se enciendan al tocar. */
  .tab-content.activo, .tab-pane.show.active { animation: none; }   /* la pestaña la anima animaciones.js, solo al cambiar de verdad */
  [data-anim="espera"] { opacity: 0; }   /* mientras cargan sus imágenes (máx. 600 ms) */
  .tab-content.activo[data-anim="tab"], .tab-pane.show.active[data-anim="tab"], [data-anim="tab"] { animation: anim-pestana .22s var(--anim-rapido) both; }
  [data-anim="sube"] { animation: anim-sube .26s var(--anim-rapido) calc(var(--i, 0) * 40ms) backwards; }
  [data-anim="fila"] { animation: anim-fila .2s var(--anim-rapido) calc(var(--i, 0) * 20ms) backwards; }
  @keyframes anim-pestana { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes anim-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes anim-fila { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
  /* El marcador del partido: los equipos entran por los lados y la hora «se marca» al centro */
  [data-anim="marcador"] .mc-loc { animation: anim-izq .3s var(--anim-rapido) backwards; }
  [data-anim="marcador"] .mc-vis { animation: anim-der .3s var(--anim-rapido) backwards; }
  [data-anim="marcador"] .mc-centro { animation: anim-pop .3s var(--anim-rapido) .06s backwards; }
  @keyframes anim-izq { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
  @keyframes anim-der { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  @keyframes anim-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }

  /* ---------- 6. Ventanas: El 11, flyers, analista y modales (se activan con .anim-abre, que pone anim.js al abrirlas) ---------- */
  .el11.anim-abre, .ia.anim-abre { animation: anim-ventana .3s var(--anim-rapido) backwards; }
  @keyframes anim-ventana { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
  .el11.anim-abre .el11-barra, .ia.anim-abre .ia-barra { animation: anim-baja .26s var(--anim-rapido) .04s backwards; }
  @keyframes anim-baja { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  /* El 11: la cancha aparece y las fichas «caen» en su puesto en cascada (11 fichas, la última arranca a los 160 ms) */
  .el11.anim-abre .el11-cancha { animation: anim-pop .3s var(--anim-rapido) .06s backwards; }
  .el11.anim-abre .el11-puesto { animation: anim-ficha .2s var(--anim-rapido) backwards; }
  .el11.anim-abre .el11-puesto:nth-child(2) { animation-delay: 70ms; }  .el11.anim-abre .el11-puesto:nth-child(3) { animation-delay: 86ms; }
  .el11.anim-abre .el11-puesto:nth-child(4) { animation-delay: 102ms; } .el11.anim-abre .el11-puesto:nth-child(5) { animation-delay: 118ms; }
  .el11.anim-abre .el11-puesto:nth-child(6) { animation-delay: 134ms; } .el11.anim-abre .el11-puesto:nth-child(7) { animation-delay: 150ms; }
  .el11.anim-abre .el11-puesto:nth-child(8) { animation-delay: 166ms; } .el11.anim-abre .el11-puesto:nth-child(9) { animation-delay: 182ms; }
  .el11.anim-abre .el11-puesto:nth-child(10) { animation-delay: 198ms; } .el11.anim-abre .el11-puesto:nth-child(n+11) { animation-delay: 214ms; }
  @keyframes anim-ficha { from { opacity: 0; transform: translateY(-14px) scale(.8); } to { opacity: 1; transform: none; } }
  .el11.anim-abre .el11-panel, .el11.anim-abre .el11-col-cancha + * { animation: anim-sube .28s var(--anim-rapido) .1s backwards; }
  /* Analista: los bloques suben uno tras otro, también cuando llega el resultado */
  .anim-abre.ia-caja > *, .ia.anim-abre .ia-caja > * { animation: anim-sube .24s var(--anim-rapido) backwards; }
  .anim-abre.ia-caja > *:nth-child(2), .ia.anim-abre .ia-caja > *:nth-child(2) { animation-delay: 40ms; }
  .anim-abre.ia-caja > *:nth-child(3), .ia.anim-abre .ia-caja > *:nth-child(3) { animation-delay: 80ms; }
  .anim-abre.ia-caja > *:nth-child(4), .ia.anim-abre .ia-caja > *:nth-child(4) { animation-delay: 120ms; }
  .anim-abre.ia-caja > *:nth-child(5), .ia.anim-abre .ia-caja > *:nth-child(5) { animation-delay: 150ms; }
  .anim-abre.ia-caja > *:nth-child(n+6), .ia.anim-abre .ia-caja > *:nth-child(n+6) { animation-delay: 170ms; }
  /* Modales (flyers, exportar, etc.): el fondo aparece y la caja sube */
  .modal.anim-abre, .ticopa-modal-overlay.anim-abre { animation: anim-fondo .2s ease-out backwards; }
  .modal.anim-abre .modal-content, .ticopa-modal-overlay.anim-abre .ticopa-modal-box { animation: anim-ventana .28s var(--anim-rapido) backwards; }
  @keyframes anim-fondo { from { opacity: 0; } to { opacity: 1; } }
  /* Imágenes que llegan después (vista previa del flyer, imagen del 11): aparecen con un pequeño acercamiento */
  [data-anim-img] { animation: anim-pop .3s var(--anim-rapido) backwards; }

  /* Avisos (toast) un poco más vivos al entrar */
  .el11-toast.visible, .ia-toast.visible { animation: anim-toast .26s var(--anim-rapido) backwards; }
  @keyframes anim-toast { from { opacity: 0; } to { opacity: 1; } }
}