/* =====================
   VARIÁVEIS E UTILITÁRIOS
   ===================== */
:root {
    --oia-dark:    #010c1e;
    --oia-soft:    #F3E5D6;
    --oia-white:   #ffffff;
    --oia-primary: #F3E5D6;
}

.bg-oia-dark  { background-color: var(--oia-dark)  !important; }
.bg-oia-soft  { background-color: var(--oia-soft)  !important; }
.text-oia-soft { color: var(--oia-soft)             !important; }
.text-oia-dark { color: var(--oia-dark)             !important; }

/* =====================
   BASE
   ===================== */
html, body {
    height: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--oia-dark);
    color: #fff;
    overflow-x: hidden;
}

/* =====================
   WELCOME HERO SECTION
   ===================== */
.welcome-hero {
    background-color: var(--oia-dark); /* Fallback */
}

/* Vídeo de fundo */
.welcome-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.welcome-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0.35; /* Opacidade do vídeo */
    transition: filter 0.5s ease-out; /* Transição para o filtro do glitch */
}

/* Overlay escuro sobre o vídeo */
.welcome-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(1, 12, 30, 0.40) 0%,
        rgba(1, 12, 30, 0.60) 100%
    );
    transition: background 0.5s ease-out; /* Transição para o escurecimento */
}

/* Novo overlay para o efeito de scanline */
.scanline-overlay {
    position: absolute;
    inset: 0;
    z-index: 15; /* Acima do vídeo e overlay, mas abaixo do conteúdo */
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0; /* Inicialmente invisível */
    pointer-events: none;
    transition: opacity 0.1s ease-out; /* Transição rápida para aparecer */
}

/* Conteúdo centralizado */
.welcome-content {
    position: relative;
    z-index: 10; /* Acima do vídeo e overlays */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Transição para o desaparecimento */
}

.logo-welcome {
    max-width: 200px;
    height: auto;
}

/* Botões */
.btn-oia-primary {
    background-color: var(--oia-soft);
    color: var(--oia-dark);
    border-radius: 999px;
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.3s ease-out; /* Adiciona box-shadow para transição */
    box-shadow: 0 4px 18px rgba(243, 229, 214, 0.25);
}

.btn-oia-primary:hover {
    background-color: #e6d1ba;
    color: var(--oia-dark);
    transform: translateY(-2px);
}

.btn-outline-light {
    border-radius: 999px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.3s ease-out; /* Adiciona box-shadow para transição */
}

.btn-outline-light:hover {
    transform: translateY(-2px);
}

/* Animações de clique */
.btn-city.clicked {
    animation: pulseGlow 0.8s forwards; /* Animação de brilho */
    transform: scale(1.05); /* Levemente maior */
}

.welcome-hero.redirecting .welcome-video-bg video {
    animation: videoGlitch 0.8s forwards; /* Glitch e aceleração */
}

.welcome-hero.redirecting .welcome-video-overlay {
    background: linear-gradient(
        to bottom,
        rgba(1, 12, 30, 0.80) 0%,
        rgba(1, 12, 30, 0.98) 100%
    ); /* Escurece mais o overlay */
}

.welcome-hero.redirecting .scanline-overlay {
    opacity: 1;
    animation: scanlineFade 0.8s forwards; /* Animação de scanline */
}

.welcome-hero.redirecting .welcome-content {
    opacity: 0;
    transform: translateY(-30px); /* Desliza para cima enquanto desaparece */
}

/* Keyframes das animações */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(243, 229, 214, 0.4); }
    50% { box-shadow: 0 0 20px 8px rgba(243, 229, 214, 0.8); }
    100% { box-shadow: 0 0 0 0 rgba(243, 229, 214, 0.4); } /* Volta ao normal */
}

@keyframes videoGlitch {
    0% { filter: hue-rotate(0deg) saturate(1) contrast(1); transform: scale(1); }
    25% { filter: hue-rotate(15deg) saturate(1.3) contrast(1.2); transform: scale(1.02); }
    50% { filter: hue-rotate(0deg) saturate(1) contrast(1); transform: scale(1.01); }
    75% { filter: hue-rotate(10deg) saturate(1.2) contrast(1.1); transform: scale(1.03); }
    100% { filter: hue-rotate(0deg) saturate(1) contrast(1); transform: scale(1.05); } /* Termina levemente ampliado */
}

@keyframes scanlineFade {
    0% { opacity: 0; transform: translateY(-100%); } /* Começa acima da tela */
    20% { opacity: 0.6; transform: translateY(0%); }
    80% { opacity: 0.6; transform: translateY(0%); }
    100% { opacity: 0; transform: translateY(100%); } /* Termina abaixo da tela */
}


/* Mobile adjustments */
@media (max-width: 767.98px) {
    .welcome-hero h1 {
        font-size: 2.5rem;
    }
    .welcome-hero .lead {
        font-size: 1rem;
    }
    .logo-welcome {
        max-width: 150px;
    }
}