/* Main Stylesheet for CROWNUP TECHNOLOGIES */

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        @apply font-sans antialiased text-slate-900 bg-white;
    }
}

@layer components {
    .gradient-text {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-700 via-indigo-600 to-orange-500;
    }
    
    .nav-link {
        @apply text-slate-600 hover:text-indigo-600 font-semibold transition-all duration-300 relative py-2 text-sm uppercase tracking-wider;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 rounded-full;
    }
    
    .nav-link:hover::after {
        @apply w-full;
    }
    
    .btn-primary {
        @apply bg-indigo-600 text-white px-8 py-4 rounded-2xl font-bold shadow-xl shadow-indigo-200 hover:bg-indigo-700 hover:-translate-y-1 transition-all duration-300 active:scale-95 flex items-center justify-center gap-3 overflow-hidden relative;
    }
    
    .btn-outline {
        @apply border-2 border-slate-200 text-slate-700 px-8 py-4 rounded-2xl font-bold hover:bg-slate-50 hover:border-indigo-600 hover:text-indigo-600 hover:-translate-y-1 transition-all duration-300 active:scale-95 flex items-center justify-center gap-3;
    }
    
    .card {
        @apply bg-white p-10 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/40 hover:shadow-2xl hover:shadow-indigo-100 hover:-translate-y-2 transition-all duration-500 relative overflow-hidden;
    }
    
    .glass-panel {
        @apply bg-white/70 backdrop-blur-xl border border-white/40 shadow-2xl;
    }
    
    .placeholder-box {
        @apply border-2 border-dashed border-slate-200 bg-slate-50 rounded-3xl flex items-center justify-center text-slate-300 font-black uppercase tracking-widest text-xs p-8 text-center min-h-[150px];
    }

    .faq-item {
        @apply border border-slate-100 rounded-3xl overflow-hidden mb-4 transition-all duration-300;
    }
    
    .faq-trigger {
        @apply w-full p-6 flex justify-between items-center text-left font-bold text-slate-900 bg-white hover:bg-slate-50 transition-colors;
    }
    
    .faq-content {
        @apply max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-white;
    }
    
    .faq-item.active {
        @apply border-indigo-200 shadow-xl shadow-indigo-50/50;
    }
    
    .faq-item.active .faq-content {
        @apply max-h-[500px] p-6 pt-0;
    }
}

/* Mouse Follower */
#cursor-follower {
    @apply fixed w-8 h-8 bg-indigo-600/10 rounded-full pointer-events-none z-[9999] transition-transform duration-100 ease-out border border-indigo-600/20 hidden lg:block;
    transform: translate(-50%, -50%);
}

/* Particles Background */
#particles-js {
    @apply absolute inset-0 pointer-events-none z-0 opacity-40;
}

/* Logo Carousel Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 5)); }
}

.logo-slider {
    @apply flex overflow-hidden bg-white py-10;
}

.logo-track {
    display: flex;
    width: calc(250px * 10);
    animation: scroll 40s linear infinite;
}

.logo-slide {
    @apply w-[250px] flex justify-center items-center px-10;
}

/* Custom Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.blob {
    @apply absolute rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow;
}

/* Timeline Custom Styles */
.timeline-dot {
    @apply w-4 h-4 bg-indigo-600 rounded-full relative z-10 shadow-[0_0_20px_rgba(79,70,229,0.5)];
}

.timeline-line {
    @apply absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-1 bg-indigo-50;
}