/* --- Seção de Herói (Introdução da Página) --- */
.hero-section {
    text-align: center; /* Centraliza o texto da seção */
    padding: 2rem; /* Adiciona um preenchimento interno para espaçamento */
    max-width: 800px; /* Define uma largura máxima para o conteúdo não ficar muito esticado em telas grandes */
    margin: 0 auto; /* Centraliza a seção na página horizontalmente */
}

.hero-section h2 {
    font-size: 2.5rem; /* Define o tamanho da fonte do título */
    margin-bottom: 1rem; /* Adiciona uma margem inferior para separar do parágrafo */
    color: var(--marvel-white); /* Define a cor do texto do título */
}

.hero-section p {
    font-size: 1.2rem; /* Define o tamanho da fonte do parágrafo */
    line-height: 1.6; /* Aumenta a altura da linha para melhor legibilidade */
}

/* --- Container Principal da Linha do Tempo --- */
.timeline-container {
    position: relative; /* Define um contexto de posicionamento para os elementos filhos (como a linha central) */
    max-width: 1200px; /* Define a largura máxima do container */
    margin: 2rem auto; /* Centraliza o container na página e adiciona margem superior/inferior */
    padding: 2rem; /* Adiciona preenchimento interno */
}

/* Pseudo-elemento ::before para criar a linha vertical, garantindo que ela fique atrás dos marcadores */
.timeline-container::before {
    content: ''; /* Necessário para que o pseudo-elemento seja renderizado */
    position: absolute; /* Posiciona a linha em relação ao 'timeline-container' */
    width: 6px; /* Define a largura da linha */
    background-color: var(--marvel-red); /* Define a cor da linha */
    top: 0; /* Alinha a linha no topo do container */
    bottom: 100%; /* A linha começa com altura 0 para a animação */
    left: 50%; /* Posiciona a linha no centro horizontal do container */
    margin-left: -3px; /* Desloca a linha para a esquerda pela metade de sua largura para centralizá-la perfeitamente */
    /* A animação agora é vinculada à visibilidade do container na tela, para um scroll mais suave */
    animation: draw-line auto forwards; /* A duração 'auto' é gerenciada pela timeline */
    animation-timeline: view(); /* Vincula a animação ao progresso de visualização do elemento */
}

/* Animação que "desenha" a linha conforme o scroll */
@keyframes draw-line { from { bottom: 100%; } to { bottom: 0; } } /* A linha vai de altura 0 (bottom: 100%) para altura total (bottom: 0) */

/* --- Bloco de Ano na Linha do Tempo --- */
.timeline-year {
    padding: 10px 40px; /* Preenchimento interno para o conteúdo do ano */
    position: relative; /* Contexto de posicionamento para o marcador de ano (::after) */
    background-color: inherit; /* Herda a cor de fundo do elemento pai */
    width: 50%; /* Cada bloco de ano ocupa metade da largura do container */
}

/* Adiciona uma animação de entrada para os blocos de ano */
.timeline-year {
    opacity: 0; /* Começa invisível */
    transform: translateY(50px); /* Começa deslocado 50px para baixo */
    animation: fade-in-up 1s forwards; /* Aplica a animação de fade-in e subida */
    animation-timeline: view(); /* Vincula a animação à visibilidade do elemento na tela */
    animation-range: entry; /* Inicia a animação quando o elemento começa a entrar na viewport */
}
@keyframes fade-in-up { to { opacity: 1; transform: translateY(0); } } /* Animação para aparecer e subir */

/* Pseudo-elemento que cria o círculo marcador na linha do tempo */
.timeline-year::after {
    content: ''; /* Necessário para renderizar o pseudo-elemento */
    position: absolute; /* Posiciona o círculo em relação ao 'timeline-year' */
    width: 25px; /* Largura do círculo */
    height: 25px; /* Altura do círculo */
    right: -17px; /* Posiciona o círculo sobre a linha central (para os blocos da esquerda) */
    background-color: var(--marvel-white); /* Cor de fundo do círculo */
    border: 4px solid var(--marvel-red); /* Borda vermelha ao redor do círculo */
    top: 15px; /* Alinhamento vertical do círculo */
    border-radius: 50%; /* Transforma o elemento em um círculo perfeito */
    z-index: 1; /* Garante que o círculo fique acima da linha do tempo */
    transition: transform 0.3s ease-in-out; /* Adiciona uma transição suave para o efeito de hover */
}

/* Efeito de hover no marcador de ano */
.timeline-year:hover::after {
    /* Melhora o efeito de hover com um brilho vermelho */
    transform: scale(1.3); /* Aumenta o tamanho do círculo em 30% */
    box-shadow: 0 0 15px var(--marvel-red); /* Adiciona uma sombra vermelha para um efeito de brilho */
}

/* Estilos para os blocos de ano ímpares (posicionados à esquerda) */
.timeline-year:nth-child(odd) {
    left: 0; /* Alinha o bloco à esquerda */
    text-align: right; /* Alinha o texto do conteúdo à direita */
}

