/* ═══════════════════════════════════════════
   CURSOR
═══════════════════════════════════════════ */
@media(hover:hover) {
    * {
        cursor: none
    }

    .cur {
        width: 8px;
        height: 8px;
        background: var(--accent);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 200ms ease, height 200ms ease, opacity 200ms ease
    }

    .cur-ring {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(200, 169, 110, .45);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: left 0ms, top 0ms, width 300ms ease, height 300ms ease
    }

    .cur.big {
        width: 4px;
        height: 4px
    }

    .cur-ring.big {
        width: 50px;
        height: 50px;
        border-color: rgba(200, 169, 110, .2)
    }
}