/* ===================================================
   VCTier - animations.css
   Smooth hover effects & micro-interactions
   =================================================== */

/* ===== NAVBAR — CỐ ĐỊNH TUYỆT ĐỐI ===== */
.navbar-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    padding: 12px 16px 0 !important;
    animation: navSlideDown 0.4s cubic-bezier(0.16,1,0.3,1) both;
    transform: none !important;
    will-change: auto;
}
@keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Navbar glass effect khi scroll */
.navbar {
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.navbar.scrolled {
    background: rgba(20, 23, 32, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 32px rgba(0,0,0,0.4);
    border-color: rgba(37, 40, 54, 0.6) !important;
}

/* ===== LOGO animation ===== */
.logo-text {
    display: inline-block;
    transition: letter-spacing 0.3s cubic-bezier(0.34,1.56,0.64,1),
                filter 0.3s;
}
.logo-link:hover .logo-text {
    letter-spacing: 1px;
    filter: drop-shadow(0 0 12px rgba(129,140,248,0.6));
}

/* ===== NAV ITEMS ===== */
.nav-item {
    position: relative;
    transition: color 0.2s, background 0.2s;
    overflow: hidden;
}
.nav-item:hover {
    color: #fff; /* White text on hover */
    background: rgba(255, 255, 255, 0.08); /* Slightly brighter background */
}
/* Removed underline effect */

/* Nav icon bounce - removed animation */
.nav-item img.nav-icon {
    transition: none;
}

/* Search bar focus glow */
.search-bar {
    transition: border-color 0.25s, box-shadow 0.25s, background 0.2s;
}
.search-bar:hover {
    border-color: rgba(129,140,248,0.5) !important;
    box-shadow: 0 0 0 3px rgba(129,140,248,0.08);
    background: rgba(30,34,53,0.9) !important;
}

/* ===== TABS ===== */
.tab {
    position: relative;
    overflow: hidden;
    transition: color 0.2s, background 0.2s;
}
.tab:hover {
    color: #fff; /* White text on hover */
    background: rgba(255, 255, 255, 0.08); /* Slightly brighter background */
}
.tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(129,140,248,0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}
/* Removed all hover animations for tabs */

/* ===== PLAYER ROWS — Overall ===== */
.player-row {
    transition: background 0.15s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.2s;
    position: relative;
}
/* Removed ::before pseudo-element that created the purple left border */
.player-row:hover {
    /* Removed translateX to prevent card shifting */
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Rank badge pulse on hover */
.player-row:hover .rank-badge {
    animation: rankPulse 0.4s ease;
}
@keyframes rankPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Player name glow */
.player-row:hover .player-name {
    color: #c7d2fe;
    transition: color 0.2s;
}

/* Avatar hover effect */
.player-avatar-wrap {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
    border-radius: 8px;
    overflow: hidden;
}
.player-row:hover .player-avatar-wrap {
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Tier chip hover */
.tier-chip {
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    cursor: default;
}
.tier-chip:hover {
    transform: translateY(-3px) scale(1.1);
}

/* ===== TIER LIST ROWS (mode pages) ===== */
.tier-player-row {
    transition: background 0.15s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                padding-left 0.2s;
    position: relative;
}
.tier-player-row:hover {
    transform: translateX(4px);
    background: var(--accent-hover) !important;
}
.tier-player-row:hover .tier-player-avatar img {
    transform: scale(1.08);
}
.tier-player-avatar img {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.tier-player-row:hover .tier-player-name {
    color: #c7d2fe;
    transition: color 0.2s;
}

/* ===== TIER COLUMN HEADERS ===== */
.tier-col {
    transition: box-shadow 0.3s;
}
.tier-col:hover {
    box-shadow: inset 0 0 30px rgba(129,140,248,0.04);
}
.tier-col-header {
    transition: filter 0.2s;
}
.tier-col:hover .tier-col-header {
    filter: brightness(1.08);
}

/* ===== DROPDOWN MENU ===== */
.dropdown-menu {
    transform-origin: top left;
    animation: none;
    transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.dropdown-menu.open {
    animation: dropDown 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes dropDown {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item {
    transition: background 0.15s, color 0.15s, transform 0.15s, padding-left 0.15s;
}
.dropdown-item:hover {
    padding-left: 20px !important;
}

/* ===== INFO BTN ===== */
.info-btn {
    transition: background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.2s;
}
.info-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px rgba(129,140,248,0.3);
}
.info-btn:active { transform: scale(0.97); }

/* ===== COPY BTN ===== */
.copy-btn {
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), color 0.2s;
}
.copy-btn:hover { transform: scale(1.3); }

/* ===== DISCORD CHIP ===== */
.discord-chip {
    transition: background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.2s;
}
.discord-chip:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(88,101,242,0.5);
}

/* ===== MODALS — smooth open/close ===== */
.modal-overlay {
    transition: opacity 0.2s;
}
.modal-overlay.open {
    animation: modalFadeIn 0.25s ease both;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal-box,
.player-modal,
.search-modal {
    animation: modalSlideUp 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                color 0.2s, background 0.2s;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.modal-close:hover {
    transform: rotate(90deg) scale(1.1);
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

/* ===== SEARCH RESULTS ===== */
.search-result-item {
    transition: background 0.15s, transform 0.15s, padding-left 0.15s;
}
.search-result-item:hover {
    padding-left: 28px !important;
}
.search-result-avatar img {
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.search-result-item:hover .search-result-avatar img {
    transform: scale(1.08);
}

/* ===== PLAYER MODAL — tier chips ===== */
.pm-tier-chip {
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), filter 0.2s;
    cursor: default;
}
.pm-tier-chip:hover {
    transform: translateY(-4px) scale(1.12);
    filter: brightness(1.15);
}
.pm-avatar-wrap img {
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.player-modal:hover .pm-avatar-wrap img {
    transform: scale(1.03);
}

/* ===== PAGE LOAD — stagger rows ===== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.player-row {
    animation: fadeUp 0.35s ease both;
}
.player-row:nth-child(1)  { animation-delay: 0.03s; }
.player-row:nth-child(2)  { animation-delay: 0.06s; }
.player-row:nth-child(3)  { animation-delay: 0.09s; }
.player-row:nth-child(4)  { animation-delay: 0.12s; }
.player-row:nth-child(5)  { animation-delay: 0.15s; }
.player-row:nth-child(6)  { animation-delay: 0.18s; }
.player-row:nth-child(7)  { animation-delay: 0.21s; }
.player-row:nth-child(8)  { animation-delay: 0.24s; }
.player-row:nth-child(9)  { animation-delay: 0.27s; }
.player-row:nth-child(10) { animation-delay: 0.30s; }
.player-row:nth-child(n+11) { animation-delay: 0.33s; }

/* Tier col stagger */
.tier-col {
    animation: fadeUp 0.35s ease both;
}
.tier-col:nth-child(1) { animation-delay: 0.04s; }
.tier-col:nth-child(2) { animation-delay: 0.08s; }
.tier-col:nth-child(3) { animation-delay: 0.12s; }
.tier-col:nth-child(4) { animation-delay: 0.16s; }
.tier-col:nth-child(5) { animation-delay: 0.20s; }

/* Tier rows in mode pages */
.tier-player-row {
    animation: fadeUp 0.3s ease both;
}

/* ===== HAMBURGER ===== */
.hamburger {
    transition: background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.hamburger:hover { transform: scale(1.08); }
.hamburger:active { transform: scale(0.95); }

/* ===== PAGE BTN ===== */
.page-btn {
    transition: background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.2s;
}
.page-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.page-btn:active { transform: translateY(0); }

/* ===== TOAST ===== */
.toast {
    transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    transform: translateX(-50%) translateY(10px);
}
.toast.show {
    transform: translateX(-50%) translateY(0);
}

/* ===== MOBILE MENU ===== */
.mobile-menu.open {
    animation: dropDown 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}
.mobile-item {
    transition: background 0.15s, padding-left 0.2s, color 0.15s;
}
.mobile-item:hover { padding-left: 22px !important; }

/* ===== RANK BADGES ===== */
.rank-badge {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
}
.rank-1 { box-shadow: 0 0 16px rgba(240,192,0,0.3); }
.rank-2 { box-shadow: 0 0 16px rgba(176,190,197,0.3); }
.rank-3 { box-shadow: 0 0 16px rgba(205,127,50,0.3); }

/* ===== Click rows ===== */
.player-row,
.tier-player-row {
    cursor: pointer !important;
    user-select: none;
}