/**
 * Home-Screen: Retro-Grid-Hintergrund (reines CSS, keine Inline-Styles in JS)
 */

#hero-retro-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    perspective: 800px;
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
}

.screen-home-retro-grid-inner {
    position: absolute;
    inset: 0;
    transform: rotateX(60deg);
    transform-origin: 50% 100%;
}

.screen-home-retro-grid-pattern {
    position: absolute;
    inset: -50% 0 0 -50%;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(to right, var(--color-brand-red-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color-brand-red-grid-line) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: screen-home-grid-scroll 20s linear infinite;
}

@keyframes screen-home-grid-scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(50px);
    }
}