/* ===========================================================
   ANIMATIONS.CSS
   People & Culture at Work
   Enterprise Version 6
=========================================================== */


/* ===========================================================
   PERFORMANCE
=========================================================== */

.hero-gradient,
.hero-illustration,
.floating-card,
.btn,
.service-card,
.trust-item,
.case-image img,
#backToTop{

    will-change:transform,opacity;

    transform:translateZ(0);

}


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

@keyframes float{

    0%{

        transform:translate3d(0,0,0);

    }

    50%{

        transform:translate3d(0,-14px,0);

    }

    100%{

        transform:translate3d(0,0,0);

    }

}

@keyframes floatSlow{

    0%{

        transform:translate3d(0,0,0);

    }

    50%{

        transform:translate3d(0,-28px,0);

    }

    100%{

        transform:translate3d(0,0,0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ===========================================================
   HERO GRADIENTS
=========================================================== */

.hero-gradient-1{

    animation:floatSlow 16s ease-in-out infinite;

}

.hero-gradient-2{

    animation:floatSlow 13s ease-in-out infinite reverse;

}


/* ===========================================================
   HERO ILLUSTRATION
=========================================================== */

.hero-illustration{

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

}

.hero-illustration img{

    transition:transform .6s ease;

}

.hero-illustration:hover img{

    transform:scale(1.03);

}


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

.floating-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.floating-card-1{

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

}

.floating-card-2{

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

}

.floating-card-3{

    animation:float 7s ease-in-out infinite;

}

.floating-card:hover{

    transform:

        translateY(-10px)

        scale(1.03);

}


/* ===========================================================
   SERVICE CARDS
=========================================================== */

.service-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.service-card:hover{

    transform:

        translateY(-12px)

        scale(1.02);

}


/* ===========================================================
   TRUST ITEMS
=========================================================== */

.trust-item{

    transition:

        transform .3s ease,

        color .3s ease;

}

.trust-item:hover{

    transform:translateY(-4px);

}

.trust-icon{

    transition:

        transform .35s ease;

}

.trust-item:hover .trust-icon{

    transform:

        rotate(12deg)

        scale(1.15);

}


/* ===========================================================
   BUTTON SHINE
=========================================================== */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-150%);

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

}

.btn:hover::before{

    transform:translateX(250%);

    transition:transform .8s ease;

}
/* ===========================================================
   PRELOADER
=========================================================== */

#preloader{

    animation:fadeIn .4s ease;

}

.loader-logo{

    animation:

        float 3s ease-in-out infinite,

        pulse 2.5s ease-in-out infinite;

}

.loader-text{

    animation:fadeIn 1.2s ease;

}


/* ===========================================================
   SCROLL PROGRESS BAR
=========================================================== */

#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary-blue),
        var(--primary-orange)
    );

    z-index:9999;

    transition:width .15s linear;

}


/* ===========================================================
   SCROLL REVEAL
=========================================================== */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/* ===========================================================
   READY-TO-USE ANIMATION CLASSES
=========================================================== */

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-in{

    animation:fadeIn .8s ease both;

}

.slide-left{

    animation:slideLeft .8s ease both;

}

.slide-right{

    animation:slideRight .8s ease both;

}

.scale-in{

    animation:scaleIn .7s ease both;

}


/* ===========================================================
   STAGGER ANIMATIONS
=========================================================== */

.stagger>*{

    opacity:0;

    animation:fadeUp .7s ease forwards;

}

.stagger>*:nth-child(1){

    animation-delay:.05s;

}

.stagger>*:nth-child(2){

    animation-delay:.15s;

}

.stagger>*:nth-child(3){

    animation-delay:.25s;

}

.stagger>*:nth-child(4){

    animation-delay:.35s;

}

.stagger>*:nth-child(5){

    animation-delay:.45s;

}

.stagger>*:nth-child(6){

    animation-delay:.55s;

}


/* ===========================================================
   IMAGE HOVER
=========================================================== */

.card-image img,
.case-image img,
.resource-image img{

    transition:

        transform .6s ease,

        filter .4s ease;

}

.card-image:hover img,
.case-image:hover img,
.resource-image:hover img{

    transform:scale(1.05);

}


/* ===========================================================
   FOOTER SOCIAL ICONS
=========================================================== */

.footer-social a{

    transition:

        transform .3s ease,

        background-color .3s ease,

        color .3s ease;

}

.footer-social a:hover{

    transform:

        translateY(-4px)

        scale(1.08);

}


/* ===========================================================
   BACK TO TOP
=========================================================== */

#backToTop{

    transition:

        transform .35s ease,

        opacity .35s ease,

        background-color .35s ease;

}

#backToTop:hover{

    transform:

        translateY(-8px)

        scale(1.08);

}


/* ===========================================================
   ANNOUNCEMENT BAR
=========================================================== */

.announcement-bar{

    animation:fadeIn .8s ease;

}


/* ===========================================================
   LOGO HOVER
=========================================================== */

.logo img{

    transition:

        transform .35s ease;

}

.logo:hover img{

    transform:scale(1.05);

}
/* ===========================================================
   ACCESSIBILITY
=========================================================== */

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

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation-duration:0.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:0.01ms !important;

        scroll-behavior:auto !important;

    }

}


/* ===========================================================
   TOUCH DEVICES
   Disable unnecessary hover transforms
=========================================================== */

@media (hover:none){

    .btn:hover,

    .service-card:hover,

    .floating-card:hover,

    .trust-item:hover,

    .logo:hover img,

    .footer-social a:hover,

    #backToTop:hover,

    .card-image:hover img,

    .case-image:hover img,

    .resource-image:hover img{

        transform:none;

    }

}


/* ===========================================================
   HOVER CAPABLE DEVICES
=========================================================== */

@media (hover:hover){

    .btn{

        transition:

            transform .25s ease,

            box-shadow .25s ease,

            background-color .25s ease,

            color .25s ease;

    }

    .btn:hover{

        transform:translateY(-2px);

    }

}


/* ===========================================================
   GPU HELPERS
=========================================================== */

.gpu{

    transform:translateZ(0);

    will-change:transform;

}


/* ===========================================================
   ANIMATION DELAYS
=========================================================== */

.delay-1{

    animation-delay:.1s;

}

.delay-2{

    animation-delay:.2s;

}

.delay-3{

    animation-delay:.3s;

}

.delay-4{

    animation-delay:.4s;

}

.delay-5{

    animation-delay:.5s;

}


/* ===========================================================
   ANIMATION DURATIONS
=========================================================== */

.duration-fast{

    animation-duration:.4s;

}

.duration-normal{

    animation-duration:.8s;

}

.duration-slow{

    animation-duration:1.3s;

}


/* ===========================================================
   LOOPING UTILITIES
=========================================================== */

.float{

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

}

.float-slow{

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

}

.pulse{

    animation:pulse 2.5s infinite;

}


/* ===========================================================
   PAGE LOADED STATE
=========================================================== */

body.loaded #preloader{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .5s ease,

        visibility .5s ease;

}


/* ===========================================================
   SECTION ENTRANCE
=========================================================== */

section{

    animation:fadeIn .4s ease;

}


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

.hero-gradient,
.hero-illustration,
.floating-card,
.service-card,
.btn,
.case-image img,
.card-image img{

    backface-visibility:hidden;

    perspective:1000px;

}


/* ===========================================================
   END OF FILE
=========================================================== */