/* =========================================================================
   UNIVERSAL DESIGN SYSTEM - ANIMATIONS
   =========================================================================
   STRICT RULE: Max duration 300ms. Only opacity, transform, scale.
   No layout shifting. No heavy blurs.
   ========================================================================= */

/* Fade In */
.tool-anim-fade-in {
    animation: toolFadeIn var(--transition-base) forwards;
}
@keyframes toolFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Slide Up */
.tool-anim-slide-up {
    animation: toolSlideUp var(--transition-base) forwards;
}
@keyframes toolSlideUp {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Slide Down */
.tool-anim-slide-down {
    animation: toolSlideDown var(--transition-base) forwards;
}
@keyframes toolSlideDown {
    0% { opacity: 0; transform: translateY(-16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Scale Up */
.tool-anim-scale {
    animation: toolScale var(--transition-fast) forwards;
}
@keyframes toolScale {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Progress Fill */
.tool-anim-progress {
    transition: width var(--transition-slow) ease-in-out;
}

/* Skeleton Loading (The only infinite animation allowed) */
.tool-skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: toolSkeleton 1.5s infinite linear;
    border-radius: var(--radius-sm);
}
@keyframes toolSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Spinner */
.tool-spinner-svg {
    animation: toolRotate 2s linear infinite;
    width: 50px;
    height: 50px;
}
.tool-spinner-svg .path {
    stroke: var(--color-primary);
    stroke-linecap: round;
    animation: toolDash 1.5s ease-in-out infinite;
}
@keyframes toolRotate {
    100% { transform: rotate(360deg); }
}
@keyframes toolDash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

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