/**
 * Hero Spotlight Effect - CSS
 * Radial gradient that follows mouse cursor
 */

.hero-mouse-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
    transition: background 0.3s ease-out;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(168, 85, 247, 0.4) 0%,
        transparent 50%
    );
}

/* Slower, smoother transition variant */
.hero-mouse-spotlight.smooth {
    transition: background 1s ease-out;
}

/* Different color variants */
.hero-mouse-spotlight.pink {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(236, 72, 153, 0.4) 0%,
        transparent 50%
    );
}

.hero-mouse-spotlight.blue {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(59, 130, 246, 0.4) 0%,
        transparent 50%
    );
}

/* Larger spotlight */
.hero-mouse-spotlight.large {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(168, 85, 247, 0.35) 0%,
        transparent 60%
    );
}