/* Helix Trading Company - Main Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
@layer components {
    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105;
    }
    
    .btn-secondary {
        @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-6 rounded-lg transition duration-300;
    }
    
    .btn-outline {
        @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold py-3 px-6 rounded-lg transition duration-300;
    }
    
    .card {
        @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300;
    }
    
    .section-title {
        @apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
    }
    
    .section-subtitle {
        @apply text-lg text-gray-600 mb-8;
    }
    
    .nav-link {
        @apply text-gray-700 hover:text-blue-600 font-medium transition duration-200;
    }
    
    .nav-link-active {
        @apply text-blue-600 font-semibold;
    }
    
    .input-field {
        @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200;
    }
    
    .gradient-bg {
        @apply bg-gradient-to-r from-blue-600 to-blue-800;
    }
    
    .gradient-text {
        @apply bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent;
    }
}

/* ===== ANIMATIONS ===== */

/* Page Load Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes */
.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fadeInDown {
    animation: fadeInDown 0.8s ease-out forwards;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fadeInRight {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.8s ease-out forwards;
}

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

/* Hero Animation Delays */
.hero-badge {
    opacity: 0;
    animation: fadeInDown 0.6s ease-out 0.2s forwards;
}

.hero-title {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.hero-subtitle {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.hero-buttons {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.hero-stats {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 1s forwards;
}

/* Hero Card Stagger Animation */
.hero-card {
    opacity: 0;
    animation: scaleIn 0.6s ease-out forwards;
}

.hero-card:nth-child(1) { animation-delay: 0.3s; }
.hero-card:nth-child(2) { animation-delay: 0.45s; }
.hero-card:nth-child(3) { animation-delay: 0.6s; }
.hero-card:nth-child(4) { animation-delay: 0.75s; }
.hero-card:nth-child(5) { animation-delay: 0.9s; }

/* Scroll Reveal Animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Staggered Children Animation */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.stagger-children.revealed > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 0.6s; }

.stagger-children.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* Hero section gradient overlay */
.hero-overlay {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%);
}

/* Footer gradient */
.footer-gradient {
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
}