/* ═══════════════════════════════════════════════════
   ANIMATIONS — ImportControl
   ═══════════════════════════════════════════════════ */

.fade-in {
    animation: fadeIn var(--duration-slower) var(--ease-decelerate) both;
}

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

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, var(--gray-50) 25%, var(--gray-75) 50%, var(--gray-50) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

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

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

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-rect {
    height: 120px;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in { animation: none; }
    .skeleton { animation: none; }
    * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}