/* ============================================================================
   RSL Animations Library
   ============================================================================
   A collection of reusable CSS animations for modals, alerts, scroll effects,
   and general UI transitions.

   Categories:
   - Modal animations (fadeIn, fadeOut, zoom, rotate, slide)
   - Inlay alert animations (slide, fade, zoom, spin)
   - Scroll animations (card-reveal, fade-slide-up)
   - Progress bar animations
   ============================================================================ */

/* ──────────────────────────────────────────────
   Modal Animations
   ────────────────────────────────────────────── */

/* Default modal fade */
.modal {
    animation: fadeOut 0.3s;
}

.modal-container.show-modal .modal {
    animation: fadeIn 0.3s;
}

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

/* Fade Out */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Slide from Bottom */
@keyframes fadeSlideFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide from Top */
@keyframes fadeSlideFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Zoom In */
@keyframes zoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Zoom Out */
@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

/* Rotate In */
@keyframes rotateIn {
    from {
        transform: rotate(-360deg);
        opacity: 0;
    }
    to {
        transform: rotate(0);
        opacity: 1;
    }
}

/* Rotate Out */
@keyframes rotateOut {
    from {
        transform: rotate(0);
        opacity: 1;
    }
    to {
        transform: rotate(360deg);
        opacity: 0;
    }
}

/* Fade Out to Top */
@keyframes fadeOutToTop {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Fade Out to Bottom */
@keyframes fadeOutToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ──────────────────────────────────────────────
   Inlay Alert Animations
   ────────────────────────────────────────────── */

/* Slide in from Right */
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slide-in-right 0.5s ease-out forwards;
}

/* Fade In */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fade-in 0.5s ease-in forwards;
}

/* Fade from Top */
@keyframes fade-from-top {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-from-top {
    animation: fade-from-top 0.5s ease-out forwards;
}

/* Fade from Bottom */
@keyframes fade-from-bottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-from-bottom {
    animation: fade-from-bottom 0.5s ease-out forwards;
}

/* Fade from Left */
@keyframes fade-from-left {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-from-left {
    animation: fade-from-left 0.5s ease-out forwards;
}

/* Fade from Right */
@keyframes fade-from-right {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-from-right {
    animation: fade-from-right 0.5s ease-out forwards;
}

/* Fade Zoom In */
@keyframes fade-zoom-in {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-zoom-in {
    animation: fade-zoom-in 0.5s ease-out forwards;
}

/* Spin In */
@keyframes spin-in {
    from {
        transform: rotate(-360deg);
        opacity: 0;
    }
    to {
        transform: rotate(0);
        opacity: 1;
    }
}

.spin-in {
    animation: spin-in 0.5s ease-out forwards;
}

/* Fade Slide Up */
@keyframes fade-slide-up {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-slide-up {
    animation: fade-slide-up 0.5s ease-out forwards;
}

/* Fade Slide Down */
@keyframes fade-slide-down {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-slide-down {
    animation: fade-slide-down 0.5s ease-out forwards;
}

/* Blink In */
@keyframes blink-in {
    0% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 0; }
    75% { opacity: 1; }
    100% { opacity: 1; }
}

.blink-in {
    animation: blink-in 0.5s ease-out forwards;
}

/* Expand Open */
@keyframes expand-open {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

.expand-open {
    animation: expand-open 0.5s ease-out forwards;
}

/* ──────────────────────────────────────────────
   Progress Bar Animation
   ────────────────────────────────────────────── */

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #FFA500;
    width: 0;
    transition: none;
    animation-name: fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes fill {
    from { width: 0; }
    to { width: 100%; }
}

/* ──────────────────────────────────────────────
   Scroll Animations (Animate on Scroll)
   ────────────────────────────────────────────── */

/* Card Reveal - Custom animation for cards on scroll
   Combines subtle upward movement, gentle scale, and soft focus effect */
@keyframes card-reveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.card-reveal {
    animation: card-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Base class for elements waiting to animate */
.rsl-animate-pending {
    opacity: 0;
}

/* ──────────────────────────────────────────────
   Reduced Motion Support
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rsl-animate-pending {
        opacity: 1 !important;
    }

    /* Disable all animations for accessibility */
    .fade-in,
    .fade-from-top,
    .fade-from-bottom,
    .fade-from-left,
    .fade-from-right,
    .fade-zoom-in,
    .slide-in-right,
    .fade-slide-up,
    .fade-slide-down,
    .spin-in,
    .expand-open,
    .blink-in,
    .card-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}