/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01I

   File:
   /opt/simplpay/static/css/008-animations.css
   ========================================================== */


/* ==========================================================
   Motion Utilities
   ========================================================== */

.sp-transition-fast {
    transition:
        all
        var(--sp-transition-fast);
}

.sp-transition-normal {
    transition:
        all
        var(--sp-transition-normal);
}

.sp-transition-spring {
    transition:
        all
        var(--sp-transition-spring);
}


/* ==========================================================
   Fade
   ========================================================== */

.sp-fade-in {
    animation:
        sp-fade-in
        var(--sp-duration-normal)
        var(--sp-ease-standard)
        both;
}

.sp-fade-out {
    animation:
        sp-fade-out
        var(--sp-duration-normal)
        var(--sp-ease-standard)
        both;
}

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

    to {
        opacity: 1;
    }
}

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

    to {
        opacity: 0;
    }
}


/* ==========================================================
   Slide
   ========================================================== */

.sp-slide-up {
    animation:
        sp-slide-up
        var(--sp-duration-normal)
        var(--sp-ease-spring)
        both;
}

.sp-slide-down {
    animation:
        sp-slide-down
        var(--sp-duration-normal)
        var(--sp-ease-spring)
        both;
}

.sp-slide-left {
    animation:
        sp-slide-left
        var(--sp-duration-normal)
        var(--sp-ease-spring)
        both;
}

.sp-slide-right {
    animation:
        sp-slide-right
        var(--sp-duration-normal)
        var(--sp-ease-spring)
        both;
}

@keyframes sp-slide-up {
    from {
        opacity: 0;
        transform:
            translate3d(
                0,
                18px,
                0
            );
    }

    to {
        opacity: 1;
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}

@keyframes sp-slide-down {
    from {
        opacity: 0;
        transform:
            translate3d(
                0,
                -18px,
                0
            );
    }

    to {
        opacity: 1;
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}

@keyframes sp-slide-left {
    from {
        opacity: 0;
        transform:
            translate3d(
                18px,
                0,
                0
            );
    }

    to {
        opacity: 1;
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}

@keyframes sp-slide-right {
    from {
        opacity: 0;
        transform:
            translate3d(
                -18px,
                0,
                0
            );
    }

    to {
        opacity: 1;
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


/* ==========================================================
   Scale
   ========================================================== */

.sp-scale-in {
    animation:
        sp-scale-in
        var(--sp-duration-normal)
        var(--sp-ease-spring)
        both;
}

.sp-scale-out {
    animation:
        sp-scale-out
        var(--sp-duration-fast)
        var(--sp-ease-standard)
        both;
}

@keyframes sp-scale-in {
    from {
        opacity: 0;
        transform:
            scale(.94);
    }

    to {
        opacity: 1;
        transform:
            scale(1);
    }
}

@keyframes sp-scale-out {
    from {
        opacity: 1;
        transform:
            scale(1);
    }

    to {
        opacity: 0;
        transform:
            scale(.96);
    }
}


/* ==========================================================
   Spring
   ========================================================== */

.sp-spring-in {
    animation:
        sp-spring-in
        620ms
        var(--sp-ease-spring)
        both;
}

@keyframes sp-spring-in {
    0% {
        opacity: 0;
        transform:
            scale(.88)
            translateY(16px);
    }

    60% {
        opacity: 1;
        transform:
            scale(1.025)
            translateY(-2px);
    }

    100% {
        opacity: 1;
        transform:
            scale(1)
            translateY(0);
    }
}


/* ==========================================================
   Card Lift
   ========================================================== */

.sp-hover-lift {
    transition:
        transform
        var(--sp-transition-spring),
        box-shadow
        var(--sp-transition-normal);
}

.sp-hover-lift:hover {
    transform:
        translateY(-3px);
    box-shadow:
        var(--sp-shadow-lg);
}

.sp-hover-lift:active {
    transform:
        scale(
            var(--sp-active-scale)
        );
}


/* ==========================================================
   Glow Pulse
   ========================================================== */

.sp-glow-pulse {
    animation:
        sp-glow-pulse
        2.6s
        ease-in-out
        infinite;
}

@keyframes sp-glow-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0
            rgba(
                79,
                70,
                229,
                0
            ),
            var(--sp-shadow-sm);
    }

    50% {
        box-shadow:
            0 0 34px
            rgba(
                79,
                70,
                229,
                .24
            ),
            var(--sp-shadow-md);
    }
}


/* ==========================================================
   Biometric Pulse
   ========================================================== */

.sp-biometric-pulse {
    position: relative;
}

.sp-biometric-pulse::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border:
        1px solid
        rgba(
            99,
            102,
            241,
            .35
        );
    opacity: 0;
    animation:
        sp-biometric-pulse
        2s
        ease-out
        infinite;
    pointer-events: none;
}

@keyframes sp-biometric-pulse {
    0% {
        opacity: .7;
        transform:
            scale(.9);
    }

    70% {
        opacity: 0;
        transform:
            scale(1.18);
    }

    100% {
        opacity: 0;
        transform:
            scale(1.18);
    }
}


/* ==========================================================
   Float
   ========================================================== */

.sp-float {
    animation:
        sp-float
        5s
        ease-in-out
        infinite;
}

@keyframes sp-float {
    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-6px);
    }
}


/* ==========================================================
   Success Pop
   ========================================================== */

.sp-success-pop {
    animation:
        sp-success-pop
        540ms
        var(--sp-ease-spring)
        both;
}

@keyframes sp-success-pop {
    0% {
        opacity: 0;
        transform:
            scale(.65);
    }

    55% {
        opacity: 1;
        transform:
            scale(1.12);
    }

    100% {
        opacity: 1;
        transform:
            scale(1);
    }
}


