/* =========================================
   ESTILOS EXCLUSIVOS DA PÁGINA HOME (PARALLAX)
   ========================================= */

/* Hero Section que serve como container do Parallax */
.parallax-hero-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-premium);
    z-index: 1; /* Fica abaixo do content-parallax que desliza por cima */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG responsivo ocupando toda a tela */
.parallax-svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    will-change: transform;
}

/* Otimização de renderização das camadas do SVG */
#sun, 
#clouds,
#bats,
#hills1,
#hills2,
#hills3,
#stars,
#fstar,
#dinoL,
#dinoR {
    will-change: transform, opacity;
}

/* =========================================
   OVERRIDE DE CORES DO SVG (ADIGITALARTES DESIGN SYSTEM)
   ========================================= */

/* 1. Ocultar o texto e seta originais do SVG (serão substituídos por HTML real acessível) */
#info {
    display: none !important;
}

/* 2. Céu do Pôr-do-Sol Vermelho F1 de Alta Performance */
#bg_grad stop {
    transition: stop-color 0.8s ease;
}
#bg_grad stop:nth-child(1) { stop-color: #B80F16 !important; }
#bg_grad stop:nth-child(2) { stop-color: #9c0c12 !important; }
#bg_grad stop:nth-child(3) { stop-color: #7A0A0F !important; }
#bg_grad stop:nth-child(4) { stop-color: #4f0609 !important; }
#bg_grad stop:nth-child(5) { stop-color: #290305 !important; }
#bg_grad stop:nth-child(6) { stop-color: var(--bg-premium) !important; }

/* 3. Colinas da Cena 1 - Tons de Grafite, Carbono e Vermelho de Destaque */
#grad1 stop:nth-child(1) { stop-color: #25262c !important; }
#grad1 stop:nth-child(2) { stop-color: #17181c !important; }

#grad2 stop:nth-child(1) { stop-color: #1e1f24 !important; }
#grad2 stop:nth-child(2) { stop-color: #121316 !important; }

#grad3 stop:nth-child(1) { stop-color: var(--accent-red) !important; } /* Colina de destaque em Vermelho! */
#grad3 stop:nth-child(2) { stop-color: var(--accent-dark) !important; }

#grad4 stop:nth-child(1) { stop-color: #1b1c20 !important; }
#grad4 stop:nth-child(2) { stop-color: #0d0e10 !important; }

#grad5 stop:nth-child(1) { stop-color: #141518 !important; }
#grad5 stop:nth-child(2) { stop-color: #08090a !important; }

#grad6 stop:nth-child(1) { stop-color: #111214 !important; }
#grad6 stop:nth-child(2) { stop-color: #050607 !important; }

#grad7 stop:nth-child(1) { stop-color: #0b0c0d !important; }
#grad7 stop:nth-child(2) { stop-color: #020202 !important; }

#grad8 stop:nth-child(1) { stop-color: #060607 !important; }
#grad8 stop:nth-child(2) { stop-color: #000000 !important; }

#grad9 stop:nth-child(1) { stop-color: #030304 !important; }
#grad9 stop:nth-child(2) { stop-color: #000000 !important; }

/* 4. Colinas da Cena 2 - Transição de Dusk/Crepúsculo Avermelhado */
#lg4 stop:nth-child(1) { stop-color: #5c080b !important; }
#lg4 stop:nth-child(2) { stop-color: #17181c !important; }

#lg5 stop:nth-child(1) { stop-color: #4a0609 !important; }
#lg5 stop:nth-child(2) { stop-color: #121316 !important; }

#lg6 stop:nth-child(1) { stop-color: #3b0507 !important; }
#lg6 stop:nth-child(2) { stop-color: #0d0e10 !important; }

#lg7 stop:nth-child(1) { stop-color: #290305 !important; }
#lg7 stop:nth-child(2) { stop-color: #08090a !important; }

#lg8 stop:nth-child(1) { stop-color: #1a0203 !important; }
#lg8 stop:nth-child(2) { stop-color: #050607 !important; }

