/* --- Reset Básico e Configurações Globais --- */
* {
    margin: 0; /* Remove margens externas padrão dos elementos */
    padding: 0; /* Remove preenchimento interno padrão dos elementos */
    box-sizing: border-box; /* Faz com que padding e border não aumentem a largura/altura final do elemento */
}

/* --- Definição da Fonte Personalizada --- */
@font-face {
    font-family: 'MarvelFont'; /* Nomeia a família da fonte para uso no CSS */
    src: url('../fonts/urw-din-demi.otf') format('opentype'); /* Caminho para o arquivo da fonte */
    font-weight: normal; /* Define o peso da fonte */
    font-style: normal; /* Define o estilo da fonte */
}

/* --- Variáveis de Cor e Fonte (CSS Custom Properties) --- */
:root {
    --marvel-red: #ED1D24;      /* Vermelho icônico da Marvel */
    --marvel-red-dark: #a10d11; /* Variação mais escura do vermelho para hovers ou estados ativos */
    --marvel-white: #FEFEFE;     /* Branco para textos e elementos de destaque */
    --marvel-gray: #AAAAAA;      /* Cinza para textos secundários e placeholders */
    --marvel-black: #151515;     /* Preto para fundos e elementos principais */
    --marvel-card-bg: #222222;   /* Cor de fundo para os cards */
    --card-shadow: rgba(0, 0, 0, 0.5);
    --card-shadow-hover: rgba(0, 0, 0, 0.7);
    --card-description-bg: rgba(15, 15, 15, 0.9);
    --font-family: 'MarvelFont', sans-serif; /* Define a fonte principal do projeto */
}

