/* Estilos para o Corpo e Fontes */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Canvas para a animação de partículas */
#bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

/* Garante que o conteúdo do Hero fique sobre a animação */
.hero-content {
    position: relative;
    z-index: 10;
}

/* Seletor para o JavaScript, a animação é feita via Motion One */
.scroll-animate {
    opacity: 0;
}

/* Sombra para o texto do Hero para melhorar o contraste */
.hero-text-shadow {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* Contêiner para as imagens de fundo da seção de serviços */
#services-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Fica atrás do conteúdo dos cards */
    overflow: hidden;
}

/* Estilo individual de cada imagem de fundo */
.service-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Começa invisível */
    transition: opacity 0.4s ease-in-out; /* Animação suave de opacidade */
}

/* Classe que torna a imagem de fundo visível (opaca) */
.service-bg.active {
    opacity: 0.15; /* Nível de opacidade. Ajuste entre 0.1 e 0.3 para um bom efeito */
}

/* Aumenta a altura dos cards do portfólio APENAS em telas grandes (desktop) */
@media (min-width: 1024px) {
    #portfolio .group {
        min-height: 480px; /* 30rem. Ajuste este valor para maior ou menor. */
    }
}