/* ══ Frecuencia Boca — motion.css ══
   Capa de movimiento transversal (pedido 2026-10-22): entradas y salidas de las
   interacciones del sitio. Reglas de performance:
   - sólo `transform` y `opacity` (compositor); nunca height/width/margin/padding;
   - 180–320 ms, curvas suaves; stagger acotado (máx. 8 ítems);
   - fill-mode `backwards` (nunca `both`): el último fotograma no se queda pegado y los
     transform de :hover/:active vuelven a responder; nada queda en loop salvo el punto "en vivo";
   - todo se apaga con prefers-reduced-motion. */

:root {
  --mo-rapido: 180ms;
  --mo-base: 260ms;
  --mo-lento: 320ms;
  --mo-salida: cubic-bezier(0.4, 0, 1, 1);
  --mo-entrada: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mo-fade-up   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-pop       { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes mo-slide-x   { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes mo-pulse     { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes mo-marcador  { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ── Bloques de datos: entran al llenarse (stream, equipo, estadio, partido elegido) ── */
.st-entra { animation: mo-fade-up var(--mo-base) var(--mo-entrada) backwards; }
.st-entra > * { animation: mo-fade-up var(--mo-base) var(--mo-entrada) backwards; }
.st-entra > :nth-child(2) { animation-delay: 40ms; }
.st-entra > :nth-child(3) { animation-delay: 80ms; }
.st-entra > :nth-child(4) { animation-delay: 120ms; }
.st-entra > :nth-child(n+5) { animation-delay: 150ms; }

/* ── "Ver más": las filas reveladas entran en cascada ── */
.st-revelado { animation: mo-fade-up var(--mo-base) var(--mo-entrada) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.st-ver-mas { transition: background-color var(--mo-rapido), transform var(--mo-rapido) var(--mo-entrada), opacity var(--mo-rapido); }
.st-ver-mas:active { transform: scale(0.97); }

/* ── Solapas (Match Center y Boca Info): el panel entra; la pestaña activa se asienta ── */
.mc-panel:not([hidden]) { animation: mo-fade-up var(--mo-base) var(--mo-entrada) backwards; }
.sb-tab-panel:not([hidden]) { animation: mo-fade-in var(--mo-base) var(--mo-entrada) backwards; }
.mc-tab, .sb-tab { transition: color var(--mo-rapido), background-color var(--mo-rapido), box-shadow var(--mo-rapido), transform var(--mo-rapido) var(--mo-entrada); }
.mc-tab:active, .sb-tab:active { transform: scale(0.96); }
.mc-tab.active { animation: mo-pop var(--mo-rapido) var(--mo-entrada) backwards; }

/* ── Selector de partidos: la tarjeta elegida se destaca; las demás vuelven suave ── */
.mc-sel { transition: border-color var(--mo-rapido), background-color var(--mo-rapido), transform var(--mo-rapido) var(--mo-entrada), opacity var(--mo-rapido); }
.mc-sel:active { transform: scale(0.96); }
.mc-sel.active { animation: mo-pulse var(--mo-lento) var(--mo-entrada) backwards; }
.mc-selector:has(.mc-sel.active) .mc-sel:not(.active) { opacity: 0.78; }
.mc-selector .mc-sel:not(.active):hover { opacity: 1; }

/* ── Cabecera del partido al cambiar de partido: marcador y escudos ── */
.mc-score-big { transition: transform var(--mo-rapido) var(--mo-entrada); }
.mc-score-big.mo-cambio { animation: mo-marcador var(--mo-lento) var(--mo-entrada); }
.mc-shield-img img, .prox-shield img { transition: transform var(--mo-base) var(--mo-entrada), opacity var(--mo-base); }
.mo-cambio .mc-shield-img img { animation: mo-pop var(--mo-base) var(--mo-entrada) backwards; }

/* ── Cronología: la fila se expande con un asentamiento y se contrae con salida corta ── */
.timeline-ev .ev-row { transition: background-color var(--mo-rapido), transform var(--mo-rapido) var(--mo-entrada); }
.timeline-ev .ev-row:active { transform: scale(0.985); }
.timeline-ev .ev-row.ev-abierto { animation: mo-pop var(--mo-rapido) var(--mo-entrada) backwards; }
.timeline-ev .ev-row.ev-abierto .ev-sub,
.timeline-ev .ev-row.ev-abierto .ev-team { animation: mo-fade-up var(--mo-base) var(--mo-entrada) backwards; animation-delay: 60ms; }

/* ── Filtros (competencias, notas): la píldora activa salta apenas ── */
.st-filtro, .notas-filter { transition: background-color var(--mo-rapido), color var(--mo-rapido), border-color var(--mo-rapido), transform var(--mo-rapido) var(--mo-entrada); }
.st-filtro:active, .notas-filter:active { transform: scale(0.95); }
.st-filtro.active, .notas-filter.active { animation: mo-pop var(--mo-rapido) var(--mo-entrada) backwards; }

/* ── Carrusel de notas y tarjetas: entrada y hover ── */
.bi-notas-track .nota-card, .notas-grid .nota-card { transition: transform var(--mo-base) var(--mo-entrada), border-color var(--mo-base), opacity var(--mo-base); }
.bi-notas-track .nota-card:active, .notas-grid .nota-card:active { transform: scale(0.98); }

/* ── Módulo de día de partido ── */
.bi-dia-partido { animation: mo-slide-x var(--mo-lento) var(--mo-entrada) backwards; }
.bi-dia-partido .sl-dot, .mc-live-dot, .nav-live-dot { animation: mo-live 1.6s ease-in-out infinite; }
@keyframes mo-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }

/* ── Botones y enlaces de acción: respuesta al toque ── */
.btn-primary, .btn-secondary, .mc-yt-btn, .sec-link, .sb-more, .tx-card-more, .social-tile, .st-ver-mas {
  transition: transform var(--mo-rapido) var(--mo-entrada), background-color var(--mo-rapido), border-color var(--mo-rapido), color var(--mo-rapido), box-shadow var(--mo-rapido), opacity var(--mo-rapido);
}
.btn-primary:active, .btn-secondary:active, .mc-yt-btn:active, .tx-card-more:active, .social-tile:active { transform: scale(0.97); }

/* ── Flash del admin y banner de alertas del sitio ── */
.alerta-banner { animation: mo-fade-up var(--mo-base) var(--mo-entrada) backwards; }

/* ── Estado de carga de Boca Info: respira hasta que llegan los datos ── */
.bi-cargando { animation: mo-respira 1.4s ease-in-out infinite; }
@keyframes mo-respira { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── Accesibilidad: sin movimiento si el sistema lo pide ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}