/* ==========================================================
   CUSTOM CURSOR - Digital Motion Studio
   ==========================================================
   Mobile-First Responsive CSS
   Breakpoints: 769px (show cursor), 1025px (ensure visibility)
   ========================================================== */

/* ==========================================================
   SMALL PHONES (320-375px) - BASE STYLES
   Hidden on mobile devices
   ========================================================== */

/* Hide cursor on mobile - touch devices don't need custom cursor */
.cursor,
.cursor-follower {
    display: none;
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, left, top;
}

/* Main cursor dot */
.cursor {
    width: 0.625rem;
    height: 0.625rem;
    background: #fff;
    z-index: 9999;
    transition: transform 0.2s ease, opacity 0.3s ease;
    margin: -0.3125rem 0 0 -0.3125rem;
}

/* Follower ring */
.cursor-follower {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid #fff;
    z-index: 9998;
    transition: all 0.15s ease, opacity 0.3s ease;
    margin: -1.25rem 0 0 -1.25rem;
}

/* ==========================================================
   SMALL DESKTOP (769px) - Show cursor
   ========================================================== */
@media (min-width: 769px) {
    .cursor,
    .cursor-follower {
        display: block;
    }
}

/* ==========================================================
   DESKTOP (1025px) - Ensure visibility
   ========================================================== */
@media (min-width: 1025px) {
    .cursor,
    .cursor-follower {
        display: block;
        opacity: 1;
    }
}