/* --- Estilos Gerais do Corpo da Página --- */
body {
    /* Efeito de "aurora" sutil para dar profundidade, em vez de um fundo sólido */
    background: radial-gradient(circle at top, #2a2a2a, var(--marvel-black));
    font-family: var(--font-family); /* Aplica a fonte personalizada a toda a página */
    color: var(--marvel-white);      /* Define a cor padrão do texto */
    min-height: 100vh; /* Garante que o gradiente ocupe a tela toda */
}

/* --- Estilos do Cabeçalho (Header) --- */
header {
    display: flex; /* Usa Flexbox para alinhar os itens */
    justify-content: space-between; /* Coloca o título à esquerda e o resto à direita */
    align-items: center; /* Alinha verticalmente os itens ao centro */
    padding: 1rem 2rem; /* Preenchimento interno (1rem em cima/baixo, 2rem nas laterais) */
    background-color: var(--marvel-black); /* Cor de fundo do cabeçalho */
    border-bottom: 3px solid var(--marvel-red); /* Linha vermelha na parte inferior */
}

/* --- Estilo do Título Principal (H1) --- */
h1 {
    font-size: 3.2rem; /* Tamanho da fonte */
    color: var(--marvel-white); /* Cor do texto */
    text-transform: uppercase; /* Transforma o texto para maiúsculas */
    letter-spacing: 2px; /* Espaçamento entre as letras */
}

/* Estilo para o link dentro do H1, para garantir que o título todo seja clicável */
.header-link {
    text-decoration: none; /* Remove o sublinhado padrão do link */
    color: inherit; /* Herda a cor do elemento pai (H1) */
}

/* Estilos genéricos para H2 e parágrafos (podem ser sobrescritos) */
h2, p {
    color: var(--marvel-gray); /* Cor de texto padrão para subtítulos e parágrafos */
}

/* Estilo genérico para imagens */
img {
    width: 9rem; /* Largura padrão para imagens */
    height: auto; /* Altura se ajusta proporcionalmente */
}

/* Estilos genéricos para links */
a {
    text-decoration: none; /* Remove o sublinhado */
    color: var(--marvel-white); /* Cor padrão do link */
    letter-spacing: 1px; /* Espaçamento entre letras */
    transition: color 0.3s ease; /* Transição suave da cor ao passar o mouse */
}

/* Efeito hover para links */
a:hover {
    color: var(--marvel-red); /* Muda a cor do link para vermelho ao passar o mouse */
}

/* --- Estilos do Rodapé (Footer) --- */
footer {
    padding: 1.5rem 2rem; /* Preenchimento interno */
    margin-top: 2rem; /* Margem superior para separar do conteúdo principal */
    border-top: 3px solid var(--marvel-red); /* Linha vermelha na parte superior */
    display: flex; /* Usa Flexbox para alinhar os links */
    justify-content: center; /* Centraliza os links horizontalmente */
    gap: 2.5rem; /* Espaçamento entre os links */
}

/* --- Container Principal dos Cards de Filmes --- */
.card-container {
    display: flex; /* Organiza os cards em linha */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha */
    justify-content: center; /* Centraliza os cards na linha */
    gap: 2rem; /* Espaçamento entre os cards */
    padding: 2rem; /* Preenchimento ao redor do container */
}

/* --- Estilo Individual do Card --- */
.card {
    position: relative; /* Essencial para posicionar a descrição sobre o card */
    background-color: var(--marvel-card-bg); /* Cor de fundo do card */
    border-radius: 8px; /* Bordas arredondadas */
    overflow: hidden; /* Esconde qualquer conteúdo que saia dos limites do card (como a descrição animada) */
    width: 400px; /* Largura fixa do card */
    box-shadow: 0 4px 8px var(--card-shadow); /* Sombra para dar profundidade, usando variável */
    border: 1px solid #33333340; /* Borda sutil e semi-transparente */

    /* --- Animação de Fade-in --- */
    opacity: 0; /* Começa invisível */
    transform: translateY(20px); /* Começa um pouco para baixo */
    /* Adiciona 'transform' e 'box-shadow' à transição para o efeito de hover */
    transition: opacity 0.5s ease-out, transform 0.4s ease-out, box-shadow 0.4s ease-out;
}
.card.visible {
    opacity: 1; /* Torna-se visível */
    transform: translateY(0); /* Move para a posição original */
}

/* --- Efeito de Hover no Card --- */
.card:hover {
    /* Melhora o efeito de hover, levantando o card e adicionando um brilho vermelho */
    transform: scale(1.03) translateY(-10px);
    /* Adiciona uma sombra interna sutil e uma sombra externa com a cor da marca para um efeito "glow" */
    box-shadow: 0 18px 30px var(--card-shadow-hover), 0 0 20px -5px var(--marvel-red);
    z-index: 10; /* Garante que o card fique na frente dos outros ao ser aumentado */
}

/* Conteúdo visível do card (imagem e informações básicas) */
.card-content {
    display: flex; /* Alinha a imagem e as informações lado a lado */
    align-items: center; /* Centraliza verticalmente */
    gap: 1rem; /* Espaço entre a imagem e as informações */
    padding: 1rem; /* Preenchimento interno */
}

/* Imagem (pôster) dentro do card */
.card-content img {
    width: 100px; /* Largura da imagem */
    height: 150px; /* Altura da imagem */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    border-radius: 4px; /* Bordas arredondadas para a imagem */
}

/* Container para as informações (título, ano, link) */
.card-info {
    display: flex; /* Organiza as informações */
    flex-direction: column; /* Empilha as informações verticalmente */
    gap: 0.5rem; /* Espaço entre título, ano e link */
}

/* Título do filme no card */
.card-info h2 {
    font-size: 1.5rem; /* Tamanho da fonte */
    color: var(--marvel-red); /* Cor do texto */
}

/* --- Descrição Oculta do Card (Aparece no Hover) --- */
.card-description {
    position: absolute; /* Posiciona sobre o card */
    top: 0; /* Alinha no topo */
    left: 0; /* Alinha à esquerda */
    width: 100%; /* Ocupa toda a largura do card */
    height: 100%; /* Ocupa toda a altura do card */ 
    background-color: var(--card-description-bg); /* Fundo semi-transparente, usando variável */
    color: var(--marvel-white); /* Cor do texto da descrição */
    padding: 1.5rem; /* Preenchimento interno */
    display: flex; /* Usa flexbox para centralizar o texto */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center; /* Alinha o texto ao centro */
    opacity: 0; /* Começa totalmente transparente (invisível) */
    transform: translateY(100%); /* Começa deslocado para baixo, fora do card */
    /* Reduz o atraso da transição para uma resposta mais rápida ao usuário */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Efeito que acontece quando o mouse passa por cima do .card */
.card:hover .card-description {
    opacity: 1; /* Torna a descrição visível */
    transform: translateY(0); /* Move a descrição para sua posição original (y=0) */
}

/* --- Componente de Busca --- */
/* Container para os elementos da direita do cabeçalho */
.header-right {
    display: flex; /* Alinha navegação e busca */
    align-items: center; /* Alinha verticalmente */
    gap: 2rem; /* Espaço entre a navegação e a busca */
}

/* Container da busca (input e ícone) */
.search-container {
    display: flex; /* Alinha input e ícone */
    align-items: center; /* Alinha verticalmente */
}

/* Botão/ícone de busca */
.search-toggle {
    background: none; /* Fundo transparente */
    border: none; /* Sem borda */
    cursor: pointer; /* Cursor de ponteiro para indicar que é clicável */
    padding: 5px; /* Pequeno preenchimento */
    display: flex; /* Para centralizar o ícone SVG dentro */
    align-items: center;
    justify-content: center;
}

/* Ícone SVG da lupa */
.search-icon {
    color: var(--marvel-white); /* Cor do ícone */
    transition: color 0.3s ease; /* Transição suave da cor */
}

/* Campo de texto da busca */
.search-input {
    width: 0; /* Começa com largura zero (escondido) */
    padding: 0.5rem 0; /* Preenchimento vertical */
    border: none; /* Sem borda */
    border-bottom: 2px solid var(--marvel-red); /* Apenas uma linha inferior */
    background: transparent; /* Fundo transparente */
    color: var(--marvel-white); /* Cor do texto digitado */
    font-size: 1rem; /* Tamanho da fonte */
    outline: none; /* Remove a borda de foco padrão */
    opacity: 0; /* Começa invisível */
    /* Anima a largura, opacidade e preenchimento quando ativado */
    transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* Estilo do texto de placeholder */
.search-input::placeholder {
    color: var(--marvel-gray); /* Cor do placeholder */
    font-family: sans-serif; /* Usa uma fonte padrão para o placeholder */
}

/* Melhora o feedback visual quando o campo de busca está focado */
.search-input:focus {
    border-bottom-width: 3px; /* Deixa a borda inferior mais espessa ao focar */
}


/* Estilos quando a busca está ativa (classe .active no container) */
.search-container.active .search-input {
    width: 200px; /* Expande a largura do input */
    opacity: 1; /* Torna o input visível */
    padding: 0.5rem 0.5rem; /* Adiciona preenchimento horizontal */
}

/* Botão de busca real (se existisse, estaria escondido) */
#button-search {
    display: none; /* Escondido por padrão */
}

/* Muda a cor do ícone quando a busca está ativa ou o input focado */
.search-container.active .search-icon,
.search-input:focus ~ .search-toggle .search-icon {
    color: var(--marvel-red); /* Ícone fica vermelho */
}

/* --- Media Queries para Responsividade --- */

/* Telas muito grandes (monitores ultrawide, etc.) */
@media (min-width: 1441px) {
    .card-container {
        max-width: 1600px; /* Limita a largura máxima do container de cards */
        margin: 0 auto; /* Centraliza o container na tela */
    }
}

/* Telas de tablets e laptops pequenos */
@media (max-width: 1024px) {
    .card {
        width: 350px; /* Diminui a largura dos cards */
    }

    h1 {
        font-size: 2.5rem; /* Diminui o tamanho do título principal */
    }
}

/* Telas de tablets em modo retrato e celulares grandes */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Empilha os itens do cabeçalho verticalmente */
        gap: 1.5rem; /* Espaço entre o título e o bloco de navegação/busca */
        padding: 1.5rem; /* Ajusta o preenchimento */
    }

    .header-right {
        flex-direction: column; /* Empilha a navegação e a busca */
        gap: 1.5rem; /* Espaço entre navegação e busca */
    }

    h1 {
        font-size: 2.2rem; /* Reduz ainda mais o título */
        text-align: center; /* Centraliza o título */
    }

    .card-container {
        padding: 1rem; /* Reduz o preenchimento ao redor dos cards */
    }

    .card {
        width: 90vw; /* Card ocupa 90% da largura da tela */
        max-width: 400px; /* Mas não passa de 400px */
    }

    footer {
        flex-direction: column; /* Empilha os links do rodapé */
        align-items: center; /* Centraliza os links */
        gap: 1.5rem; /* Espaço entre os links */
        text-align: center; /* Centraliza o texto dos links */
    }

    /* Esconde o botão "Voltar ao Topo" em telas menores */
    #back-to-top-btn {
        display: none !important;
    }
}

