/* Keyframe Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 2px 8px var(--shadow-light);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 4px 16px var(--shadow-medium);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--primary-lavender);
    }
    50% {
        box-shadow: 0 0 20px var(--primary-lavender), 0 0 30px var(--primary-lavender);
    }
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-bounce {
    animation: bounce 0.6s ease-out;
}

.animate-scale {
    animation: fadeInScale 0.4s ease-out;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Staggered animations for grid items */
.verb-card:nth-child(1) { animation-delay: 0.1s; }
.verb-card:nth-child(2) { animation-delay: 0.2s; }
.verb-card:nth-child(3) { animation-delay: 0.3s; }
.verb-card:nth-child(4) { animation-delay: 0.4s; }
.verb-card:nth-child(5) { animation-delay: 0.5s; }
.verb-card:nth-child(6) { animation-delay: 0.6s; }
.verb-card:nth-child(7) { animation-delay: 0.7s; }
.verb-card:nth-child(8) { animation-delay: 0.8s; }
.verb-card:nth-child(9) { animation-delay: 0.9s; }
.verb-card:nth-child(10) { animation-delay: 1.0s; }

/* Conjugation row animations */
.conjugation-row:nth-child(1) { animation-delay: 0.1s; }
.conjugation-row:nth-child(2) { animation-delay: 0.2s; }
.conjugation-row:nth-child(3) { animation-delay: 0.3s; }
.conjugation-row:nth-child(4) { animation-delay: 0.4s; }
.conjugation-row:nth-child(5) { animation-delay: 0.5s; }
.conjugation-row:nth-child(6) { animation-delay: 0.6s; }

/* Hover effects with smooth transitions */
.verb-card,
.conjugation-row,
.audio-button,
.back-button {
    transition: all var(--transition-smooth);
}

/* Loading shimmer effect */
.loading-shimmer {
    background: linear-gradient(
        90deg,
        var(--bg-hover) 25%,
        var(--primary-lavender) 50%,
        var(--bg-hover) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Micro-interactions */
.clickable {
    cursor: pointer;
    user-select: none;
}

.clickable:active {
    transform: scale(0.98);
}

/* Success feedback animation */
@keyframes success-flash {
    0% { background-color: var(--bg-card); }
    50% { background-color: var(--accent-green); }
    100% { background-color: var(--bg-card); }
}

.success-flash {
    animation: success-flash 0.6s ease-in-out;
}

/* Error feedback animation */
@keyframes error-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.error-shake {
    animation: error-shake 0.5s ease-in-out;
}

/* Romantic emoji animation */
@keyframes romantic-emoji {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(8) rotate(10deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8) rotate(15deg);
    }
}

.romantic-emoji {
    position: fixed;
    top: 50%;
    left: 50%;
    font-size: 4rem;
    z-index: 1000;
    pointer-events: none;
    animation: romantic-emoji 2s ease-out forwards;
}