/**
 * WILA Cursor FX
 * The dot + ring overlay the native system cursor instead of replacing it,
 * so visitors always keep their normal pointer as a fallback/reference and
 * the custom effect is purely additive.
 */

:root {
    --wila-cursor-color: #D4A843;
    --wila-cursor-dot-size: 8px;
    --wila-cursor-ring-size: 36px;
    --wila-cursor-ring-size-hover: 56px;
}

.wila-cursor-dot,
.wila-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s ease;
}

body.wila-cursor-active .wila-cursor-dot,
body.wila-cursor-active .wila-cursor-ring {
    opacity: 1;
}

.wila-cursor-dot {
    width: var(--wila-cursor-dot-size);
    height: var(--wila-cursor-dot-size);
    background: var(--wila-cursor-color);
    z-index: 9998;
    transition: opacity .2s ease, transform .15s ease;
    mix-blend-mode: difference;
    will-change: transform;
}

.wila-cursor-ring {
    width: var(--wila-cursor-ring-size);
    height: var(--wila-cursor-ring-size);
    border: 1.5px solid rgba(212, 168, 67, 0.5);
    z-index: 9997;
    transition: opacity .2s ease, width .3s ease, height .3s ease, border-color .3s ease;
    will-change: transform;
}

.wila-cursor-ring.is-hovering {
    width: var(--wila-cursor-ring-size-hover);
    height: var(--wila-cursor-ring-size-hover);
    border-color: var(--wila-cursor-color);
}

/* Respect users who've asked for reduced motion at the OS level */
@media (prefers-reduced-motion: reduce) {
    .wila-cursor-dot,
    .wila-cursor-ring {
        display: none !important;
    }
}