/* ================================================
   LOISTE STUDIO - PREMIUM CUSTOM CURSOR
   Intelligent Dual-Layer Interaction System
   ================================================ */

/* 1. Base Cursor Container (System Fallback) */
html {
    cursor: default;
    /* Ensure system cursor is visible by default */
}

/* Desktop-Only Cursor (Fine pointer devices) */
@media (pointer: fine) {

    /* Hide system cursor when custom cursor is active */
    html.custom-cursor-active {
        cursor: none;
    }

    html.custom-cursor-active a,
    html.custom-cursor-active button,
    html.custom-cursor-active .navigation__btn,
    html.custom-cursor-active .project-card {
        cursor: none;
    }

    /* Outer Fluid Follower */
    .cursor-follower {
        position: fixed;
        width: 38px;
        height: 38px;
        background-color: rgba(193, 182, 164, 0.15);
        /* Heritage Bronze tint */
        border: 1px solid rgba(193, 182, 164, 0.4);
        border-radius: 50%;
        pointer-events: none;
        z-index: 100000;
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
            background-color 0.4s ease,
            border-color 0.4s ease,
            width 0.4s ease,
            height 0.4s ease,
            opacity 0.4s ease;
        transform: translate(-50%, -50%);
        mix-blend-mode: multiply;
        /* Senior Designer Touch: Blends with artistic bg */
        display: none;
        /* Hidden until JS initializes */
    }

    /* Inner Precision Dot */
    .cursor-dot {
        position: fixed;
        width: 6px;
        height: 6px;
        background-color: var(--color-charcoal, #261f1e);
        border-radius: 50%;
        pointer-events: none;
        z-index: 100001;
        transform: translate(-50%, -50%);
        display: none;
        /* Hidden until JS initializes */
    }

    /* Hover States */
    .cursor-follower.is-hovering {
        width: 70px;
        height: 70px;
        background-color: rgba(193, 182, 164, 0.1);
        border-color: rgba(38, 31, 30, 0.2);
    }

    .cursor-follower.is-clicking {
        transform: translate(-50%, -50%) scale(0.85);
        background-color: rgba(193, 182, 164, 0.3);
    }

    /* Visibility States */
    html.custom-cursor-active .cursor-follower,
    html.custom-cursor-active .cursor-dot {
        display: block;
    }
}

/* Disable for Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .cursor-follower,
    .cursor-dot {
        display: none !important;
    }

    html {
        cursor: auto !important;
    }
}