/*=========================================================
Agent Doorway
Animation Styles
==========================================================*/


/*==========================
Base Animation Settings
==========================*/

.animate{

    opacity:0;

    transform:translateY(30px);

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

}


.animate.show{

    opacity:1;

    transform:translateY(0);

}



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

.fade-in{

    animation:fadeIn 1s ease forwards;

}


@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



.fade-up{

    animation:fadeUp .9s ease forwards;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.slide-left{

    animation:slideLeft .9s ease forwards;

}


@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}




.slide-right{

    animation:slideRight .9s ease forwards;

}



@keyframes slideRight{


    from{

        opacity:0;

        transform:translateX(50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}




/*==========================
Hero Animation
==========================*/


.hero h1{

    animation:heroTitle 1s ease forwards;

}



.hero .lead{

    animation:heroText 1.2s ease forwards;

}



.hero .btn{

    animation:heroButton 1.4s ease forwards;

}



@keyframes heroTitle{


    from{

        opacity:0;

        transform:translateY(50px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes heroText{


    from{

        opacity:0;

        transform:translateY(30px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes heroButton{


    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==========================
Feature Card Effects
==========================*/


.feature-card{

    position:relative;

    overflow:hidden;

}



.feature-card::before{


    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:rgba(15,76,129,.05);

    border-radius:50%;

    top:-50px;

    right:-50px;

    transition:.4s ease;

}



.feature-card:hover::before{

    transform:scale(2);

}



.feature-card:hover i{

    transform:scale(1.15);

}



.feature-card i{

    transition:.35s ease;

}



/*==========================
Button Animation
==========================*/


.btn-success{

    position:relative;

    overflow:hidden;

}



.btn-success::after{


    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:rgba(255,255,255,.25);

    transition:.5s ease;


}



.btn-success:hover::after{

    left:100%;

}




/*==========================
Floating Animation
==========================*/


.float{

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

}



@keyframes floating{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


    100%{

        transform:translateY(0);

    }


}



/*==========================
Pulse Effect
==========================*/


.pulse{

    animation:pulseEffect 2s infinite;

}



@keyframes pulseEffect{


    0%{

        box-shadow:0 0 0 0 rgba(52,180,73,.4);

    }


    70%{

        box-shadow:0 0 0 20px rgba(52,180,73,0);

    }


    100%{

        box-shadow:0 0 0 0 rgba(52,180,73,0);

    }


}




/*==========================
Counter Animation
==========================*/


.counter{

    animation:counterGlow 3s ease infinite;

}



@keyframes counterGlow{


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.05);

    }


    100%{

        transform:scale(1);

    }


}



/*==========================
Workflow Animation
==========================*/


.workflow-line{

    animation:workflowAppear 1.2s ease forwards;

}



@keyframes workflowAppear{


    from{

        opacity:0;

        transform:scale(.95);

    }


    to{

        opacity:1;

        transform:scale(1);

    }


}



/*==========================
Background Motion
==========================*/


.hero .overlay{


    animation:overlayPulse 12s ease-in-out infinite;

}



@keyframes overlayPulse{


    0%{

        opacity:.9;

    }


    50%{

        opacity:.75;

    }


    100%{

        opacity:.9;

    }


}



/*==========================
Accordion Animation
==========================*/


.accordion-button{


    transition:.3s ease;

}



.accordion-button:hover{

    padding-left:25px;

}



/*==========================
Loading Animation
==========================*/


.loading{


    animation:loadingSpin 1s linear infinite;

}



@keyframes loadingSpin{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}



/*==========================
Stagger Effects
==========================*/


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

    animation-delay:.1s;

}


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

    animation-delay:.2s;

}


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

    animation-delay:.3s;

}


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

    animation-delay:.4s;

}


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

    animation-delay:.5s;

}


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

    animation-delay:.6s;

}



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


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

    *{

        animation-duration:0.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:0.01ms!important;

        scroll-behavior:auto!important;

    }

}