/* =========================================
   Estilos Gerais do Site
   ========================================= */

/* Configuração de scroll suave */
html {
    scroll-behavior: smooth;
}

/* =========================================
   Componentes
   ========================================= */

/* Botões de filtro para projetos */
.filter-btn {
    @apply px-6 py-2 rounded-full border border-accent text-accent 
           hover:bg-accent hover:text-white transition-all duration-300;
}

.filter-btn.active {
    @apply bg-accent text-white;
}

/* Cards de projetos */
.project-card {
    @apply relative overflow-hidden rounded-lg transition-transform duration-300;
}

.project-card:hover {
    @apply transform scale-105;
}

.project-card-overlay {
    @apply absolute inset-0 bg-primary/80 opacity-0 
           flex items-center justify-center transition-opacity duration-300;
}

.project-card:hover .project-card-overlay {
    @apply opacity-100;
}

/* =========================================
   Animações
   ========================================= */

/* Animação de fade in para elementos */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   Header e Navegação
   ========================================= */

/* Efeito de hover no menu */
.nav-link {
    @apply relative overflow-hidden;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-accent 
           transition-all duration-300;
}

.nav-link:hover::after {
    @apply w-full;
}

/* =========================================
   Seção Hero
   ========================================= */

/* Overlay do vídeo de fundo */
.hero-overlay {
    @apply absolute inset-0 bg-gradient-to-b from-primary/70 to-primary/90;
}

/* =========================================
   Formulário de Contato
   ========================================= */

/* Estilo dos inputs */
.form-input {
    @apply w-full px-4 py-2 bg-gray-800 rounded-lg 
           focus:outline-none focus:ring-2 focus:ring-accent
           transition-all duration-300;
}

/* Estilo do botão de envio */
.submit-btn {
    @apply w-full bg-accent hover:bg-accent/80 px-8 py-3 
           rounded-lg transition-colors duration-300;
}

/* =========================================
   Responsividade
   ========================================= */

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    .hero-content {
        @apply text-center;
    }
}

/* =========================================
   Utilitários
   ========================================= */

/* Classes de utilidade personalizadas */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
}