/* Custom Dedicated Cursor for ALL Web Users */
*, html, body, a, button, input, select, textarea, [role="button"] {
    cursor: url("../assets/cursor_default.cur") 0 0, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M3 3 L12 24 L16 16 L24 12 Z' fill='%23d6ac68' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/><circle cx='16' cy='16' r='2' fill='%23ffffff'/></svg>") 3 3, auto !important;
}

/* Restore standard inputs and textareas cursor */
input[type="text"], input[type="search"], input[type="email"], input[type="password"], textarea {
    cursor: text !important;
}

select {
    cursor: pointer !important;
}

/* Pointer Cursor for Clickable Interactive Elements */
a:hover, button:hover, .filter-chip:hover, .server-ip-box:hover, .changelog-card:hover {
    cursor: url("../assets/cursor_pointer.cur") 0 0, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M3 3 L12 24 L16 16 L24 12 Z' fill='%23e2be7a' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/><circle cx='16' cy='16' r='3' fill='%23ffffff'/></svg>") 3 3, pointer !important;
}

/* Canvas backdrop */
#ambient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}


.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    background-color: var(--primary);
    box-shadow: 0 0 12px var(--primary);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.1s ease-out;
    will-change: transform;
}

@media (pointer: fine) {
    .cursor-dot {
        opacity: 0.8;
    }
}

/* Mouse Hover Card Spotlight Effect */
.changelog-card {
    position: relative;
    overflow: hidden;
}

.changelog-card::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 0px);
    left: var(--mouse-x, 0px);
    width: 500px;
    height: 500px;
    margin-left: -250px;
    margin-top: -250px;
    background: radial-gradient(
        circle,
        var(--spotlight-color) 0%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.changelog-card:hover::before {
    opacity: 1;
}

/* Smooth Interactive Glow Border */
.changelog-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: radial-gradient(
        400px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
        var(--border-glow),
        transparent 40%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.changelog-card:hover::after {
    opacity: 1;
}