/* =========================================================
   HALLEY — CURSOR PERSONALIZADO HERO + HEADER
   ========================================================= */


/* =========================================================
   1. OCULTAR CURSOR NATIVO
   Toda la landing
   ========================================================= */

@media (pointer: fine) {

    body,
    body * {
        cursor: none !important;
    }

}


/* =========================================================
   2. CURSOR PRINCIPAL
   ========================================================= */

.halley-hero-cursor {

    position: fixed;

    left: 0;
    top: 0;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #1C1F24;

    box-shadow:
        0 5px 16px rgba(28, 31, 36, 0.14),
        0 2px 5px rgba(28, 31, 36, 0.08);

    pointer-events: none;

    z-index: 999999;

    opacity: 0;

    transform:
        translate3d(-50%, -50%, 0);

    transition:
        width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.42s ease,
        box-shadow 0.42s ease,
        opacity 0.18s ease;

    will-change:
        transform,
        width,
        height,
        opacity;
}


/* =========================================================
   3. CURSOR VISIBLE
   ========================================================= */

.halley-hero-cursor.halley-cursor-visible {
    opacity: 1;
}

/* =========================================================
   3.1 CURSOR SOBRE FONDO OSCURO
   ========================================================= */

.halley-hero-cursor.halley-cursor-light:not(.halley-cursor-hover) {

    background:
        #FFFFFF;

    box-shadow:
        0 5px 16px rgba(255, 255, 255, 0.14),
        0 2px 5px rgba(255, 255, 255, 0.08);
}

/* =========================================================
   4. ESTADO HOVER
   ========================================================= */

.halley-hero-cursor.halley-cursor-hover {

    width: 70px;
    height: 70px;

    background:
        rgba(71, 157, 165, 0.72);

    box-shadow:
        0 10px 30px rgba(71, 157, 165, 0.16),
        0 4px 10px rgba(28, 31, 36, 0.08);
}


/* =========================================================
   4.1 HOVER SOBRE FONDO TURQUESA
   ========================================================= */

/*
   Cuando la esfera está en modo hover y el fondo
   de la sección es turquesa, reemplaza el turquesa
   del cursor por negro translúcido.
*/

.halley-hero-cursor.halley-cursor-hover.halley-cursor-accent-bg {

    background:
        rgba(28, 31, 36, 0.72);

    box-shadow:
        0 10px 30px rgba(28, 31, 36, 0.16),
        0 4px 10px rgba(28, 31, 36, 0.08);
}

/* =========================================================
   5. ESTELA CONTINUA
   Canvas que dibuja la trayectoria real del cursor
   ========================================================= */

.halley-hero-cursor-canvas {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    z-index: 999998;

    opacity: 0;

    transition:
        opacity 0.18s ease;
}


.halley-hero-cursor-canvas.halley-cursor-visible {
    opacity: 1;
}


/* =========================================================
   6. MOBILE / TOUCH
   ========================================================= */

@media (pointer: coarse) {

    .halley-hero-cursor,
    .halley-hero-cursor-canvas {
        display: none !important;
    }

}


/* =========================================================
   7. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .halley-hero-cursor-canvas {
        display: none !important;
    }

    .halley-hero-cursor {
        transition:
            width 0.2s ease,
            height 0.2s ease,
            background-color 0.2s ease,
            opacity 0.15s ease;
    }

}