/* Grid highlight effects similar to Next.js */
.grid::before,
.grid::after {
    content: '';
    position: absolute;
    width: 35vw;
    height: 35vw;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(70px);
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    will-change: transform, opacity;
    transition: opacity 0.3s;
}

.grid::before {
    background: radial-gradient(circle at center, rgba(0, 124, 240, 0.8), transparent 40%);
    top: 15%;
    right: 15%;
    animation: float-1 15s ease-in-out infinite alternate;
}

.grid::after {
    background: radial-gradient(circle at center, rgba(0, 223, 216, 0.8), transparent 40%);
    bottom: 20%;
    left: 15%;
    animation: float-2 20s ease-in-out infinite alternate;
}

@keyframes float-1 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(4vw, -2vw);
    }
}

@keyframes float-2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-3vw, 5vw);
    }
}

@media (prefers-color-scheme: dark) {
    .grid::before,
    .grid::after {
        opacity: 0.15;
    }
}