/*
|--------------------------------------------------------------------------
| Fundo animado — cidade à noite + estrada + trânsito
|--------------------------------------------------------------------------
| Usado nas páginas públicas (index.php, login.php, cadastro.php).
| Tudo em CSS/SVG puro, sem nenhuma imagem ou biblioteca externa.
| Vem sempre acompanhado de includes/fundo_transito.php (o HTML/SVG).
|--------------------------------------------------------------------------
*/

.cena-fundo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Skyline da cidade, ao fundo */
.skyline {
    position: absolute;
    left: 0;
    bottom: 26vh;
    width: 100%;
    height: 34vh;
    opacity: 0.9;
}

.janela {
    animation: piscarJanela 4s ease-in-out infinite;
}

@keyframes piscarJanela {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 0.85; }
}

/* Trilhas de luz — faróis (brancos) e lanternas (vermelhos)
   simulando carros passando, como em fotos de longa exposição
   de trânsito noturno. */
.trilha {
    position: absolute;
    left: -25%;
    width: 24%;
    height: 2px;
    border-radius: 999px;
    filter: blur(0.5px);
    animation: passarCarro linear infinite;
}

.trilha.branca {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
    box-shadow: 0 0 10px 1px rgba(255,255,255,0.55);
}

.trilha.vermelha {
    background: linear-gradient(90deg, transparent, rgba(239,68,68,0.95), transparent);
    box-shadow: 0 0 10px 1px rgba(239,68,68,0.55);
}

@keyframes passarCarro {
    from { transform: translateX(0); }
    to   { transform: translateX(560%); }
}

/* Estrada em perspectiva, na parte de baixo da tela */
.estrada {
    position: absolute;
    left: 50%;
    bottom: -12vh;
    width: 160vw;
    height: 46vh;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #11170f 0%, #171f19 65%, #101512 100%);
    clip-path: polygon(43% 0%, 57% 0%, 100% 100%, 0% 100%);
    border-top: 1px solid rgba(34, 197, 94, 0.18);
}

.faixa-central {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 5px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
        180deg,
        rgba(255,255,255,0.8) 0px,
        rgba(255,255,255,0.8) 22px,
        transparent 22px,
        transparent 46px
    );
    animation: moverFaixa 0.85s linear infinite;
}

@keyframes moverFaixa {
    from { background-position-y: 0; }
    to   { background-position-y: 46px; }
}

/* Brilho verde suave, como reflexo de painel/GPS */
.glow {
    position: absolute;
    width: 60vw;
    max-width: 520px;
    height: 60vw;
    max-height: 520px;
    top: -10%;
    right: -15%;
    background: radial-gradient(circle, rgba(34,197,94,0.18), transparent 70%);
}

/* Quem prefere menos movimento não precisa ver as animações */
@media (prefers-reduced-motion: reduce) {
    .trilha, .faixa-central, .janela {
        animation: none !important;
    }
}