@import "base.css";
@import "layout.css";
@import "components.css";
@import "utilities.css";

/* Animação das camadas dentro do carrossel */

/* ============================================================
   AJUSTE PARA MOBILE (768px para baixo)
   ============================================================ */
@media (max-width: 768px) {
    
    .hero-wrapper {
        /* Em vez de um ratio fixo que pode esmagar o texto, 
           definimos uma altura mínima para garantir que tudo caiba */
        min-height: 600px; 
        display: flex;
        flex-direction: column;
    }

    .hero-carousel, 
    carousel-img {
        /* Mantemos o ratio como base, mas o min-height do pai manda */
        aspect-ratio: 9 / 16; /* Proporção mais alta (tipo Stories) */
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .home-hero {
        /* Mudamos de absolute para relative ou garantimos que o padding 
           seja suficiente para o conteúdo respirar */
        position: relative; 
        height: auto;
        min-height: 600px;
        padding: 80px 24px 40px; /* Mais espaço no topo para o Header */
        justify-content: flex-start; /* Alinha o texto no topo/meio */
    }

    .home-hero__content {
        max-width: 100%;
    }

    .home-hero__title {
        font-size: clamp(26px, 8vw, 36px);
        line-height: 1.2;
    }

    .home-hero__text {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
}

/* 1. Garante que o container do slide ocupe o espaço total do carrossel */
/* 1. Container do Slide */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 2. Configuração Base das Imagens */
.slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; 
    opacity: 0;
    
    /* Variáveis de controle de animação */
    /* transition-duration: var(--speed, 1.5s);
    transition-timing-function: var(--curve, cubic-bezier(0.165, 0.84, 0.44, 1)); */
    transition: 
        opacity 1.2s ease-in-out, 
        transform 0s;
    will-change: transform, opacity;
}

/* --- ESTADOS INICIAIS (Escondido) --- */

/* Definimos o transform usando variáveis. 
   Se não houver style no HTML, ele usa o que está no segundo parâmetro. */
.slide:not(.active) img {
    transform: 
        translateX(var(--x, 0)) 
        translateY(var(--y, 0)) 
        rotate(var(--rotate, 0deg));
}

/* Quando o slide está saindo (class .active removida durante transição), mantém a posição */
carousel-img.transitioning .slide:not(.active) img {
    transform: translateX(0) translateY(0) rotate(0deg);
}

/* Fallbacks de altura por camada (o que você já usava) */
.slide:not(.active) .layer-1 { --y: var(--y, 0px); }
.slide:not(.active) .layer-2 { --y: var(--y, 20px); }
.slide:not(.active) .layer-3 { --y: var(--y, 40px); }
.slide:not(.active) .layer-4 { --y: var(--y, 60px); }


/* --- ESTADOS ATIVOS (Entrada) --- */

.slide.active img {
    opacity: var(--max-opacity, 1);
    /* Retorna tudo para a posição original de repouso */
    transform: translateX(0) translateY(0) rotate(0deg);
    /* Na ENTRADA: Aplicamos as variáveis de tempo e curva. */
    transition: 
        opacity var(--speed, 1.2s) ease-in-out, 
        transform var(--speed, 1.5s) var(--curve, cubic-bezier(0.165, 0.84, 0.44, 1));
    
    /* Mantém o delay para as camadas entrarem em ordem */
    transition-delay: var(--delay, 0s);
}

/* Delays escalonados (aceita override via --delay no HTML) */
.slide.active .layer-1 { transition-delay: var(--delay, 0s); }
.slide.active .layer-2 { transition-delay: var(--delay, 0.2s); }
.slide.active .layer-3 { transition-delay: var(--delay, 0.5s); }
.slide.active .layer-4 { transition-delay: var(--delay, 0.4s); }