/* =========================================
   PREMIUM CURSOR - ORBE FLOTANTE
   ========================================= */

/* Hide default cursor on desktop */
@media (min-width: 1025px) {
    * {
        cursor: none !important;
    }
}

/* Cursor Container */
.cursor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

/* Core Dot - Small bright center */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100001;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(198, 10, 64, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Outer Ring - Follows with delay */
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -50%);
    opacity: 0;
    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.3s ease,
        background-color 0.3s ease,
        opacity 0.3s ease;
}

/* Trail particles container */
.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99998;
}

.trail-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

/* =========================================
   CURSOR STATES
   ========================================= */

/* Hover on links/buttons */
.cursor-ring.hover-link {
    width: 60px;
    height: 60px;
    border-color: var(--color-brand-blue);
    background: rgba(37, 68, 185, 0.1);
}

.cursor-dot.hover-link {
    background: var(--color-brand-blue);
    box-shadow:
        0 0 15px rgba(37, 68, 185, 0.8),
        0 0 30px rgba(37, 68, 185, 0.5);
}

/* Hover on media (images/videos) */
.cursor-ring.hover-media {
    width: 80px;
    height: 80px;
    border-color: var(--color-brand-red);
    background: rgba(198, 10, 64, 0.15);
}

.cursor-ring.hover-media::after {
    content: 'VER';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: white;
    text-transform: uppercase;
}

.cursor-dot.hover-media {
    opacity: 0;
}

/* Click state */
.cursor-ring.clicking {
    width: 30px;
    height: 30px;
    border-color: white;
    background: rgba(255, 255, 255, 0.2);
}

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

/* Hover on text inputs */
.cursor-ring.hover-text {
    width: 4px;
    height: 30px;
    border-radius: 2px;
    border-color: white;
    background: white;
    animation: cursorBlink 1s infinite;
}

.cursor-dot.hover-text {
    opacity: 0;
}

@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}

/* Hidden state for when off screen */
.cursor-dot.hidden,
.cursor-ring.hidden {
    opacity: 0 !important;
}

/* =========================================
   CLICK RIPPLE EFFECT
   ========================================= */
.click-ripple {
    position: fixed;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    transform: translate(-50%, -50%);
    animation: rippleExpand 0.6s ease-out forwards;
}

@keyframes rippleExpand {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }

    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* =========================================
   MOBILE: DISABLE CUSTOM CURSOR
   ========================================= */
@media (max-width: 1024px) {
    * {
        cursor: auto !important;
    }

    a,
    button,
    [onclick] {
        cursor: pointer !important;
    }

    .cursor-container,
    .cursor-dot,
    .cursor-ring,
    .cursor-trail {
        display: none !important;
    }
}