@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Otimização de Scroll e seleções */
    html {
        scroll-behavior: smooth;
    }

    ::selection {
        background-color: #FF6B00;
        color: white;
    }
}

@layer utilities {
    .glass {
        @apply bg-white/70 dark:bg-gray-900/70 backdrop-blur-lg border border-white/20 dark:border-gray-800/50 shadow-xl;
    }
    
    .glass-card {
        @apply bg-white/90 dark:bg-gray-800/90 backdrop-blur-md border border-gray-100 dark:border-gray-700 shadow-lg rounded-2xl hover:shadow-xl transition-all duration-300;
    }

    /* Efeito de fade-in para as seções */
    .fade-in-section {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        will-change: opacity, transform;
    }
    
    .fade-in-section.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Fix para x-cloak do alpine.js */
[x-cloak] {
    display: none !important;
}

/* Gradients específicos que o tailwind utilitário não cobre tão bem */
.bg-gradient-premium {
    background: linear-gradient(135deg, #FF6B00 0%, #FFB800 100%);
}

/* Dark mode overrides para inputs e forms se necessário */
.dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark textarea {
    @apply bg-gray-800 border-gray-700 text-white focus:ring-primary focus:border-primary;
}