/*==================================================
    REMUNERX WEBSITE V2
    ANIMATIONS
==================================================*/

/*=========================================
    DEFAULT TRANSITIONS
==========================================*/

a,
button,
.btn,
.card,
.feature-card,
.pricing-card,
.testimonial-card,
.industry-card,
.payroll-card,
.kpi-card,
.logo-item,
img{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        opacity .35s ease;

}

/*=========================================
    FADE UP
==========================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
    FADE DOWN
==========================================*/

.fade-down{

    opacity:0;

    transform:translateY(-60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-down.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
    FADE LEFT
==========================================*/

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}

/*=========================================
    FADE RIGHT
==========================================*/

.fade-right{

    opacity:0;

    transform:translateX(70px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}

/*=========================================
    ZOOM IN
==========================================*/

.zoom-in{

    opacity:0;

    transform:scale(.88);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.zoom-in.active{

    opacity:1;

    transform:scale(1);

}

/*=========================================
    ZOOM OUT
==========================================*/

.zoom-out{

    opacity:0;

    transform:scale(1.15);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.zoom-out.active{

    opacity:1;

    transform:scale(1);

}

/*=========================================
    ROTATE IN
==========================================*/

.rotate-in{

    opacity:0;

    transform:rotate(-12deg) scale(.9);

    transition:.8s ease;

}

.rotate-in.active{

    opacity:1;

    transform:rotate(0deg) scale(1);

}

/*=========================================
    STAGGER DELAYS
==========================================*/

.delay-1{

    transition-delay:.1s;

}

.delay-2{

    transition-delay:.2s;

}

.delay-3{

    transition-delay:.3s;

}

.delay-4{

    transition-delay:.4s;

}

.delay-5{

    transition-delay:.5s;

}

.delay-6{

    transition-delay:.6s;

}

/*=========================================
    FLOATING
==========================================*/

.float{

    animation:floatY 5s ease-in-out infinite;

}

.float-slow{

    animation:floatY 8s ease-in-out infinite;

}

.float-fast{

    animation:floatY 3.5s ease-in-out infinite;

}

/*=========================================
    PULSE
==========================================*/

.pulse{

    animation:pulseGlow 2.2s infinite;

}

.pulse-primary{

    animation:pulsePrimary 2s infinite;

}

/*=========================================
    SPIN
==========================================*/

.spin{

    animation:spin360 12s linear infinite;

}

.spin-slow{

    animation:spin360 20s linear infinite;

}

/*=========================================
    CARD HOVER EFFECTS
==========================================*/

.hover-lift{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-12px);

    box-shadow:0 28px 60px rgba(15,23,42,.14);

}

.hover-scale{

    transition:transform .35s ease;

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-rotate{

    transition:transform .35s ease;

}

.hover-rotate:hover{

    transform:rotate(-3deg);

}

/*=========================================
    IMAGE EFFECTS
==========================================*/

.image-hover{

    overflow:hidden;

    border-radius:inherit;

}

.image-hover img{

    transition:
        transform .6s ease,
        filter .6s ease;

}

.image-hover:hover img{

    transform:scale(1.08);

    filter:brightness(1.08);

}

/*=========================================
    BUTTON EFFECTS
==========================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

}

.btn:hover::before{

    animation:buttonShine .8s forwards;

}

.btn:hover{

    transform:translateY(-3px);

}

/*=========================================
    SHIMMER EFFECT
==========================================*/

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::after{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

}

.shimmer:hover::after{

    animation:shimmerMove 1.2s ease;

}

/*=========================================
    GLOW EFFECT
==========================================*/

.glow{

    transition:
        box-shadow .35s ease,
        transform .35s ease;

}

.glow:hover{

    box-shadow:
        0 0 0 1px rgba(37,99,235,.15),
        0 18px 45px rgba(37,99,235,.25);

    transform:translateY(-6px);

}

.glow-primary:hover{

    box-shadow:
        0 0 25px rgba(37,99,235,.35);

}

.glow-success:hover{

    box-shadow:
        0 0 25px rgba(34,197,94,.35);

}

/*=========================================
    ICON ANIMATION
==========================================*/

.icon-bounce:hover i{

    animation:iconBounce .6s ease;

}

.icon-spin:hover i{

    animation:spin360 .8s linear;

}

.icon-pulse:hover i{

    animation:pulsePrimary .8s ease;

}

/*=========================================
    LINK UNDERLINE
==========================================*/

.link-underline{

    position:relative;

}

.link-underline::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:width .3s ease;

}

.link-underline:hover::after{

    width:100%;

}

/*=========================================
    GRADIENT ANIMATION
==========================================*/

.gradient-bg{

    background:linear-gradient(
        -45deg,
        #2563EB,
        #3B82F6,
        #06B6D4,
        #7C3AED
    );

    background-size:300% 300%;

    animation:animatedGradient 8s ease infinite;

}

/*=========================================
    FLOATING OBJECTS
==========================================*/

.float-1{

    animation:floatY 4s ease-in-out infinite;

}

.float-2{

    animation:floatY 6s ease-in-out infinite;

    animation-delay:1s;

}

.float-3{

    animation:floatY 8s ease-in-out infinite;

    animation-delay:2s;

}

/*=========================================
    TEXT EFFECTS
==========================================*/

.text-glow{

    transition:.35s ease;

}

.text-glow:hover{

    color:var(--primary);

    text-shadow:0 0 12px rgba(37,99,235,.25);

}

.text-slide{

    display:inline-block;

    transition:transform .3s ease;

}

.text-slide:hover{

    transform:translateX(6px);

}

/*=========================================
    KEYFRAMES
==========================================*/

@keyframes floatY{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.05);

        opacity:.85;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes pulsePrimary{

    0%{

        box-shadow:0 0 0 0 rgba(37,99,235,.45);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,99,235,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,99,235,0);

    }

}

@keyframes spin360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes shimmerMove{

    from{

        left:-140%;

    }

    to{

        left:140%;

    }

}

@keyframes buttonShine{

    from{

        left:-120%;

    }

    to{

        left:160%;

    }

}

@keyframes iconBounce{

    0%{

        transform:translateY(0);

    }

    30%{

        transform:translateY(-8px);

    }

    60%{

        transform:translateY(3px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes animatedGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================
    LOADER
==========================================*/

.loader{

    width:52px;

    height:52px;

    border-radius:50%;

    border:5px solid rgba(37,99,235,.15);

    border-top-color:var(--primary);

    animation:spin360 .8s linear infinite;

}

/*=========================================
    SKELETON
==========================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#E5E7EB;

}

.skeleton::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:50%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    animation:shimmerMove 1.5s infinite;

}

/*=========================================
    SCROLL INDICATOR
==========================================*/

.scroll-indicator{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    animation:floatY 2s infinite;

}

.scroll-indicator span{

    font-size:13px;

    color:var(--muted);

}

.mouse{

    width:28px;

    height:46px;

    border:2px solid var(--primary);

    border-radius:30px;

    display:flex;

    justify-content:center;

}

.mouse::before{

    content:"";

    width:4px;

    height:9px;

    margin-top:8px;

    border-radius:10px;

    background:var(--primary);

    animation:scrollWheel 1.5s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(14px);

    }

}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*=========================================
    MOBILE OPTIMIZATION
==========================================*/

@media(max-width:768px){

    .float,

    .float-1,

    .float-2,

    .float-3{

        animation-duration:8s;

    }

    .hover-lift:hover,

    .hover-scale:hover,

    .hover-rotate:hover{

        transform:none;

    }

    .btn:hover{

        transform:none;

    }

}

/*====================================================
    HOW IT WORKS ANIMATIONS
====================================================*/

/* Initial State */

.workflow-step,
.workflow-cta,
.how-it-works .section-heading{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

/* Reveal */

.workflow-step.show,
.workflow-cta.show,
.how-it-works .section-heading.show{

    opacity:1;

    transform:translateY(0);

}

/* Timeline */

.workflow-line{

    transform:scaleX(0);

    transform-origin:left;

    transition:1.2s ease;

}

.workflow-line.show{

    transform:scaleX(1);

}

/* Stagger */

.workflow-step:nth-child(2){

    transition-delay:.10s;

}

.workflow-step:nth-child(3){

    transition-delay:.25s;

}

.workflow-step:nth-child(4){

    transition-delay:.40s;

}

.workflow-step:nth-child(5){

    transition-delay:.55s;

}

/* Floating Icon */

@keyframes workflowFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.step-card:hover .step-icon{

animation:workflowFloat 1s ease infinite;

}

/* Circle Pulse */

@keyframes pulseCircle{

0%{

box-shadow:
0 0 0 rgba(37,99,235,.35);

}

50%{

box-shadow:
0 0 25px rgba(37,99,235,.35);

}

100%{

box-shadow:
0 0 0 rgba(37,99,235,.35);

}

}

.workflow-step:hover .step-circle{

animation:pulseCircle 1.4s infinite;

}

/* CTA */

.workflow-cta{

transition:.4s ease;

}

.workflow-cta:hover{

transform:translateY(-6px);

}

/*====================================================
SCREEN FLOAT
====================================================*/

@keyframes screenshotFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.browser-window{

animation:screenshotFloat 6s ease-in-out infinite;

}

.why-row:nth-child(even) .browser-window{

animation-delay:1.5s;

}

/*====================================================
    INDUSTRIES WE SERVE ANIMATIONS
====================================================*/

/* Initial State */

.industry-card,
.industry-footer,
.industries .section-heading{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

/* Reveal */

.industry-card.show,
.industry-footer.show,
.industries .section-heading.show{

    opacity:1;

    transform:translateY(0);

}

/*------------------------------------
Stagger Animation
------------------------------------*/

.industry-card:nth-child(1){

    transition-delay:.05s;

}

.industry-card:nth-child(2){

    transition-delay:.15s;

}

.industry-card:nth-child(3){

    transition-delay:.25s;

}

.industry-card:nth-child(4){

    transition-delay:.35s;

}

.industry-card:nth-child(5){

    transition-delay:.45s;

}

.industry-card:nth-child(6){

    transition-delay:.55s;

}

/*------------------------------------
Floating Icon
------------------------------------*/

@keyframes industryFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.industry-card:hover .industry-icon{

animation:industryFloat 1s ease infinite;

}

/*------------------------------------
CTA Hover
------------------------------------*/

.industry-footer{

transition:.4s ease;

}

.industry-footer:hover{

transform:translateY(-6px);

box-shadow:
0 25px 60px rgba(37,99,235,.12);

}

/*====================================================
    CUSTOMER SUCCESS STORIES ANIMATIONS
====================================================*/

/* Initial State */

.success-stories .section-heading,
.story-card,
.stat-box{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

/* Reveal */

.success-stories .section-heading.show,
.story-card.show,
.stat-box.show{

    opacity:1;

    transform:translateY(0);

}

/*===================================
Story Card Stagger
===================================*/

.story-card:nth-child(1){

    transition-delay:.10s;

}

.story-card:nth-child(2){

    transition-delay:.25s;

}

.story-card:nth-child(3){

    transition-delay:.40s;

}

/*===================================
Statistics Stagger
===================================*/

.stat-box:nth-child(1){

    transition-delay:.10s;

}

.stat-box:nth-child(2){

    transition-delay:.20s;

}

.stat-box:nth-child(3){

    transition-delay:.30s;

}

.stat-box:nth-child(4){

    transition-delay:.40s;

}

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

@keyframes avatarFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

.story-card:hover .story-avatar{

animation:avatarFloat 1s ease infinite;

}

/*===================================
Featured Card Glow
===================================*/

.story-card.featured{

position:relative;

overflow:hidden;

}

.story-card.featured::after{

content:"";

position:absolute;

top:-50%;

left:-50%;

width:200%;

height:200%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.18),
transparent
);

transform:rotate(20deg);

transition:.8s;

opacity:0;

}

.story-card.featured:hover::after{

left:100%;

opacity:1;

}

/*===================================
Stats Hover
===================================*/

.stat-box{

transition:
transform .35s,
box-shadow .35s;

}

.stat-box:hover{

box-shadow:
0 20px 40px rgba(37,99,235,.18);

}

/*====================================================
    FAQ ANIMATIONS
====================================================*/

/* Initial State */

.faq .section-heading,
.faq-intro,
.faq-item{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

/* Reveal */

.faq .section-heading.show,
.faq-intro.show,
.faq-item.show{

    opacity:1;

    transform:translateY(0);

}

/*====================================
Stagger Animation
====================================*/

.faq-item:nth-child(1){

    transition-delay:.05s;

}

.faq-item:nth-child(2){

    transition-delay:.10s;

}

.faq-item:nth-child(3){

    transition-delay:.15s;

}

.faq-item:nth-child(4){

    transition-delay:.20s;

}

.faq-item:nth-child(5){

    transition-delay:.25s;

}

.faq-item:nth-child(6){

    transition-delay:.30s;

}

/*====================================
Hover Effect
====================================*/

.faq-item:hover{

    transform:translateY(-4px);

}

/*====================================
Question Hover
====================================*/

.faq-question{

    transition:color .3s ease;

}

.faq-question:hover{

    color:#2563eb;

}

/*====================================
Icon Animation
====================================*/

.faq-icon{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}

/*=========================================
    END OF ANIMATIONS.CSS
==========================================*/