/* Estilos para os blocos de ano pares (posicionados à direita) */
.timeline-year:nth-child(even) {
    left: 50%; /* Desloca o bloco para a metade direita do container */
}

/* Ajusta a posição do marcador de ano para os blocos da direita */
.timeline-year:nth-child(even)::after {
    left: -16px; /* Posiciona o círculo sobre a linha central */
}

/* Estilo do título do ano (ex: "2008") */
.year-title {
    font-size: 2rem; /* Tamanho da fonte */
    color: var(--marvel-red); /* Cor do texto */
    padding-bottom: 10px; /* Espaçamento inferior para separar da lista de filmes */
}

/* Container para a lista de filmes de um determinado ano */
.movies-list {
    display: flex; /* Organiza os filmes em linha */
    flex-wrap: wrap; /* Permite que os filmes quebrem para a próxima linha se não houver espaço */
    gap: 1rem; /* Espaçamento entre os filmes */
}

/* Alinha a lista de filmes à direita para os blocos de ano da esquerda */
.timeline-year:nth-child(odd) .movies-list {
    justify-content: flex-end; /* Alinha os itens (filmes) ao final do container flex */
}

/* Estilo para cada filme individual na lista */
.timeline-movie {
    display: flex; /* Usa flexbox para o layout interno */
    flex-direction: column; /* Empilha a imagem e o título verticalmente */
    align-items: center; /* Centraliza horizontalmente a imagem e o título */
    text-align: center; /* Centraliza o texto do título */
}

/* Estilo para a imagem (pôster) do filme */
.timeline-movie img {
    width: 200px; /* Largura da imagem aumentada */
    height: auto; /* Altura da imagem aumentada proporcionalmente */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    border-radius: 4px; /* Bordas arredondadas */
    margin-bottom: 0.5rem; /* Espaço entre a imagem e o título */
    /* Adiciona uma transição suave para o efeito de hover */
    transition: transform 0.3s ease-in-out; /* Anima a propriedade 'transform' */
}

/* Estilo para o título do filme */
.timeline-movie h4 {
    font-family: sans-serif; /* Usa uma fonte padrão para melhor legibilidade em tamanhos pequenos */
    color: var(--marvel-white); /* Cor do texto */
    font-weight: bold; /* Deixa o título em negrito */
    font-size: 1.1rem; /* Tamanho da fonte */
    width: 140px; /* Largura aumentada para acompanhar a nova imagem e acomodar títulos maiores */
    line-height: 1.3; /* Altura da linha para espaçamento vertical */
    margin-top: 0.5rem; /* Margem superior */
}

/* Efeito de hover para os pôsteres dos filmes na timeline */
.timeline-movie:hover img {
    transform: scale(1.1); /* Aumenta a imagem em 10% ao passar o mouse */
}

/* --- Media Queries para Responsividade da Linha do Tempo --- */

/* Telas de tablets e celulares (abaixo de 768px) */
@media screen and (max-width: 768px) {
    .hero-section h2 {
        font-size: 2rem; /* Reduz o título da seção de herói para caber melhor em telas menores */
    }

    /* Move a linha do tempo principal para a esquerda da tela */
    .timeline-container::before {
        left: 31px; /* Posiciona a linha vertical (agora no ::before) à esquerda */
    }

    /* Faz com que cada bloco de ano ocupe 100% da largura disponível */
    .timeline-year {
        width: 100%; /* Os blocos agora ocupam toda a largura */
        padding-left: 70px; /* Adiciona espaço à esquerda para o conteúdo não sobrepor a linha */
        padding-right: 25px; /* Ajusta o preenchimento direito */
    }

    /* Reseta o posicionamento para que todos os blocos fiquem à direita da linha */
    .timeline-year:nth-child(even) {
        left: 0; /* Remove o deslocamento de 50% dos blocos pares */
    }

    /* Força o alinhamento do texto à esquerda para todos os blocos */
    .timeline-year:nth-child(odd) {
        text-align: left; /* Alinha todo o texto à esquerda para um layout de coluna única */
    }

    /* Move o círculo (que marca o ano) para a linha do tempo à esquerda */
    .timeline-year::after {
        left: 15px; /* Posiciona o marcador na nova posição da linha vertical */
    }

    /* Garante que o círculo dos anos pares também fique à esquerda */
    .timeline-year:nth-child(even)::after {
        left: 15px; /* Redundante, mas garante consistência */
    }

    /* Garante que a lista de filmes em anos ímpares também se alinhe à esquerda */
    .timeline-year:nth-child(odd) .movies-list {
        justify-content: flex-start; /* Alinha a lista de filmes à esquerda */
    }

    /* Empilha os filmes verticalmente em telas pequenas */
    .movies-list {
        flex-direction: column; /* Muda a direção do flex para coluna */
        align-items: flex-start; /* Alinha os filmes à esquerda dentro da coluna */
    }
}