/* NQ Tenpin Booking System - Animations */

/* Fade Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

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

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

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

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

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

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Animations */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

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

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Pulse/Glow Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes pulseScale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px var(--primary-glow);
    }
    50% {
        box-shadow: 0 0 40px var(--primary-glow), 0 0 60px var(--secondary-glow);
    }
}

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

/* Spin Animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* Bounce Animations */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Typing Animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--primary); }
}

/* Progress Bar Animation */
@keyframes progress {
    from { width: 0; }
    to { width: 100%; }
}

/* Animation Utilities */
.animate-fade-in { animation: fadeIn var(--transition-base) forwards; }
.animate-fade-in-up { animation: fadeInUp var(--transition-base) forwards; }
.animate-fade-in-down { animation: fadeInDown var(--transition-base) forwards; }
.animate-fade-in-left { animation: fadeInLeft var(--transition-base) forwards; }
.animate-fade-in-right { animation: fadeInRight var(--transition-base) forwards; }
.animate-scale-in { animation: scaleIn var(--transition-base) forwards; }
.animate-pop-in { animation: popIn var(--transition-bounce) forwards; }
.animate-bounce-in { animation: bounceIn var(--transition-slow) forwards; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-glow { animation: glow 2s infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 2s infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }

/* Animation Delays */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }
.animate-delay-700 { animation-delay: 700ms; }
.animate-delay-1000 { animation-delay: 1000ms; }

/* Animation Durations */
.animate-duration-fast { animation-duration: 150ms; }
.animate-duration-normal { animation-duration: 300ms; }
.animate-duration-slow { animation-duration: 500ms; }
.animate-duration-slower { animation-duration: 700ms; }

/* Initial State for JS animations */
[data-animate] {
    opacity: 0;
}

[data-animate].animated {
    opacity: 1;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-elevated) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton--text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton--title {
    height: 2em;
    width: 60%;
    margin-bottom: var(--space-4);
}

.skeleton--avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

.skeleton--button {
    height: var(--button-height);
    width: 120px;
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

.spinner--sm {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

.spinner--lg {
    width: 56px;
    height: 56px;
    border-width: 4px;
}

/* Loading Dots */
.loading-dots {
    display: flex;
    gap: var(--space-2);
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: var(--radius-full);
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0; }