/**
 * SHARE Lab Roadmap - Animations
 *
 * Keyframe animations for menu open/close, fade-slide transitions, etc.
 *
 * @package ShareLabRoadmap
 */

/* =========================================================================
   FADE SLIDE ANIMATIONS
   ========================================================================= */

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

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

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

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

/* Animation utility classes */
.slr-fade-slide {
    animation: slrFadeSlideIn 0.25s ease both;
}

.slr-fade {
    animation: slrFadeIn 0.2s ease both;
}

.slr-closing {
    animation: slrFadeSlideOut 0.2s ease both;
}

/* =========================================================================
   PROGRESS BAR ANIMATION
   ========================================================================= */

@keyframes slrProgressFill {
    from {
        width: 0%;
    }
}

.slr-progress-fill {
    animation: slrProgressFill 0.3s ease-out;
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .slr-fade-slide,
    .slr-fade,
    .slr-closing,
    .slr-progress-fill {
        animation: none;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}