/* Animation classes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

/* Feature Carousel Styles */
.feature-nav-item.active {
    @apply bg-white dark:bg-gray-800 shadow-xl border-blue-100 dark:border-gray-700 scale-105;
    border-width: 1px;
    transform: scale(1.05);
}

.feature-nav-item.active .feature-icon {
    @apply bg-blue-600 text-white;
    background-color: #2563EB;
    color: white;
}

/* Specific icon colors for active state if we want to keep them distinct */
.feature-nav-item[data-target="feature-vocab"].active .feature-icon {
    background-color: #059669;
    /* green-600 */
}

.feature-nav-item[data-target="feature-demo"].active .feature-icon {
    background-color: #CA8A04;
    /* yellow-600 */
}

.feature-nav-item[data-target="feature-game"].active .feature-icon {
    background-color: #4F46E5;
    /* indigo-600 */
}