/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

@keyframes rotateIn {
    from {
        transform: rotate(-180deg) scale(0.3);
        opacity: 0;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

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

.animate-text {
    animation: fadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.animate-btn {
    animation: scaleIn 0.5s ease-out forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

.animate-card {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

.animate-card:nth-child(1) {
    animation-delay: 0.8s;
}

.animate-card:nth-child(2) {
    animation-delay: 1s;
}

.animate-card:nth-child(3) {
    animation-delay: 1.2s;
}

/* Chess piece animations */
@keyframes queenMove {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.chess-piece {
    animation: queenMove 2s ease-in-out infinite;
}

/* Board animations */
@keyframes boardAppear {
    from {
        transform: perspective(1000px) rotateX(45deg) scale(0.8);
        opacity: 0;
    }
    to {
        transform: perspective(1000px) rotateX(0) scale(1);
        opacity: 1;
    }
}

.board-animation {
    animation: boardAppear 1s ease-out forwards;
}

/* Solution animations */
@keyframes solutionHighlight {
    0% {
        background-color: rgba(74, 144, 226, 0);
    }
    50% {
        background-color: rgba(74, 144, 226, 0.3);
    }
    100% {
        background-color: rgba(74, 144, 226, 0);
    }
}

.solution-highlight {
    animation: solutionHighlight 2s ease-in-out infinite;
}

/* Loading animation */
@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: loading 1s linear infinite;
}

/* Page transition animations */
.page-enter {
    opacity: 0;
    transform: translateX(100%);
}

.page-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms, transform 300ms;
}

.page-exit {
    opacity: 1;
    transform: translateX(0);
}

.page-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 300ms, transform 300ms;
}