/**
 * Custom Cursor - Liquid Glass Effect
 * ====================================
 * Glassmorphism-styled cursor that follows mouse with smooth lerp.
 * Used by: Landing Page, Tectonics, Footer
 * Note: Cursor element is positioned at body level (#global-custom-cursor)
 * to avoid stacking context issues when used across sections.
 */

/* Base cursor styling - positioned at body level to avoid stacking context issues */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: transform, opacity;
}

/* Visible state - controlled by JavaScript */
.custom-cursor.is-visible {
    opacity: 1;
}

/* Icon inside the cursor */
.custom-cursor__icon {
    width: 24px;
    height: 24px;
    color: var(--color-text, #1a1a1a);
    opacity: 0.8;
}

/* Hide default cursor when custom cursor is active on interactive elements */
.cursor-active,
.cursor-active * {
    cursor: none !important;
}

/* Landing page specific - hide cursor when hovering stack images */
/* Only hide after custom cursor is initialized (gridAnimationComplete event) */
body.custom-cursor-ready #landing-page .stack-container:hover,
body.custom-cursor-ready #landing-page .stack-container:hover .stack-image {
    cursor: none;
}