/* Telas de celulares pequenos */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem; /* Tamanho do título otimizado para telas bem pequenas */
    }

    .card-info h2 {
        font-size: 1.3rem; /* Diminui o título do filme dentro do card */
    }

    .card-content {
        padding: 0.8rem; /* Reduz o padding dentro do card */
        gap: 0.8rem; /* Reduz o espaço entre a imagem e o texto */
    }
}

/* --- Estilos da Navegação --- */
.navigation {
    display: flex; /* Alinha os links de navegação */
    gap: 1.5rem; /* Espaço entre os links */
}

/* Links da navegação */
.navigation a {
    font-size: 1.2rem; /* Tamanho da fonte */
    text-transform: uppercase; /* Texto em maiúsculas */
    padding-bottom: 5px; /* Espaço para a borda inferior aparecer */
    border-bottom: 2px solid transparent; /* Borda inferior invisível por padrão */
}

/* Efeito hover para os links da navegação */
.navigation a:hover {
    color: var(--marvel-white); /* Mantém a cor branca no hover */
    border-bottom-color: var(--marvel-red); /* Mostra a borda vermelha no hover */
}


/* --- Estilos Utilitários --- */
/* Mensagem para quando nenhum filme é encontrado na busca */
.not-found {
    text-align: center; /* Centraliza o texto */
    font-size: 1.5rem; /* Tamanho da fonte */
    padding: 3rem; /* Espaçamento para dar destaque à mensagem */
    width: 100%; /* Garante que ocupe toda a largura do container */
}

