/* Dotted Grid Background */
.dotted-grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.dotted-grid-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(0, 212, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 1;
    animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.15;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dotted-grid-background::before {
        background-size: 20px 20px;
        opacity: 0.3;
    }
}

/* Enhanced visibility in dark mode */
[data-theme="dark"] .dotted-grid-background::before {
    background-image: radial-gradient(circle, #00d4ff 2px, transparent 2px);
    opacity: 0.2;
}