/* style.css */

/* Configurações globais da fonte e suavização */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevenir scroll horizontal */
    /* As classes de background e text color são aplicadas via Tailwind no body do HTML */
}

/* Classe para o efeito de texto RGB animado */
.text-rgb-offset-animated {
    /* Cor base do texto, será sobreposta pelas sombras */
    color: rgba(255, 255, 255, 0.9); /* Cor branca levemente transparente */
    animation: rgb-shift 7s infinite linear alternate; /* Animação mais suave e alternada */
}

/* Keyframes para a animação do efeito RGB */
@keyframes rgb-shift {
    0% {
        text-shadow:
            1px 1px 1px rgba(255,0,0,0.6),   /* Vermelho */
            -1px -1px 1px rgba(0,255,0,0.6), /* Verde */
            -1.5px 1.5px 1px rgba(0,0,255,0.6);/* Azul */
    }
    25% {
        text-shadow:
            -1.2px -0.8px 1px rgba(255,0,0,0.65),
            1.2px 0.8px 1px rgba(0,255,0,0.65),
            0.8px -1.2px 1px rgba(0,0,255,0.65);
    }
    50% {
        text-shadow:
            1.5px -1px 1px rgba(255,0,0,0.7),
            -0.5px 1.5px 1px rgba(0,255,0,0.7),
            -1px -1px 1px rgba(0,0,255,0.7);
    }
    75% {
        text-shadow:
            -0.8px 1.2px 1px rgba(255,0,0,0.65),
            0.8px -1.2px 1px rgba(0,255,0,0.65),
            1.2px 0.8px 1px rgba(0,0,255,0.65);
    }
    100% {
        text-shadow:
            1px 1px 1px rgba(255,0,0,0.6),
            -1px -1px 1px rgba(0,255,0,0.6),
            -1.5px 1.5px 1px rgba(0,0,255,0.6);
    }
}

/* Efeito de hover para ícones sociais */
.social-icon {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Adicionado filter para brilho */
}
.social-icon:hover {
    transform: scale(1.15) translateY(-2px); /* Leve elevação */
    filter: drop-shadow(0 0 8px currentColor); /* Efeito de brilho com a cor do ícone */
}

/* Estilo para SVGs nos ícones sociais */
.social-icon svg {
    /* Tamanhos definidos por classes Tailwind no HTML (w-X h-X) */
    fill: currentColor; /* Usa a cor do texto do link (definida por classes Tailwind como text-gray-400) */
}

/* Efeito de fita de construção */
.construction-tape {
    width: 100%;
    height: 40px; /* Altura da fita */
    background-image: repeating-linear-gradient(
        -45deg, /* Ângulo das listras */
        #FFC107, /* Amarelo mais vibrante */
        #FFC107 20px,
        #1E1E1E 20px, /* Preto suave */
        #1E1E1E 40px
    );
    background-size: 56.56px 56.56px; /* Tamanho das listras diagonais */
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/*
  Nota: As classes utilitárias do Tailwind CSS (como bg-gray-900, text-white, flex, items-center, etc.)
  são aplicadas diretamente no HTML e não precisam ser duplicadas aqui, pois o Tailwind é carregado
  via CDN no index.html. Este arquivo style.css é para estilos personalizados ou mais complexos
  que não são facilmente cobertos por classes utilitárias.
*/