/* ==========================================================================
   CUSTOM CURSOR — Tablet (441px – 1279px)
   Same rules as desktop, gated only on pointer:fine (not viewport width) —
   a narrower browser window with a real mouse still needs the native
   cursor hidden, or js/cursor.js's cursor and the OS cursor both show up
   at once. Real touch tablets never match (pointer: fine) so this never
   affects them.
   ========================================================================== */

@media (pointer: fine) {
    html,
    * {
        cursor: none !important;
    }

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 2.4rem;
        height: 2.4rem;
        z-index: 99999;
        pointer-events: none;
        transform: translate(-50%, -50%);
        will-change: transform;
    }

    .custom-cursor.is-hidden {
        opacity: 0;
    }

    .custom-cursor img {
        display: block;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.25));
    }
}