/* =====================================================
   WEB-CURSOR.CSS
   Componente reutilizable del cursor-globo ELANGIT.

   Para usarlo en cualquier página:
   1. Cargar este CSS.
   2. Añadir el bloque HTML .web-cursor.
   3. Cargar web-cursor.js.
===================================================== */

:root {
    --web-cursor-size: 42px;
}

@media (pointer: fine) {
    body.web-cursor-enabled,
    body.web-cursor-enabled a,
    body.web-cursor-enabled button,
    body.web-cursor-enabled [role="button"] {
        cursor: none !important;
    }
}

.web-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;

    width: var(--web-cursor-size);
    height: var(--web-cursor-size);

    pointer-events: none;
    opacity: 0;

    transform: translate3d(-100px, -100px, 0);
    transition:
        opacity 0.18s ease,
        width 0.18s ease,
        height 0.18s ease;

    will-change: transform;
}

.web-cursor.is-visible {
    opacity: 1;
}

.web-cursor.is-active {
    width: 54px;
    height: 54px;
}

.web-cursor.is-touch-mode {
    opacity: 0.92;
}

.web-cursor__sphere,
.web-cursor__orbit,
.web-cursor__core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.web-cursor__sphere {
    border: 1px solid rgba(0, 174, 255, 0.94);

    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.36), transparent 12%),
        radial-gradient(circle at 50% 50%, rgba(0, 174, 255, 0.15), rgba(112, 85, 255, 0.07) 52%, transparent 72%);

    box-shadow:
        0 0 10px rgba(0, 174, 255, 0.90),
        0 0 24px rgba(0, 174, 255, 0.42),
        inset 0 0 12px rgba(112, 85, 255, 0.28);

    animation: webCursorPulse 2.4s ease-in-out infinite;
}

.web-cursor__sphere::before,
.web-cursor__sphere::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(135, 210, 255, 0.56);
    border-radius: 50%;
}

.web-cursor__sphere::before {
    left: 8px;
    right: 8px;
    top: 1px;
    bottom: 1px;
}

.web-cursor__sphere::after {
    left: 1px;
    right: 1px;
    top: 13px;
    bottom: 13px;
}

.web-cursor__orbit--one {
    border-top: 1px solid rgba(112, 85, 255, 0.90);
    border-bottom: 1px solid rgba(0, 174, 255, 0.46);
    animation: webCursorOrbitOne 3s linear infinite;
}

.web-cursor__orbit--two {
    inset: 5px;
    border-left: 1px solid rgba(0, 174, 255, 0.78);
    border-right: 1px solid rgba(112, 85, 255, 0.60);
    animation: webCursorOrbitTwo 2.4s linear infinite reverse;
}

.web-cursor__core {
    inset: 17px;
    background: #ffffff;

    box-shadow:
        0 0 7px #ffffff,
        0 0 14px rgba(0, 174, 255, 0.95),
        0 0 22px rgba(112, 85, 255, 0.56);
}

@keyframes webCursorPulse {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.88;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes webCursorOrbitOne {
    from {
        transform: rotate(35deg);
    }

    to {
        transform: rotate(395deg);
    }
}

@keyframes webCursorOrbitTwo {
    from {
        transform: rotate(-24deg);
    }

    to {
        transform: rotate(336deg);
    }
}

/* En móvil se mantiene visible como elemento luminoso flotante */
@media (pointer: coarse), (max-width: 820px) {
    .web-cursor {
        width: 38px;
        height: 38px;
        opacity: 0.90;
    }

    .web-cursor__core {
        inset: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .web-cursor__sphere,
    .web-cursor__orbit {
        animation: none !important;
    }
}