/**
 * Mouse Glow Effect - Styles
 *
 * Desktop: Suit la souris
 * Mobile: Bouge avec le scroll
 * Réutilisable sur n'importe quelle page
 */

.mouse-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(237, 114, 38, 0.4) 0%,
        rgba(240, 128, 23, 0.2) 30%,
        transparent 70%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    will-change: transform;
}

/* Tablet and larger */
@media (min-width: 768px) {
    .mouse-glow {
        width: 600px;
        height: 600px;
        filter: blur(80px);
    }
}

/* Responsive - Larger glow on bigger screens */
@media (min-width: 1024px) {
    .mouse-glow {
        width: 800px;
        height: 800px;
        filter: blur(100px);
    }
}

/* Variants - Different colors and sizes */
.mouse-glow--large {
    width: 800px;
    height: 800px;
}

@media (min-width: 1024px) {
    .mouse-glow--large {
        width: 1000px;
        height: 1000px;
    }
}

.mouse-glow--small {
    width: 400px;
    height: 400px;
}

@media (min-width: 1024px) {
    .mouse-glow--small {
        width: 600px;
        height: 600px;
    }
}

/* Color variants */
.mouse-glow--orange {
    background: radial-gradient(
        circle,
        rgba(237, 114, 38, 0.4) 0%,
        rgba(240, 128, 23, 0.2) 30%,
        transparent 70%
    );
}

.mouse-glow--orange-2 {
    background: radial-gradient(
        circle,
        rgba(240, 128, 23, 0.5) 0%,
        rgba(237, 114, 38, 0.25) 30%,
        transparent 70%
    );
}

.mouse-glow--white {
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.15) 30%,
        transparent 70%
    );
}

.mouse-glow--white-2 {
    background: radial-gradient(
        circle,
        rgba(244, 242, 233, 0.4) 0%,
        rgba(244, 242, 233, 0.2) 30%,
        transparent 70%
    );
}

.mouse-glow--black {
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.25) 30%,
        transparent 70%
    );
}

.mouse-glow--grey {
    background: radial-gradient(
        circle,
        rgba(90, 90, 90, 0.4) 0%,
        rgba(90, 90, 90, 0.2) 30%,
        transparent 70%
    );
}