/* Estilos personalizados que complementam o Tailwind */

/* Transições suaves para mudança de tema */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Background gradients personalizados */
body {
    background-attachment: fixed;
}

/* Light mode background */
body:not(.dark) {
    background-image: 
        radial-gradient(circle at top right, rgba(103, 61, 230, 0.08), transparent 50%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.05), transparent 50%);
}

/* Dark mode background */
.dark body {
    background-image: 
        radial-gradient(circle at top right, rgba(103, 61, 230, 0.15), transparent 50%),
        radial-gradient(circle at bottom left, rgba(80, 37, 209, 0.10), transparent 50%);
}

/* Animações de entrada suaves */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Aplicar animações nas seções */
section {
    animation: fadeInUp 0.8s ease-out;
}

/* Estilo especial para o timer */
#countdown-timer {
    font-feature-settings: 'tnum';
    letter-spacing: 0.05em;
}

/* Theme toggle button hover effects */
#theme-toggle:hover {
    transform: scale(1.05);
}

/* Smooth scrolling para links de navegação */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar para webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: theme('colors.light.surface');
}

.dark ::-webkit-scrollbar-track {
    background: theme('colors.dark.surface');
}

::-webkit-scrollbar-thumb {
    background: theme('colors.hostinger.purple');
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: theme('colors.hostinger.purple.dark');
}

/* Responsive adjustments */
@media (max-width: 767px) {
    #how-it-works .relative > div {
        padding-left: 2rem;
        border-left: 2px solid #673de6;
    }
    
    #how-it-works .md\:ml-auto {
        margin-left: 0;
    }
     
    #how-it-works .md\:pl-8 {
        padding-left: 0;
    }
    
    /* Melhorar legibilidade em mobile */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* Loading animation para o countdown */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.countdown-loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Hover effects para cards */
.benefit-card:hover {
    transform: translateY(-5px);
}