/*
 * MOVIMIENTO E INTERACCION DE LA TV - ELI STREAMING
 * ==================================================
 * Estilo de transmision real: movimientos cortos, con intencion.
 * Sin brillos, sin pulsos permanentes, sin barridos de luz.
 * Ver js/tv-movimiento.js. Respeta "reducir movimiento" del sistema.
 */

/* Las filas entran escalonadas al aparecer en pantalla. */
.mov-oculto {
  opacity: 0;
  transform: translateY(18px);
}

.mov-entra {
  opacity: 1;
  transform: none;
  transition:
    opacity .45s ease-out,
    transform .45s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--mov-retraso, 0ms);
}

/* Tarjetas de evento: la foto se acerca al enfocar. La tarjeta no se mueve
   (tv-art.css la fija para que la navegacion con control remoto no se descuadre). */
#cards .event .event-cover-photo,
#cards .event .channel-cover {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

#cards .event:hover .event-cover-photo,
#cards .event:focus-visible .event-cover-photo,
#cards .event:hover .channel-cover,
#cards .event:focus-visible .channel-cover {
  transform: scale(1.06);
}

/* Escudos: entran desde los lados la primera vez (como un grafico de transmision). */
#cards .event.mov-entra .participant-side:first-child .participant-badge {
  animation: mov-izquierda .5s cubic-bezier(.2, .7, .2, 1) both;
}

#cards .event.mov-entra .participant-side:last-child .participant-badge {
  animation: mov-derecha .5s cubic-bezier(.2, .7, .2, 1) both;
}

/* Fila de deportes: respuesta al pulsar. */
#sport-rail .sport-tile {
  transition: transform .18s ease, box-shadow .18s ease;
}

#sport-rail .sport-tile:hover,
#sport-rail .sport-tile:focus-visible {
  transform: translateY(-4px);
}

#sport-rail .sport-tile:active {
  transform: scale(.97);
}

#sport-rail .sport-tile .sport-tile-photo {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

#sport-rail .sport-tile:hover .sport-tile-photo,
#sport-rail .sport-tile:focus-visible .sport-tile-photo {
  transform: scale(1.07);
}

/* Etiqueta EN VIVO: un solo destello al aparecer (no late todo el rato). */
.mov-entra .broadcast-badge:not(.scheduled):not(.channel) {
  animation: mov-marca .7s ease-out 1;
}

/* Cambio de estado (programado -> en vivo): el texto se renueva. */
.mov-cambio {
  animation: mov-renueva .5s ease-out 1;
}

/* Botones: presion fisica. */
#lobby button:active,
.cinema-caption button:active {
  transform: scale(.96);
}

@keyframes mov-izquierda {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: none; }
}

@keyframes mov-derecha {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes mov-marca {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: none; }
}

@keyframes mov-renueva {
  from { opacity: .2; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mov-oculto,
  .mov-entra {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #cards .event,
  #cards .event *,
  #sport-rail .sport-tile,
  #sport-rail .sport-tile *,
  .broadcast-badge {
    animation: none !important;
    transition: none !important;
  }
}