/* Advanced 3D Animated Scrollbar */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, 
        #0a0a0a 0%, 
        #1a1a2e 30%, 
        #16213e 70%, 
        #0a0a0a 100%);
    border-radius: 12px;
    box-shadow: 
        inset 0 0 10px rgba(0, 255, 255, 0.3),
        0 0 20px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, 
        #00ffff 0%, 
        #ff00ff 25%, 
        #ffff00 50%, 
        #00ff00 75%, 
        #00ffff 100%);
    border-radius: 12px;
    border: 2px solid #000;
    box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(0, 255, 255, 0.8),
        0 0 25px rgba(255, 0, 255, 0.6);
    animation: scrollbarGlow 3s linear infinite;
    position: relative;
    overflow: hidden;
}

::-webkit-scrollbar-thumb::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 70%);
    animation: shine 2s linear infinite;
    transform: rotate(45deg);
}

::-webkit-scrollbar-thumb:hover {
    animation: scrollbarHover 0.5s forwards;
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.7),
        0 0 25px rgba(0, 255, 255, 1),
        0 0 35px rgba(255, 0, 255, 0.8),
        0 0 50px rgba(255, 255, 0, 0.6);
}

::-webkit-scrollbar-button {
    background: linear-gradient(180deg, #2a7de1, #1a5bb0);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-button:hover {
    background: linear-gradient(180deg, #34a853, #2e8b57);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300ffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300ffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Animations */
@keyframes scrollbarGlow {
    0%, 100% {
        filter: hue-rotate(0deg);
        box-shadow: 
            inset 0 0 10px rgba(255, 255, 255, 0.5),
            0 0 15px rgba(0, 255, 255, 0.8),
            0 0 25px rgba(255, 0, 255, 0.6);
    }
    50% {
        filter: hue-rotate(180deg);
        box-shadow: 
            inset 0 0 10px rgba(255, 255, 255, 0.5),
            0 0 20px rgba(255, 0, 255, 0.8),
            0 0 30px rgba(255, 255, 0, 0.6);
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

@keyframes scrollbarHover {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.1);
    }
}

/* Firefox Support */
* {
    scrollbar-width: thin;
    scrollbar-color: #00ffff #1a1a2e;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}