/**
 * Custom Cursor Effects
 *
 * Styles for the custom cursor follower elements.
 * Desktop-only — hidden on touch devices via media query.
 */

/* ==========================================================================
   Body — hide native cursor when custom cursor is active
   ========================================================================== */

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [role="button"] {
    cursor: none !important;
}

/* ==========================================================================
   Cursor Container
   ========================================================================== */

.plexa-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    will-change: transform;
}

/* ==========================================================================
   Blend Circle — the default cursor effect
   ========================================================================== */

.plexa-cursor-circle {
    width: var(--cursor-size, 40px);
    height: var(--cursor-size, 40px);
    border-radius: 50%;
    background: var(--cursor-color, white);
    mix-blend-mode: var(--cursor-blend, difference);
    opacity: 0;
    transform: scale(1);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        width 0.3s ease,
        height 0.3s ease;
}

.plexa-cursor.is-visible .plexa-cursor-circle {
    opacity: 1;
}

.plexa-cursor.is-hovering .plexa-cursor-circle {
    transform: scale(var(--cursor-hover-scale, 3));
    opacity: 0.5;
}

/* ==========================================================================
   Dot Ring — dual-layer cursor (fast dot + slow ring)
   ========================================================================== */

.plexa-cursor-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cursor-color, white);
    mix-blend-mode: var(--cursor-blend, difference);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plexa-cursor-ring {
    width: var(--cursor-size, 40px);
    height: var(--cursor-size, 40px);
    border-radius: 50%;
    border: 1px solid var(--cursor-color, white);
    mix-blend-mode: var(--cursor-blend, difference);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        width 0.3s ease,
        height 0.3s ease;
}

.plexa-cursor.is-visible .plexa-cursor-dot,
.plexa-cursor.is-visible .plexa-cursor-ring {
    opacity: 1;
}

.plexa-cursor.is-hovering .plexa-cursor-ring {
    transform: translate(-50%, -50%) scale(var(--cursor-hover-scale, 2));
    opacity: 0.5;
}

.plexa-cursor.is-hovering .plexa-cursor-dot {
    opacity: 0;
}

/* ==========================================================================
   Cursor Hidden State — for interactive areas that hide the cursor
   ========================================================================== */

.plexa-cursor.is-hidden .plexa-cursor-circle,
.plexa-cursor.is-hidden .plexa-cursor-dot,
.plexa-cursor.is-hidden .plexa-cursor-ring {
    opacity: 0;
    transform: scale(0.1);
}

/* ==========================================================================
   Touch Device / Accessibility Suppression
   ========================================================================== */

@media not all and (hover: hover) and (pointer: fine) {
    .plexa-cursor {
        display: none !important;
    }
    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor [role="button"] {
        cursor: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plexa-cursor {
        display: none !important;
    }
    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor [role="button"] {
        cursor: auto !important;
    }
}

@media print {
    .plexa-cursor {
        display: none !important;
    }
}