/* Importando a fonte Poppins definida no HTML */
body {
    font-family: 'Poppins', sans-serif;
}

/* 
  Classe para o efeito do header ao rolar a página.
  - Fundo branco semitransparente com desfoque (efeito "glassmorphism").
  - Sombra sutil para dar profundidade.
  - Aplicada via JavaScript.
*/
.header-scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Suporte para Safari */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/*
  Classe para a imagem de fundo da seção Hero.
  - O caminho da imagem é relativo ao arquivo CSS.
*/
.hero-background {
    background-image: url('../images/hero-background.webp');
}

/* 
  Animação para a Hero Section.
  - Esta animação é aplicada diretamente no HTML para carregar com a página.
*/
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0; /* Garante que o elemento comece invisível antes da animação */
}

/*
  Classes para animação ao rolar a página (ativadas via Intersection Observer em JS).
  - 'animate-on-scroll' define o estado inicial (invisível).
  - 'is-visible' define o estado final (visível) com uma transição suave.
*/
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: var(--animation-delay, 0s); /* Permite atrasos personalizados */
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*
  Animação de pulsação para botões de CTA (Call to Action).
  - Cria um brilho sutil e um efeito de escala para atrair a atenção.
*/
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 168, 150, 0.7); /* Cor base: #00a896 */
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 12px rgba(0, 168, 150, 0);
    }
}
.animate-pulse-button {
    animation: pulse 2.5s infinite;
}

/*
  Estilos para o botão "Voltar ao Topo".
  - Começa invisível e fora da tela.
  - A classe 'is-visible' o torna visível com uma transição suave.
  - Adicionado estilos explícitos para garantir forma, tamanho e centralização.
  - Definida a cor da seta para contrastar com o fundo.
*/
.back-to-top-button {
    /* Garante que o botão seja um círculo */
    width: 3rem; /* Equivalente a w-12 do Tailwind */
    height: 3rem; /* Equivalente a h-12 do Tailwind */
    border-radius: 50%; /* Garante a forma redonda */

    /* Centraliza o conteúdo (a seta SVG) */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Visibilidade e animação */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;

    /* Define a cor da seta (SVG usa currentColor) */
    /* Usando a cor de texto principal (#121f0e) para contrastar com o fundo do botão (accent #669295) */
    color: var(--primary-text);
    background: var(--accent); /* Garante que o fundo use a cor de destaque */
    box-shadow: 0 2px 8px 0 rgb(102 146 149 / 0.18); /* Sombra com base na cor accent */
}

.back-to-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Estilo hover para o botão */
.back-to-top-button:hover {
    background: var(--primary-text); /* Fundo escuro no hover */
    color: var(--primary-bg); /* Seta clara no hover */
}

/* Estilos para o Footer */
footer {
    background-color: var(--accent); /* Cor #669295 */
    color: var(--primary-bg); /* Cor #cfe1e5 para o texto contrastar */
    padding: 2rem 0; /* Adiciona um padding para melhor visualização */
}