/* Retro Grid CSS */

/* The container for the grid - usually the footer itself or a wrapper */
.retro-grid-container {
    position: relative;
    overflow: hidden;
    background-color: #000;
    /* Fallback */
}

/* Ensure content sits on top */
.retro-grid-content {
    position: relative;
    z-index: 10;
}

/* The Grid Background */
.retro-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 200px;
    /* Gives the 3D tilt effect */
    z-index: 0;
    pointer-events: none;
    /* Optional: Fade to black at top to blend with content */
    mask-image: linear-gradient(to bottom, transparent 5%, black 40%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 40%);
}

.retro-grid-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 200%;
    /* Taller to allow scrolling */
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 40px 40px;
    /* Size of grid cells */
    transform-origin: top center;
    transform: rotateX(50deg);
    /* The "Retro" tilt */
    animation: retro-grid-scroll 15s linear infinite;
}

@keyframes retro-grid-scroll {
    0% {
        transform: rotateX(50deg) translateY(0);
    }

    100% {
        transform: rotateX(50deg) translateY(-50%);
    }
}

/* Optional: Adds a glow or color tint if requested (Synthwave style) */
.retro-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.3) 0%, transparent 60%);
    z-index: 1;
}