/* --------------------------------------------------------------------------
   EFECTOS DE UI — animaciones, skeletons, hover y badge de rango
   --------------------------------------------------------------------------
   Los cuatro salieron del mismo components/enhancements.css y se cargaban
   siempre juntos y seguidos. Eran cuatro peticiones para 196 lineas.
   Orden interno = el de carga anterior: animations, skeleton, card-hover,
   rank-badge (animations y card-hover comparten .stats-kpi).
   -------------------------------------------------------------------------- */

/* ── ANIMACIONES DE ENTRADA ────────────────────────────────────── */

/* ==========================================================================
   ANIMACIONES DE ENTRADA — fade + slide up
   ========================================================================== */

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

.anim-card {
    animation: fadeSlideUp .35s ease both;
}
.anim-card:nth-child(1)  { animation-delay: .03s; }
.anim-card:nth-child(2)  { animation-delay: .07s; }
.anim-card:nth-child(3)  { animation-delay: .11s; }
.anim-card:nth-child(4)  { animation-delay: .15s; }
.anim-card:nth-child(5)  { animation-delay: .19s; }
.anim-card:nth-child(6)  { animation-delay: .23s; }
.anim-card:nth-child(7)  { animation-delay: .27s; }
.anim-card:nth-child(8)  { animation-delay: .31s; }
.anim-card:nth-child(9)  { animation-delay: .35s; }
.anim-card:nth-child(10) { animation-delay: .39s; }

/* Aplicado a grids/listas de sección al montar */
.perfil-stats        { animation: fadeSlideUp .3s ease both; }
.stats-kpi           { animation: fadeSlideUp .35s ease both; }
.stats-kpi:nth-child(1) { animation-delay: .05s; }
.stats-kpi:nth-child(2) { animation-delay: .09s; }
.stats-kpi:nth-child(3) { animation-delay: .13s; }
.stats-kpi:nth-child(4) { animation-delay: .17s; }
.stats-kpi:nth-child(5) { animation-delay: .21s; }
.stats-kpi:nth-child(6) { animation-delay: .25s; }
.stats-kpi:nth-child(7) { animation-delay: .29s; }
.stats-kpi:nth-child(8) { animation-delay: .33s; }

/* ── SKELETON LOADERS ────────────────────────────────────── */

/* ==========================================================================
   SKELETON LOADERS
   ========================================================================== */

@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--bg-hover) 50%,
    var(--border) 75%
    );
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
    display: inline-block;
}

/* Tamaños predefinidos */
.sk-text-sm  { height: 12px; width: 80px;  }
.sk-text-md  { height: 14px; width: 120px; }
.sk-row      { height: 56px; width: 100%;  border-radius: var(--radius-sm);  margin-bottom: var(--sp-3); }

/* KPI skeleton */
.skeleton-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-7);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

/* ── HOVER DE TARJETAS ────────────────────────────────────── */

/* ==========================================================================
   HOVER EFFECTS — cards de partida mejorados
   ========================================================================== */

.partida-card {
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, border-left-color var(--t-fast) ease;
    border-left-width: 3px;
    border-left-style: solid;
}

.partida-win:hover {
    transform: translateX(3px);
    box-shadow: -4px 0 16px rgba(52, 211, 153, .18), 0 4px 20px rgba(0,0,0,.2);
    background: linear-gradient(90deg, rgba(52,211,153,.05) 0%, transparent 40%);
}

.partida-loss:hover {
    transform: translateX(3px);
    box-shadow: -4px 0 16px rgba(255, 70, 85, .18), 0 4px 20px rgba(0,0,0,.2);
    background: linear-gradient(90deg, rgba(255,70,85,.05) 0%, transparent 40%);
}

.partida-unknown:hover {
    transform: translateX(3px);
    box-shadow: -4px 0 12px rgba(148,163,184,.1), 0 4px 20px rgba(0,0,0,.2);
}

/* KPI cards hover */
.stats-kpi {
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
    cursor: default;
}
.stats-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Lineup cards — intensificar hover existente */
.lineup-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Agent / Map cards */
.agent-card, .map-card {
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.agent-card:hover, .map-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* El badge de rango (.badge-rank-img, .rank-badge-icon, .rank-icon-sm) se
   movio a components/profile-ui.css: lo pinta includes/valorant/perfil-summary.php
   y hay paginas de perfil (val-agentes, val-armas, val-mapas) que cargan
   profile-ui pero NO ui-effects. Al estar aqui, en esas paginas el icono de
   rango salia a tamano completo por falta de la regla que lo limita. */

/* ── BADGE DE RANGO ────────────────────────────────────── */

/* ==========================================================================
   AGENT COLORS — hover glow con color del agente
   ========================================================================== */

.agent-card {
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.agent-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.3),
                0 0 0 1px var(--agent-color, var(--brand-accent)),
                0 4px 20px color-mix(in srgb, var(--agent-color, var(--brand-accent)) 20%, transparent);
}
.agent-card-name {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
}