/* ==========================================================
   Shake
   ========================================================== */

.sp-shake {
    animation:
        sp-shake
        380ms
        ease-in-out;
}

@keyframes sp-shake {
    0%,
    100% {
        transform:
            translateX(0);
    }

    20% {
        transform:
            translateX(-7px);
    }

    40% {
        transform:
            translateX(7px);
    }

    60% {
        transform:
            translateX(-5px);
    }

    80% {
        transform:
            translateX(4px);
    }
}


/* ==========================================================
   QR Scan Line
   ========================================================== */

.sp-scan-line {
    position: absolute;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius:
        var(--sp-radius-pill);
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--sp-cyan-400),
            var(--sp-primary-400),
            transparent
        );
    box-shadow:
        0 0 18px
        rgba(
            6,
            182,
            212,
            .45
        );
    animation:
        sp-scan-line
        2.2s
        ease-in-out
        infinite;
}

@keyframes sp-scan-line {
    0% {
        top: 18%;
        opacity: .35;
    }

    50% {
        top: 78%;
        opacity: 1;
    }

    100% {
        top: 18%;
        opacity: .35;
    }
}


/* ==========================================================
   Ripple
   ========================================================== */

.sp-ripple {
    position: relative;
    overflow: hidden;
}

.sp-ripple::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    background:
        rgba(
            255,
            255,
            255,
            .30
        );
    opacity: 0;
    transform:
        translate(-50%, -50%)
        scale(1);
}

.sp-ripple:active::after {
    animation:
        sp-ripple
        480ms
        ease-out;
}

@keyframes sp-ripple {
    0% {
        opacity: .55;
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(28);
    }
}


/* ==========================================================
   Shine
   ========================================================== */

.sp-shine {
    position: relative;
    overflow: hidden;
}

.sp-shine::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -55%;
    width: 35%;
    height: 220%;
    transform:
        rotate(22deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .24
            ),
            transparent
        );
    pointer-events: none;
    transition:
        left
        650ms
        var(--sp-ease-spring);
}

.sp-shine:hover::before {
    left: 125%;
}


/* ==========================================================
   Gradient Flow
   ========================================================== */

.sp-gradient-flow {
    background-size:
        220%
        220% !important;
    animation:
        sp-gradient-flow
        6s
        ease
        infinite;
}

@keyframes sp-gradient-flow {
    0% {
        background-position:
            0%
            50%;
    }

    50% {
        background-position:
            100%
            50%;
    }

    100% {
        background-position:
            0%
            50%;
    }
}


/* ==========================================================
   Number Update
   ========================================================== */

.sp-number-pop {
    animation:
        sp-number-pop
        320ms
        var(--sp-ease-spring);
}

@keyframes sp-number-pop {
    0% {
        transform:
            translateY(5px)
            scale(.96);
        opacity: .45;
    }

    100% {
        transform:
            translateY(0)
            scale(1);
        opacity: 1;
    }
}


/* ==========================================================
   Modal Entrance
   ========================================================== */

.sp-modal-enter {
    animation:
        sp-modal-enter
        340ms
        var(--sp-ease-spring)
        both;
}

@keyframes sp-modal-enter {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* ==========================================================
   Bottom Sheet Entrance
   ========================================================== */

.sp-sheet-enter {
    animation:
        sp-sheet-enter
        360ms
        var(--sp-ease-spring)
        both;
}

@keyframes sp-sheet-enter {
    from {
        opacity: 0;
        transform:
            translateY(
                calc(
                    100%
                    +
                    30px
                )
            );
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* ==========================================================
   Navigation Active Bounce
   ========================================================== */

.sp-nav-bounce {
    animation:
        sp-nav-bounce
        420ms
        var(--sp-ease-spring);
}

@keyframes sp-nav-bounce {
    0% {
        transform:
            scale(.88);
    }

    55% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);
    }
}


/* ==========================================================
   Stagger Helpers
   ========================================================== */

.sp-delay-1 {
    animation-delay:
        50ms;
}

.sp-delay-2 {
    animation-delay:
        100ms;
}

.sp-delay-3 {
    animation-delay:
        150ms;
}

.sp-delay-4 {
    animation-delay:
        200ms;
}

.sp-delay-5 {
    animation-delay:
        250ms;
}

.sp-delay-6 {
    animation-delay:
        300ms;
}


/* ==========================================================
   Will Change Utilities
   ========================================================== */

.sp-motion-transform {
    will-change:
        transform;
}

.sp-motion-opacity {
    will-change:
        opacity;
}

.sp-motion-both {
    will-change:
        transform,
        opacity;
}


/* ==========================================================
   Animation Completion Utility
   ========================================================== */

.sp-animation-paused {
    animation-play-state:
        paused !important;
}

.sp-animation-none {
    animation:
        none !important;
}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;
    }

    .sp-fade-in,
    .sp-fade-out,
    .sp-slide-up,
    .sp-slide-down,
    .sp-slide-left,
    .sp-slide-right,
    .sp-scale-in,
    .sp-scale-out,
    .sp-spring-in,
    .sp-glow-pulse,
    .sp-biometric-pulse::before,
    .sp-float,
    .sp-success-pop,
    .sp-shake,
    .sp-scan-line,
    .sp-ripple::after,
    .sp-gradient-flow,
    .sp-number-pop,
    .sp-modal-enter,
    .sp-sheet-enter,
    .sp-nav-bounce {
        animation:
            none !important;
    }

    .sp-hover-lift,
    .sp-shine::before {
        transition:
            none !important;
    }

}