/* Custom SVG Icon Animations for MineAres - Modern Liquid Glass Edition */

/* 1. Global smooth spring transition for all icons */
.nav-icon svg,
.dropdown-icon svg,
.snow-icon-img,
.stat-icon svg,
.btn-icon svg,
.action-icon svg,
.support-info-icon svg,
.meta-icon svg,
.empty-icon svg,
.ban-banner-icon svg {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible !important;
    /* Prevents square drop-shadow clipping */
}

/* 2. Specific Nav Icon Animations on Hover */

/* Dashboard (Home) - Scale and Bounce with Glow */
@keyframes bounceIcon {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.15);
        filter: drop-shadow(0 4px 6px rgba(255, 123, 0, 0.4));
    }
}

a.nav-item[href="/dashboard"]:hover .nav-icon svg {
    animation: bounceIcon 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Notifications (Bell) - Premium Ringing */
@keyframes ringBell {

    0%,
    100% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(20deg) scale(1.1);
        filter: drop-shadow(0 4px 6px rgba(255, 123, 0, 0.4));
    }

    30% {
        transform: rotate(-15deg) scale(1.1);
    }

    45% {
        transform: rotate(10deg) scale(1.1);
    }

    60% {
        transform: rotate(-5deg) scale(1.1);
    }

    75% {
        transform: rotate(2deg) scale(1.1);
    }
}

a.nav-item[href="/notifications"]:hover .nav-icon svg {
    animation: ringBell 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top center;
}

/* Create Ticket (Plus) - Rotate and Spring Scale */
@keyframes spinPlus {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
        filter: drop-shadow(0 0 8px rgba(255, 123, 0, 0.6));
    }

    100% {
        transform: rotate(90deg) scale(1.15);
    }
}

a.nav-item[href="/tickets/new"]:hover .nav-icon svg {
    animation: spinPlus 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}

/* My Tickets & Admin Tickets - Staggered slide with scale */
@keyframes slideList {

    0%,
    100% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(4px) scale(1.1);
        filter: drop-shadow(0 2px 4px rgba(255, 123, 0, 0.3));
    }
}

a.nav-item[href="/tickets"]:hover .nav-icon svg,
a.nav-item[href="/admin/tickets"]:hover .nav-icon svg,
a.nav-item[href="/admin/audit-logs"]:hover .nav-icon svg {
    animation: slideList 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Admin Panel (Dashboard Layer) - Layers floating up */
@keyframes layersUp {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.1);
        filter: drop-shadow(0 4px 8px rgba(255, 123, 0, 0.4));
    }
}

a.nav-item[href="/admin"]:hover .nav-icon svg {
    animation: layersUp 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Admin Users (Users) - Smooth Pop */
@keyframes popUser {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2) translateY(-3px);
        filter: drop-shadow(0 4px 8px rgba(255, 123, 0, 0.4));
    }
}

a.nav-item[href="/admin/users"]:hover .nav-icon svg,
a.nav-item[href="/admin/staff"]:hover .nav-icon svg {
    animation: popUser 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Settings (Gear) - Smooth Spin */
@keyframes spinGear {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(90deg) scale(1.1);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    }

    100% {
        transform: rotate(180deg) scale(1.1);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    }
}

a.nav-item[href="/settings"]:hover .nav-icon svg,
.dropdown-item[href="/settings"]:hover .dropdown-icon svg {
    animation: spinGear 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Logout (Arrow out) - Slide out */
@keyframes slideOutArrow {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

button.logout-btn:hover .nav-icon svg,
button.dropdown-logout:hover .dropdown-icon svg {
    animation: slideOutArrow 0.8s ease-in-out infinite;
}

/* 3. Header specific components */

/* Snow Toggle - Spin flake */
@keyframes spinFlake {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

#snowToggle:hover .snow-icon-img {
    animation: spinFlake 2.5s linear infinite;
}

/* Language Toggle - Flag pulse */
@keyframes flagPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

#langToggle:hover .flag-icon {
    animation: flagPulse 0.5s ease-in-out;
}

/* User Menu Arrow - Flip down */
.user-menu:hover .dropdown-arrow {
    transform: rotate(180deg);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dropdown-arrow {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 4. Stroke width expansion for premium feel */
a.nav-item:hover .nav-icon svg path,
a.nav-item:hover .nav-icon svg line,
a.nav-item:hover .nav-icon svg polyline,
a.nav-item:hover .nav-icon svg circle,
.stat-card:hover .stat-icon svg path,
.stat-card:hover .stat-icon svg line,
.stat-card:hover .stat-icon svg polyline,
.button:hover svg path,
.btn:hover svg path,
.action-card:hover .action-icon svg *,
.support-info-card:hover .support-info-icon svg *,
.ticket-card:hover .meta-icon svg * {
    stroke-width: 2.5;
    transition: stroke-width 0.2s ease;
}

/* Apply drop-shadow to the SVG container to prevent square bounding box artifacts */
a.nav-item:hover .nav-icon svg,
.stat-card:hover .stat-icon svg,
.button:hover svg,
.btn:hover svg,
.action-card:hover .action-icon svg,
.support-info-card:hover .support-info-icon svg,
.ticket-card:hover .meta-icon svg {
    filter: drop-shadow(0 0 6px rgba(255, 128, 0, 0.6));
    transition: filter 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-icon svg *,
.stat-icon svg *,
.btn-icon svg *,
.action-icon svg *,
.support-info-icon svg *,
.meta-icon svg * {
    transition: stroke-width 0.2s ease, stroke 0.2s ease;
}

/* 5. Dashboard Specific Elements */
.action-card:hover .action-icon svg {
    transform: scale(1.1) translateY(-2px);
    color: var(--primary-color, #FF7B00);
    filter: drop-shadow(0 0 10px rgba(255, 123, 0, 0.5));
}

.support-info-card:hover .support-info-icon {
    transform: scale(1.05);
}

.support-info-card:hover .support-info-icon svg {
    animation: bounceIcon 0.6s ease-in-out;
}

.discord-card:hover .discord-icon img {
    animation: bounceIcon 0.6s ease-in-out;
}

/* Meta icons in tickets */
.ticket-card:hover .meta-icon svg {
    transform: scale(1.2);
    color: var(--primary-color, #FF9600);
}

/* Empty State */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px)
    }

    50% {
        transform: translateY(-8px)
    }
}

.empty-state .empty-icon svg {
    animation: float 3s ease-in-out infinite;
    color: rgba(255, 150, 0, 0.5);
}

/* Pulse animation for active or important items */
@keyframes pulseGlow {
    0% {
        filter: drop-shadow(0 0 0 rgba(255, 150, 0, 0));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(255, 150, 0, 0.6));
    }

    100% {
        filter: drop-shadow(0 0 0 rgba(255, 150, 0, 0));
    }
}

a.nav-item.active .nav-icon svg {
    animation: pulseGlow 2s infinite;
}

/* 6. General Buttons Hover */
a.btn:hover svg,
button.btn:hover svg,
a.button:hover svg,
button.button:hover svg {
    transform: scale(1.1);
}