/* =====================================================
   FutData - ANIMACIONES Y TRANSICIONES  (SOLO EN futdata2: TEST)
   -----------------------------------------------------
   Esta capa es nueva: prueba efectos de movimiento sobre la
   pagina sin tocar el resto de los archivos. Se carga DESPUES
   de css/styles.css para poder "pisar" algunas reglas (por
   ejemplo el panel lateral y el modal de club).

   Como se prende y se apaga (para comparar):
   - Boton "ANIM" abajo a la izquierda.
   - O agregar ?anim=0 / ?anim=1 a la direccion (queda guardado).
   - Con "reducir movimiento" activado en el sistema queda apagado.

   Truco importante: las animaciones de entrada usan
   "animation-fill-mode: backwards". Asi, mientras el elemento
   espera su turno (el retraso escalonado) ya se ve en su estado
   inicial, pero CUANDO TERMINA la animacion el navegador la
   suelta y los efectos de hover/click funcionan de nuevo.
   ===================================================== */

/* ---------- Keyframes base ---------- */
@keyframes fda-view-in {
    from { opacity: 0; transform: translateY(16px) scale(.992); }
    to   { opacity: 1; transform: none; }
}
@keyframes fda-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fda-slide-right {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fda-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fda-pop-in {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes fda-pop-out {
    to { opacity: 0; transform: translateY(10px) scale(.96); }
}
@keyframes fda-fade-out {
    to { opacity: 0; }
}
@keyframes fda-pop-now {
    0%   { transform: scale(.9); }
    55%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ---------- 1) Transicion entre vistas (columna del centro) ----------
   Cada vez que se cambia de seccion, el contenido nuevo entra con
   un fade + un desplazamiento chico hacia arriba. La clase la pone
   y la reinicia js/anim.js. */
#ligas-content-view.fda-view {
    animation: fda-view-in .38s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* ---------- 2) Aparicion escalonada de listas ----------
   js/anim.js le pone .fda-item (o .fda-row en tablas) a las
   tarjetas y filas nuevas, y el retraso de cada una va en la
   variable --fda-d (0ms, 40ms, 80ms...). */
.fda-item {
    animation: fda-fade-up .42s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: var(--fda-d, 0ms);
}
.fda-row {
    animation: fda-fade-up .3s ease-out backwards;
    animation-delay: var(--fda-d, 0ms);
}

/* ---------- 3) Paneles de la derecha (fechas / club / partido) ----------
   Entran deslizandose desde la derecha cuando se hacen visibles. */
#fechas-panel.fda-panel,
#equipos-panel.fda-panel,
#partido-panel.fda-panel {
    animation: fda-slide-right .42s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* ---------- 4) Hover y click en tarjetas y botones ----------
   .fda-lift  -> tarjetas: se elevan al pasar el mouse y se hunden
                 un poquito al hacer click.
   .fda-press -> botones: se achican apenas al hacer click.
   Van con "body" adelante para ganarle a las clases de Tailwind. */
body .fda-lift {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s ease, border-color .2s ease,
                background-color .18s ease, color .18s ease;
}
body .fda-lift:hover {
    transform: translateY(-3px);
}
body .fda-lift:active {
    transform: translateY(-1px) scale(.988);
    transition-duration: .07s;
}
body .fda-press {
    transition: transform .14s ease, background-color .18s ease,
                color .18s ease, border-color .2s ease, box-shadow .25s ease;
}
body .fda-press:active {
    transform: scale(.955);
    transition-duration: .06s;
}

/* Filas de tablas: cambio de fondo mas suave al pasar el mouse */
#ligas-content-view tbody tr {
    transition: background-color .18s ease;
}

/* Las migas de pan (INICIO > LIGAS > ...) destellan suave al cambiar */
#breadcrumbs-container.fda-flash {
    animation: fda-fade-up .22s ease backwards;
}

/* El post de Instagram vuelve con un fade cuando se sale de una temporada */
#ig-card.fda-card-in {
    animation: fda-fade-up .34s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* ---------- 5) Menu lateral (drawer del celular) ----------
   El overlay pasa de "display:none" a un fade real, y los enlaces
   entran uno atras del otro cada vez que se abre el cajon. */
#side-overlay {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
#side-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s ease, visibility 0s;
}
#side-drawer {
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
#side-drawer.open {
    box-shadow: 18px 0 44px -18px rgba(0, 0, 0, .8);
}
#side-drawer.open .side-title,
#side-drawer.open .side-link,
#side-drawer.open .fda-toggle-btn {
    animation: fda-fade-up .34s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: var(--fda-d, 0ms);
}

/* ---------- 6) Modal de club ----------
   Al abrir: el fondo aparece con fade y la tarjeta entra con un
   rebote chico. Al cerrar: se va todo para abajo. Las clases las
   pone js/anim.js envolviendo openClubModal / closeClubModal. */
#club-modal.fda-open {
    animation: fda-fade-in .22s ease-out backwards;
}
#club-modal.fda-open > div {
    animation: fda-pop-in .34s cubic-bezier(.22, 1.35, .4, 1) backwards;
}
#club-modal.fda-closing {
    animation: fda-fade-out .2s ease-in both;
}
#club-modal.fda-closing > div {
    animation: fda-pop-out .2s ease-in both;
}

/* El club elegido en el header hace un "pop" al cambiar */
#fav-club-btn.fda-pop {
    animation: fda-pop-now .42s cubic-bezier(.22, 1.4, .36, 1) backwards;
}

/* ---------- 7) Boton de prueba ANIM ON/OFF (abajo de la barra lateral) ----------
   Es una fila mas del panel del menu, pegada al final de todo (en
   la barra de escritorio y en la del cajon del celu). El puntito
   verde indica que las animaciones estan prendidas. */
.fda-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    background: transparent;
    color: #cdc9e6;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, color .18s;
}
.fda-toggle-btn:hover {
    background: rgba(122, 31, 168, .22);
    color: #ff9a7a;
}
.fda-toggle-btn .fda-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
}
html.fda-off .fda-toggle-btn .fda-dot {
    background: #7d78a8;
    box-shadow: none;
}

/* ---------- 8) Interruptor general (boton u ?anim=0) ---------- */
html.fda-off #ligas-content-view.fda-view,
html.fda-off .fda-item,
html.fda-off .fda-row,
html.fda-off #fechas-panel.fda-panel,
html.fda-off #equipos-panel.fda-panel,
html.fda-off #partido-panel.fda-panel,
html.fda-off #club-modal.fda-open,
html.fda-off #club-modal.fda-open > div,
html.fda-off #club-modal.fda-closing,
html.fda-off #club-modal.fda-closing > div,
html.fda-off #side-drawer.open .side-title,
html.fda-off #side-drawer.open .side-link,
html.fda-off #side-drawer.open .fda-toggle-btn,
html.fda-off #fav-club-btn.fda-pop,
html.fda-off #ig-card.fda-card-in,
html.fda-off #breadcrumbs-container.fda-flash {
    animation: none !important;
}
html.fda-off .fda-lift,
html.fda-off .fda-press,
html.fda-off .fda-toggle-btn,
html.fda-off #side-drawer,
html.fda-off #side-overlay,
html.fda-off #ligas-content-view tbody tr {
    transition: none !important;
}

/* ---------- 9) Prendido / apagado ---------- */
/* Ojo: aca habia un bloque "@media (prefers-reduced-motion: reduce)" que
   apagaba todo si el sistema pedia menos movimiento. Se saco a pedido:
   ahora el unico que manda es el boton ANIM ON/OFF, y esa preferencia
   queda guardada en el navegador (localStorage). */