/* =========================================
   EFFECT: MOUSE SPOTLIGHT
   (Radial gradient tracking mouse)
   ========================================= */

/* 1. Hero Spotlight */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: radial-gradient(800px circle at var(--hero-mouse-x, 50%) var(--hero-mouse-y, 50%),
            var(--spotlight-color),
            transparent 40%);
    pointer-events: none;
}

/* 2. Skill Card Spotlight */
.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            var(--spotlight-color),
            transparent 40%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.skill-card:hover::before {
    opacity: 1;
}