/* =============================================================
   PREMIUM CINEMATIC CURSOR SYSTEM
   R. S. Sanchita Editorial Platform
   ============================================================= */

/* Hide native cursor on desktop only */
@media (pointer: fine) {
    html, body {
        cursor: none !important;
    }

    a, button, [role="button"], label, select,
    .btn, .nav-link, .work-item, .editorial-card,
    .featured-card, .cursor-pointer {
        cursor: none !important;
    }
}

/* -------------------------------------------------------
   Cursor DOM Elements
   ------------------------------------------------------- */

/* Precise dot — snaps instantly to mouse position */
#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background: #0ea5e9;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    transform: translate(-50%, -50%);
    transition:
        width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s ease,
        background 0.3s ease;
    mix-blend-mode: normal;
}

/* Trailing ring — follows with soft lag via JS lerp */
#cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(14, 165, 233, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    will-change: transform;
    transform: translate(-50%, -50%);
    transition:
        width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        opacity 0.35s ease,
        background 0.35s ease,
        box-shadow 0.4s ease;
    /* Subtle inner glow */
    box-shadow:
        0 0 0 0 transparent,
        inset 0 0 8px rgba(14, 165, 233, 0.05);
}

/* Glow halo behind ring — purely atmospheric */
#cursor-ring::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(14, 165, 233, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0;
}

/* Label for media hover state */
#cursor-ring::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', 'Ageo', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(14, 165, 233, 0.9);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* -------------------------------------------------------
   State: Entry / Exit
   ------------------------------------------------------- */

#cursor-dot.is-hidden,
#cursor-ring.is-hidden {
    opacity: 0;
}

/* -------------------------------------------------------
   State: Hovering Links / Nav
   ------------------------------------------------------- */

#cursor-dot.is-link {
    width: 4px;
    height: 4px;
    background: #38bdf8;
}

#cursor-ring.is-link {
    width: 44px;
    height: 44px;
    border-color: rgba(56, 189, 248, 0.65);
    box-shadow:
        0 0 16px rgba(14, 165, 233, 0.12),
        inset 0 0 12px rgba(14, 165, 233, 0.04);
}

#cursor-ring.is-link::before {
    opacity: 1;
}

/* -------------------------------------------------------
   State: Hovering Buttons / CTAs
   ------------------------------------------------------- */

#cursor-dot.is-button {
    width: 6px;
    height: 6px;
    background: #fff;
    opacity: 0.9;
}

#cursor-ring.is-button {
    width: 52px;
    height: 52px;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(14, 165, 233, 0.04);
    box-shadow:
        0 0 24px rgba(14, 165, 233, 0.18),
        inset 0 0 16px rgba(14, 165, 233, 0.06);
    animation: cursorPulse 2s ease-in-out infinite;
}

@keyframes cursorPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(14, 165, 233, 0.18), inset 0 0 16px rgba(14, 165, 233, 0.06); }
    50%       { box-shadow: 0 0 36px rgba(14, 165, 233, 0.28), inset 0 0 20px rgba(14, 165, 233, 0.09); }
}

/* -------------------------------------------------------
   State: Hovering Cards (Work / Insight)
   ------------------------------------------------------- */

#cursor-dot.is-card {
    width: 6px;
    height: 6px;
    background: #818cf8;
}

#cursor-ring.is-card {
    width: 48px;
    height: 48px;
    border-color: rgba(129, 140, 248, 0.45);
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.1);
}

/* -------------------------------------------------------
   State: Hovering Media (Images / Figures)
   ------------------------------------------------------- */

#cursor-dot.is-media {
    opacity: 0;
}

#cursor-ring.is-media {
    width: 64px;
    height: 64px;
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(14, 165, 233, 0.06);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 32px rgba(14, 165, 233, 0.12);
}

#cursor-ring.is-media::after {
    opacity: 1;
}

#cursor-ring.is-media::before {
    opacity: 1;
}

/* -------------------------------------------------------
   State: Hovering Headings / Editorial Text
   ------------------------------------------------------- */

#cursor-dot.is-text {
    width: 2px;
    height: 18px;
    border-radius: 2px;
    background: rgba(14, 165, 233, 0.7);
}

#cursor-ring.is-text {
    width: 24px;
    height: 24px;
    opacity: 0.4;
    border-color: rgba(14, 165, 233, 0.3);
}

/* -------------------------------------------------------
   State: Clicking / Active
   ------------------------------------------------------- */

#cursor-dot.is-clicking {
    transform: translate(-50%, -50%) scale(0.6);
}

#cursor-ring.is-clicking {
    transform: translate(-50%, -50%) scale(0.85);
    border-color: rgba(14, 165, 233, 0.8);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
}

/* -------------------------------------------------------
   Accessibility: Reduced Motion
   ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #cursor-dot,
    #cursor-ring,
    #cursor-ring::before,
    #cursor-ring::after {
        transition: none !important;
        animation: none !important;
    }
}

/* -------------------------------------------------------
   Mobile / Touch: Completely Disabled
   ------------------------------------------------------- */

@media (pointer: coarse) {
    #cursor-dot,
    #cursor-ring {
        display: none !important;
    }

    html, body,
    a, button, [role="button"] {
        cursor: auto !important;
    }
}