/* Morcegos pintados de cinza escuro para melhor contraste aerodinâmico */
#bats path {
    fill: #121316 !important;
}

/* 5. Cena 3 - Espaço Sideral / Noite Premium */
#bg2-grad stop:nth-child(1) { stop-color: #1a0203 !important; } /* Glow vermelho F1 no horizonte */
#bg2-grad stop:nth-child(2) { stop-color: #0d0c12 !important; }
#bg2-grad stop:nth-child(3) { stop-color: #08080c !important; }
#bg2-grad stop:nth-child(4) { stop-color: #060608 !important; }
#bg2-grad stop:nth-child(5) { stop-color: #040405 !important; }
#bg2-grad stop:nth-child(6) { stop-color: #020203 !important; }
#bg2-grad stop:nth-child(7) { stop-color: #000000 !important; }

#linear-gradient stop:nth-child(1) { stop-color: var(--accent-red) !important; } /* Silhuetas com borda de neon vermelho */
#linear-gradient stop:nth-child(2) { stop-color: var(--bg-premium) !important; }

#linear-gradient-2 stop:nth-child(1) { stop-color: var(--accent-red) !important; }
#linear-gradient-2 stop:nth-child(2) { stop-color: var(--bg-premium) !important; }

#linear-gradient-3 stop:nth-child(1) { stop-color: var(--accent-red) !important; }
#linear-gradient-3 stop:nth-child(2) { stop-color: var(--bg-premium) !important; }

#linear-gradient-4 stop:nth-child(1) { stop-color: var(--accent-red) !important; }
#linear-gradient-4 stop:nth-child(2) { stop-color: var(--bg-premium) !important; }

#stars path, #stars circle {
    fill: var(--text-main) !important;
}

#fstar-grad stop:nth-child(1) { stop-color: var(--accent-red) !important; } /* Estrela cadente vermelha */
#fstar-grad stop:nth-child(2) { stop-color: rgba(184, 15, 22, 0) !important; }

#dinoL, #dinoR {
    fill: var(--text-muted) !important;
    opacity: 0.15 !important;
}

/* Seta e texto originais da cena 3 recoloridos */
#arrow2 {
    fill: var(--accent-red) !important;
}
#text2 {
    fill: var(--text-main) !important;
}

/* Pássaro da cena 1 */
#bird {
    fill: #121316 !important;
}

/* Nuvens brancas suaves com leve opacidade */
#clouds path {
    fill: #ffffff !important;
    opacity: 0.85 !important;
}

/* =========================================
   ESTILO DO TÍTULO FLUTUANTE PREMIUM (HTML OVERLAY)
   ========================================= */
.hero-content-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 1000px;
    z-index: 5;
    pointer-events: none; /* Deixa cliques passarem para elementos abaixo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#main-title {
    font-family: var(--font-title);
    font-size: 6.5vw;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-main);
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    line-height: 0.9;
    background: linear-gradient(135deg, var(--text-main) 30%, var(--text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.7));
    will-change: transform, opacity;
}

#main-subtitle {
    font-family: var(--font-body);
    font-size: 1vw;
    font-weight: 600;
    letter-spacing: 0.4em;
    color: var(--accent-red);
    text-transform: uppercase;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    margin-left: 0.4em; /* Compensa o letter-spacing no alinhamento central */
    will-change: transform, opacity;
}

/* Setinha pulsante indicando scroll */
.scroll-down-arrow {
    position: absolute;
    bottom: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
    animation: scrollBounce 2.4s cubic-bezier(0.85, 0, 0.15, 1) infinite;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.scroll-down-arrow:hover {
    opacity: 1;
}

.scroll-down-arrow svg path {
    fill: var(--text-main) !important;
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-12px);
    }
    60% {
        transform: translateX(-50%) translateY(-6px);
    }
}

/* =========================================
   BLOCO DE CONTEÚDO PRINCIPAL (SLIDES OVER THE SVG - TOTALMENTE TRANSPARENTE)
   ========================================= */
