/* Fade da primeira frase*/
.fade-auto {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* REDUZIDO - Abaixo do menu */
    font-size: 2.5rem; /* Usando rem para escalabilidade */
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    width: 90%; /* Garante que não vaze em telas pequenas */
}


/* Fade da segunda frase */
.fade-auto-2 {
    position: fixed;
    top: 40%; /* Ajustado para mobile */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* REDUZIDO - Abaixo do menu */
    font-size: 1.5rem; /* Reduzido para mobile */
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    opacity: 0;
    pointer-events: none;
    /*width: 90%; /* Garante que não vaze em telas pequenas */
}


.fade-auto-3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* REDUZIDO - Abaixo do menu */
    font-size: 4rem;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    opacity: 0;
    pointer-events: none;
    width: 90%;
}

/* Primeira frase */
.fade-auto.animate {
    animation: fadeIn 3s ease-in-out forwards;
}

/* Segunda frase - agora com delay controlado pelo JS */
.fade-auto-2.animate {
    animation: fadeIn 3s ease-in-out forwards;
    animation-delay: 0s; /* Será controlado pelo JS */
}

/* Animação para a terceira frase */
.fade-auto-3.animate {
    animation: fadeIn 3s ease-in-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
}


/* Fade out*/

.fade-auto.fade-out,
.fade-auto-2.fade-out {
    animation: fadeOut 3s ease-in-out forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-60px);
    }
}





/*Responsividade*/

/* Media Queries para responsividade */
@media (max-width: 768px) {
    .fade-auto {
        font-size: 1.8rem;
        top: 35%;
        padding: 15px;
    }
    
    .fade-auto-2 {
        font-size: 1.2rem;
        top: 45%;
    }

    .fade-auto-3 {
        font-size: 1.5rem;
    }
    
    .logo {
        max-width: 100px;
    }
    
    .logo-container {
        top: 15px;
        left: 15px;
    }
}

@media (max-width: 480px) {
    .fade-auto {
        font-size: 1.5rem;
        top: 30%;
        padding: 10px;
    }
    
    .fade-auto-2 {
        font-size: 1rem;
        top: 40%;
    }

    .fade-auto-3 {
        font-size: 1.2rem;
    }
    
    .logo {
        max-width: 80px;
    }
}