/* --- Botão Voltar ao Topo --- */
#back-to-top-btn {
    display: none; /* Começa escondido */
    position: fixed; /* Posição fixa na tela */
    bottom: 20px; /* 20px do fundo */
    right: 30px; /* 30px da direita */
    z-index: 99; /* Fica sobre outros elementos */
    border: none; /* Sem borda */
    outline: none; /* Sem contorno de foco */
    background-color: var(--marvel-red); /* Cor de fundo vermelha */
    color: var(--marvel-white); /* Cor do ícone (seta) */
    cursor: pointer; /* Cursor de mãozinha */
    padding: 15px; /* Preenchimento interno */
    border-radius: 50%; /* Deixa o botão redondo */
    font-size: 18px; /* Tamanho da seta */
    line-height: 1; /* Alinha a seta verticalmente */
    transition: background-color 0.3s, opacity 0.4s, visibility 0.4s; /* Transições suaves */
    opacity: 0;
    visibility: hidden;
}

/* Animação de pulsar para chamar a atenção de forma sutil */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(237, 29, 36, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(237, 29, 36, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(237, 29, 36, 0);
    }
}

/* Efeito hover para o botão */
#back-to-top-btn:hover {
    background-color: var(--marvel-red-dark); /* Escurece o botão ao passar o mouse */
}

/* Classe para mostrar o botão */
#back-to-top-btn.show {
    display: block;
    opacity: 1;
    visibility: visible;
    animation: pulse 2s infinite; /* Aplica a animação de pulsar */
}