.content-parallax {
    position: relative;
    z-index: 2; /* Fica em primeiro plano */
    margin-top: 100vh; /* Desloca o conteúdo exatamente abaixo do viewport */
    background-color: transparent !important;
    box-shadow: none !important;
    border-top: none !important;
    padding-bottom: 0;
}

/* Gradiente de transição: SVG Hero → Conteúdo (elimina o corte seco) */
.content-parallax::before {
    content: '';
    display: block;
    width: 100%;
    height: 200px; /* Zona de fusão generosa */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(11, 11, 13, 0.15) 20%,
        rgba(11, 11, 13, 0.4) 40%,
        rgba(11, 11, 13, 0.7) 65%,
        rgba(23, 24, 28, 0.9) 85%,
        var(--bg-graphite) 100%
    );
    pointer-events: none;
    margin-top: -200px; /* Sobrepõe o final do SVG para blend suave */
    position: relative;
    z-index: 3;
}

/* Rodapé transparente fluindo naturalmente no scroll da Home */
.parallax-footer {
    position: relative !important;
    bottom: auto !important;
    z-index: 2 !important;
    min-height: auto !important;
    background-color: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 4rem !important;
}

.parallax-footer::before {
    display: none !important;
}

/* =========================================
   AJUSTES RESPONSIVOS (MOBILE & TABLET)
   ========================================= */
@media (max-width: 1024px) {
    #main-title {
        font-size: 8.5vw;
        margin-bottom: 1rem;
    }
    
    #main-subtitle {
        font-size: 1.6vw;
        letter-spacing: 0.3em;
    }
}

@media (max-width: 768px) {
    #main-title {
        font-size: 10vw;
        margin-bottom: 0.8rem;
    }
    
    #main-subtitle {
        font-size: 2.2vw;
        letter-spacing: 0.2em;
    }
    
    .scroll-down-arrow {
        bottom: 2.5rem;
    }
}

/* =========================================
   ESTILO MINIMALISTA PREMIUM PARA LISTA DE PROJETOS (SEM IMAGENS)
   ========================================= */
.projects {
    padding: 10rem 5% 6rem 5%;
}

.project-block {
    margin-bottom: 4rem !important; /* Spacing ideal para listas tipográficas */
    border-bottom: 1px solid rgba(167, 169, 172, 0.1);
    padding-bottom: 2.5rem;
    transition: border-color 0.4s ease, transform 0.4s ease;
}

.project-block:hover {
    border-bottom-color: rgba(184, 15, 22, 0.5) !important; /* Highlight F1 Vermelho sutil */
    transform: translateX(10px); /* Micro-animação premium de deslocamento horizontal */
}

.project-header {
    margin-bottom: 0 !important; /* Alinha o cabeçalho e metadados na mesma linha */
}

/* Garante contraste impecável dos metadados */
.project-meta {
    opacity: 0.85;
    transition: opacity 0.4s ease;
}

.project-block:hover .project-meta {
    opacity: 1;
}

/* =========================================
   PERFORMANCE DE ANIMAÇÃO DE REVEAL
   ========================================= */
/* Desativa as transições CSS padrão em elementos de revelação para evitar conflitos de rendering com o GSAP ScrollTrigger */
.reveal {
    transition: none !important;
}

/* =========================================
   TEMA LIGHT — OVERRIDES DO SVG PARALLAX
   ========================================= */

/* Céu claro — gradiente dourado/azul suave */
[data-theme="light"] #bg_grad stop:nth-child(1) { stop-color: #E8833A !important; }
[data-theme="light"] #bg_grad stop:nth-child(2) { stop-color: #D4704E !important; }
[data-theme="light"] #bg_grad stop:nth-child(3) { stop-color: #C85C4A !important; }
[data-theme="light"] #bg_grad stop:nth-child(4) { stop-color: #D09070 !important; }
[data-theme="light"] #bg_grad stop:nth-child(5) { stop-color: #D8A888 !important; }
[data-theme="light"] #bg_grad stop:nth-child(6) { stop-color: #F5F5F3 !important; }

