/* Animação de Fade-in para Seções 
   Esta classe é o estado inicial (invisível)
*/
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Esta classe é adicionada pelo JavaScript quando 
   o elemento entra na tela, tornando-o visível.
*/
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos base para o efeito de hover nos logos de clientes.
   (Usado em conjunto com as classes do Tailwind)
*/
.filter.grayscale.opacity-60 {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease-in-out; /* Adiciona uma transição suave */
}

.filter.grayscale.opacity-60:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Definições de sombra customizadas para os efeitos de hover.
   (Usado em conjunto com as classes do Tailwind)
*/
.hover\:shadow-xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.hover\:shadow-2xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Estilo para o canvas de fundo na seção Hero.
   'pointer-events: none' é crucial para permitir que 
   os botões e textos *atrás* dele sejam clicáveis.
*/
#freshness-canvas {
    pointer-events: none; 
}

/* --- ESTILOS PARA O POP-UP DE SAÍDA (COM CORREÇÃO DE Z-INDEX) --- */

/* O overlay escuro que cobre a página */
#popup-overlay {
    transition: opacity 0.3s ease-in-out;
    /* z-index: 100;
       Garante que o fundo fique acima de todo o conteúdo da página, 
       mas abaixo do modal do pop-up.
    */
    z-index: 100;
}

/* O modal (pop-up) em si */
#popup-modal {
    transition: all 0.3s ease-in-out;
    transform: scale(0.95);
    opacity: 0;
    /* z-index: 101; 
       Valor MAIS ALTO que o overlay para garantir que 
       o pop-up fique na frente de TUDO.
    */
    z-index: 101;
    position: fixed; /* Garante o posicionamento correto no centro */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Centraliza e prepara a animação */
}

/* Animação de entrada do pop-up (o JS remove 'hidden') */
#popup-overlay:not(.hidden) {
    opacity: 1;
}
#popup-modal:not(.hidden) {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}