/**
 * Keystone Cursor Effects
 * Custom cursor styles and animations
 */

/* CSS Variables - Defaults */
:root {
    --cursor-primary-color: #6366f1;
    --cursor-secondary-color: #818cf8;
    --cursor-hover-color: var(--cursor-primary-color);
    --cursor-size: 40px;
    --cursor-dot-size: 8px;
    --cursor-border-width: 2px;
    --cursor-opacity: 0.8;
    --cursor-blend-mode: normal;
    --cursor-scale-hover: 1.5;
}

/* Default cursor is always visible - custom cursor is an enhancement */

/* Base cursor container */
.keystone-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: var(--cursor-blend-mode);
}

/* Outer cursor element */
.keystone-cursor__outer {
    position: absolute;
    width: var(--cursor-size);
    height: var(--cursor-size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, background-color 0.2s ease, border-color 0.2s ease;
    will-change: transform;
}

/* Inner cursor element (dot) */
.keystone-cursor__inner {
    position: absolute;
    width: var(--cursor-dot-size);
    height: var(--cursor-dot-size);
    background-color: var(--cursor-secondary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, opacity 0.15s ease-out;
    will-change: transform;
}

/* ==========================================================================
   Circle Follower Style
   ========================================================================== */

.keystone-cursor--circle-follower .keystone-cursor__outer {
    border: var(--cursor-border-width) solid var(--cursor-primary-color);
    background-color: transparent;
    opacity: var(--cursor-opacity);
}

.keystone-cursor--circle-follower.is-hovering .keystone-cursor__outer {
    transform: translate(-50%, -50%) scale(var(--cursor-scale-hover));
    border-color: var(--cursor-hover-color);
    background-color: color-mix(in srgb, var(--cursor-hover-color) 10%, transparent);
}

.keystone-cursor--circle-follower.is-clicking .keystone-cursor__outer {
    transform: translate(-50%, -50%) scale(0.9);
}

/* ==========================================================================
   Dot with Outline Style
   ========================================================================== */

.keystone-cursor--dot-outline .keystone-cursor__outer {
    border: var(--cursor-border-width) solid var(--cursor-primary-color);
    background-color: transparent;
    opacity: var(--cursor-opacity);
}

.keystone-cursor--dot-outline .keystone-cursor__inner {
    background-color: var(--cursor-secondary-color);
    opacity: 1;
}

.keystone-cursor--dot-outline.is-hovering .keystone-cursor__outer {
    transform: translate(-50%, -50%) scale(var(--cursor-scale-hover));
    border-color: var(--cursor-hover-color);
}

.keystone-cursor--dot-outline.is-hovering .keystone-cursor__inner {
    transform: translate(-50%, -50%) scale(1);
}

.keystone-cursor--dot-outline.is-clicking .keystone-cursor__outer {
    transform: translate(-50%, -50%) scale(0.8);
}

.keystone-cursor--dot-outline.is-clicking .keystone-cursor__inner {
    transform: translate(-50%, -50%) scale(1.5);
}

/* ==========================================================================
   Magnetic Cursor Style
   ========================================================================== */

.keystone-cursor--magnetic .keystone-cursor__outer {
    border: var(--cursor-border-width) solid var(--cursor-primary-color);
    background-color: transparent;
    opacity: var(--cursor-opacity);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.2s ease,
                background-color 0.2s ease;
}

.keystone-cursor--magnetic .keystone-cursor__inner {
    background-color: var(--cursor-secondary-color);
    opacity: 1;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.keystone-cursor--magnetic.is-hovering .keystone-cursor__outer {
    transform: translate(-50%, -50%) scale(var(--cursor-scale-hover));
    border-color: var(--cursor-hover-color);
    background-color: color-mix(in srgb, var(--cursor-hover-color) 10%, transparent);
}

.keystone-cursor--magnetic.is-hovering .keystone-cursor__inner {
    transform: translate(-50%, -50%) scale(0);
}

.keystone-cursor--magnetic.is-magnetic .keystone-cursor__outer {
    transform: translate(-50%, -50%) scale(1.8);
}

/* ==========================================================================
   State Classes
   ========================================================================== */

/* Hidden state */
.keystone-cursor.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Active/clicking state */
.keystone-cursor.is-clicking .keystone-cursor__outer {
    transition-duration: 0.05s;
}

/* Link hover state */
.keystone-cursor.is-link-hover .keystone-cursor__outer {
    border-color: var(--cursor-hover-color);
}

/* Text selection state */
.keystone-cursor.is-text .keystone-cursor__outer {
    width: 4px;
    height: calc(var(--cursor-size) * 0.6);
    border-radius: 2px;
    border: none;
    background-color: var(--cursor-primary-color);
    opacity: 0.6;
}

.keystone-cursor.is-text .keystone-cursor__inner {
    opacity: 0;
}

/* ==========================================================================
   Accessibility & Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .keystone-cursor,
    .keystone-cursor__outer,
    .keystone-cursor__inner {
        transition: none !important;
    }
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    .keystone-cursor {
        display: none !important;
    }
}

/* ==========================================================================
   Animation Keyframes
   ========================================================================== */

@keyframes cursor-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: var(--cursor-opacity);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: calc(var(--cursor-opacity) * 0.8);
    }
}

@keyframes cursor-dot-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* Pulse animation for idle state (optional, can be enabled via JS) */
.keystone-cursor.is-idle .keystone-cursor__outer {
    animation: cursor-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Fallback for browsers that don't support color-mix
   ========================================================================== */

@supports not (color: color-mix(in srgb, red, blue)) {
    .keystone-cursor--circle-follower.is-hovering .keystone-cursor__outer,
    .keystone-cursor--magnetic.is-hovering .keystone-cursor__outer {
        background-color: rgba(99, 102, 241, 0.1);
    }
}