/* Colinas em tons claros, neutros e elegantes */
[data-theme="light"] #grad1 stop:nth-child(1) { stop-color: #C8C4BE !important; }
[data-theme="light"] #grad1 stop:nth-child(2) { stop-color: #B8B4AE !important; }

[data-theme="light"] #grad2 stop:nth-child(1) { stop-color: #BFBBB5 !important; }
[data-theme="light"] #grad2 stop:nth-child(2) { stop-color: #AFABA5 !important; }

[data-theme="light"] #grad3 stop:nth-child(1) { stop-color: var(--accent-red) !important; }
[data-theme="light"] #grad3 stop:nth-child(2) { stop-color: var(--accent-dark) !important; }

[data-theme="light"] #grad4 stop:nth-child(1) { stop-color: #A8A49E !important; }
[data-theme="light"] #grad4 stop:nth-child(2) { stop-color: #989490 !important; }

[data-theme="light"] #grad5 stop:nth-child(1) { stop-color: #908C88 !important; }
[data-theme="light"] #grad5 stop:nth-child(2) { stop-color: #807C78 !important; }

[data-theme="light"] #grad6 stop:nth-child(1) { stop-color: #787470 !important; }
[data-theme="light"] #grad6 stop:nth-child(2) { stop-color: #686460 !important; }

[data-theme="light"] #grad7 stop:nth-child(1) { stop-color: #585450 !important; }
[data-theme="light"] #grad7 stop:nth-child(2) { stop-color: #484440 !important; }

[data-theme="light"] #grad8 stop:nth-child(1) { stop-color: #383430 !important; }
[data-theme="light"] #grad8 stop:nth-child(2) { stop-color: #282420 !important; }

[data-theme="light"] #grad9 stop:nth-child(1) { stop-color: #282420 !important; }
[data-theme="light"] #grad9 stop:nth-child(2) { stop-color: #1A1A18 !important; }

/* Colinas cena 2 light */
[data-theme="light"] #lg4 stop:nth-child(1) { stop-color: #A05050 !important; }
[data-theme="light"] #lg4 stop:nth-child(2) { stop-color: #C8C4BE !important; }

[data-theme="light"] #lg5 stop:nth-child(1) { stop-color: #905040 !important; }
[data-theme="light"] #lg5 stop:nth-child(2) { stop-color: #B8B4AE !important; }

[data-theme="light"] #lg6 stop:nth-child(1) { stop-color: #804030 !important; }
[data-theme="light"] #lg6 stop:nth-child(2) { stop-color: #A8A49E !important; }

[data-theme="light"] #lg7 stop:nth-child(1) { stop-color: #703020 !important; }
[data-theme="light"] #lg7 stop:nth-child(2) { stop-color: #989490 !important; }

[data-theme="light"] #lg8 stop:nth-child(1) { stop-color: #602010 !important; }
[data-theme="light"] #lg8 stop:nth-child(2) { stop-color: #888480 !important; }

/* Morcegos em tom neutro suave */
[data-theme="light"] #bats path {
    fill: #A8A49E !important;
}

/* Pássaro claro */
[data-theme="light"] #bird {
    fill: #A8A49E !important;
}

/* Nuvens com mais opacidade no tema claro */
[data-theme="light"] #clouds path {
    fill: #ffffff !important;
    opacity: 0.95 !important;
}

/* Título principal do hero light */
[data-theme="light"] #main-title {
    background: linear-gradient(135deg, #1A1A1D 30%, #5A5A60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
}

/* Subtítulo hero light */
[data-theme="light"] #main-subtitle {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
}

/* Seta de scroll light */
[data-theme="light"] .scroll-down-arrow svg path {
    fill: #1A1A1D !important;
}

/* Gradiente de transição content-parallax light */
[data-theme="light"] .content-parallax::before {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(245, 245, 243, 0.15) 20%,
        rgba(245, 245, 243, 0.4) 40%,
        rgba(245, 245, 243, 0.7) 65%,
        rgba(234, 234, 232, 0.9) 85%,
        var(--bg-graphite) 100%
    );
}

/* Parallax hero bg light */
[data-theme="light"] .parallax-hero-section {
    background-color: var(--bg-premium);
}