/* --- START OF FILE animations.css --- */

/* Animações para o site Jalambi_pinto Movies */

/* Animação de fade-in para elementos (pode ser usada em conjunto com scroll-reveal) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação de rotação para loaders */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*
Comentado ou Removido - Animação para expandir a largura (era usada pela linha do título)
@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 70%;
    }
}
*/


/* Aplicação das animações */

/* Animação para os cards de filmes (será acionada pelo JS que adiciona delay) */
.movie-card.animate-card-entry { /* Classe a ser adicionada via JS se necessário para diferenciar do scroll-reveal */
    animation: fadeIn 0.7s ease-out forwards;
    opacity: 0; /* Começa invisível */
}

/* Animação de fade-in para texto do hero (se não usar scroll-reveal para o hero) */
.hero h2, .hero p, .hero .hero-logo, .hero .btn {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0; /* Começa invisível */
}

.hero .hero-logo { animation-delay: 0.2s; }
.hero h2 { animation-delay: 0.4s; }
.hero p { animation-delay: 0.6s; }
.hero .btn { animation-delay: 0.8s; }


/* Estilo e Animação para o loader (já usado no trailer placeholder) */
.loader {
    width: 40px; /* Diminuído */
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2); /* Borda base mais sutil */
    border-top: 4px solid var(--primary-color); /* Cor primária para a parte que gira */
    border-radius: 50%;
    animation: rotate 0.8s linear infinite; /* Mais rápido */
    margin: 20px auto;
}

/*
Comentado ou Removido - Animação para a linha do título principal (index.html)
.site-title {
    position: relative;
    display: inline-block;
}

.site-title::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-color);
    animation: expandWidth 1s ease-out 0.5s forwards;
    border-radius: 2px;
}
*/


/* Animação para os links de navegação */
.nav-item { /* Aplicado aos <a> da navegação */
    position: relative;
    padding: 5px 0; /* Garante espaço para a linha */
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Começa no centro */
    width: 0; /* Começa sem largura */
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

.nav-item:hover::after,
.nav-item.active::after { /* Também para link ativo, se houver */
    width: 100%;
    left: 0; /* Expande para ambos os lados */
}


/* Animação para as seções ao fazer scroll (Scroll Reveal) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-reveal.active { /* Classe adicionada via JS */
    opacity: 1;
    transform: translateY(0);
}

/* --- END OF FILE animations.css --- */