/* ============================================
   API Tester v2 - Animation Styles
   Transitions, Keyframes, and Motion
   ============================================ */

/* ========== Base Transitions ========== */
.transition-all {
    transition: all var(--transition-base);
}

.transition-colors {
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.transition-opacity {
    transition: opacity var(--transition-base);
}

.transition-transform {
    transition: transform var(--transition-base);
}

/* ========== Fade Animations ========== */
.fade-in {
    animation: fade-in var(--transition-base) ease-out;
}

.fade-out {
    animation: fade-out var(--transition-base) ease-in;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ========== Slide Animations ========== */
.slide-in-up {
    animation: slide-in-up var(--transition-base) ease-out;
}

.slide-in-down {
    animation: slide-in-down var(--transition-base) ease-out;
}

.slide-in-left {
    animation: slide-in-left var(--transition-base) ease-out;
}

.slide-in-right {
    animation: slide-in-right var(--transition-base) ease-out;
}

@keyframes slide-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-down {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ========== Scale Animations ========== */
.scale-in {
    animation: fade-in var(--transition-base) ease-out;
}

@keyframes scale-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========== Spin Animation ========== */
.spin {
    animation: spin 1s linear infinite;
}

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

/* ========== Pulse Animation ========== */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========== Subtle Border Animation ========== */
.accent-breathe {
    animation: accent-breathe 2.4s ease-in-out infinite alternate;
}

@keyframes accent-breathe {
    from { border-color: var(--color-border); }
    to { border-color: var(--color-border-hover); }
}

/* ========== Skeleton Loading ========== */
.skeleton-loading {
    background: var(--color-bg-tertiary);
    animation: pulse 1.5s ease-in-out infinite;
}

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

/* ========== Hover Effects ========== */
.hover-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform var(--transition-fast);
}

.hover-scale:hover {
    opacity: 0.9;
}

/* ========== Loading Dots ========== */
.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    animation: loading-dots 1.4s ease-in-out infinite both;
}

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

@keyframes loading-dots {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}