/* ===========================================
   INFINITE GRID - Hero Background Effect
   Vanilla CSS adaptation of The Infinite Grid
   =========================================== */

.hero-grid-base,
.hero-grid-reveal {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-grid-base {
    opacity: 0.05;
}

.hero-grid-reveal {
    opacity: 0.35;
    -webkit-mask-image: radial-gradient(300px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), black, transparent);
    mask-image: radial-gradient(300px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), black, transparent);
}

.hero-grid-base svg,
.hero-grid-reveal svg {
    width: 100%;
    height: 100%;
}

.hero-grid-base pattern,
.hero-grid-reveal pattern {
    color: rgba(255, 255, 255, 0.8);
}

/* Reduced motion: disable grid drift */
@media (prefers-reduced-motion: reduce) {
    .hero-grid-base,
    .hero-grid-reveal {
        display: none;
    }
}