/* Custom Rodless Pointer - Black with Red Outline */
html, body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M2 2L13 24L18.5 15.5L26 13L2 2Z" fill="black" stroke="red" stroke-width="2" stroke-linejoin="round"/></svg>'), auto;
}

/* Hover State - Links, Buttons, and Clickables (Inverts to Red with Black Outline) */
a, button, .clickable {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M2 2L13 24L18.5 15.5L26 13L2 2Z" fill="red" stroke="black" stroke-width="2" stroke-linejoin="round"/></svg>'), pointer;
}

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

/* Button Add-ons: Scale and Shine Effect */
button {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red glow */
}

button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
    transition: 0.5s;
    opacity: 0;
}

button:hover::after {
    left: 100%;
    opacity: 1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111111;
}

::-webkit-scrollbar-thumb {
    background: #ff0000;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cc0000;
}