/*
==========================================================
Global EuroCareers Theme
Animations Stylesheet

Version: 2.1.0

----------------------------------------------------------
ANIMATIONS

1. Keyframes
2. Fade Animations
3. Movement Animations
4. Scale Animations
5. Hover Effects
6. Image Effects
7. Accessibility
==========================================================
*/


/*==========================================================
1. KEYFRAMES
==========================================================*/


/*----------------------------------------------------------
  Fade Up
----------------------------------------------------------*/

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/*----------------------------------------------------------
  Fade In
----------------------------------------------------------*/

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


/*----------------------------------------------------------
  Zoom In
----------------------------------------------------------*/

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.92);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/*----------------------------------------------------------
  Float
----------------------------------------------------------*/

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}


/*----------------------------------------------------------
  Pulse
----------------------------------------------------------*/

@keyframes pulse {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

}


/*==========================================================
2. FADE ANIMATIONS
==========================================================*/

.fade-up {

    opacity: 0;

    animation:
        fadeUp .8s ease forwards;

}


.fade-in {

    opacity: 0;

    animation:
        fadeIn .8s ease forwards;

}


.zoom-in {

    opacity: 0;

    animation:
        zoomIn .8s ease forwards;

}


/*==========================================================
3. MOVEMENT ANIMATIONS
==========================================================*/

.float {

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

}


/*==========================================================
4. SCALE ANIMATIONS
==========================================================*/

.pulse {

    animation:
        pulse 2s ease-in-out infinite;

}


/*==========================================================
5. HOVER EFFECTS
==========================================================*/


/*----------------------------------------------------------
  Lift
----------------------------------------------------------*/

.hover-lift {

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}


.hover-lift:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-large);

}


/*----------------------------------------------------------
  Scale
----------------------------------------------------------*/

.hover-scale {

    transition:
        transform var(--transition);

}


.hover-scale:hover {

    transform: scale(1.03);

}


/*----------------------------------------------------------
  Gold Glow
----------------------------------------------------------*/

.hover-glow {

    transition:
        box-shadow var(--transition);

}


.hover-glow:hover {

    box-shadow:
        0 18px 45px rgba(
            200,
            150,
            62,
            .28
        );

}


/*==========================================================
6. IMAGE EFFECTS
==========================================================*/

.hero-img,
.about-img {

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

}


.hero-img:hover,
.about-img:hover {

    transform: scale(1.02);

}


/*----------------------------------------------------------
  Generic Image Hover
----------------------------------------------------------*/

.img-zoom {

    overflow: hidden;

}


.img-zoom img {

    transition:
        transform .6s ease;

}


.img-zoom:hover img {

    transform: scale(1.06);

}


/*==========================================================
7. ACCESSIBILITY
==========================================================*/

/*
 * Users who have requested reduced motion should not
 * receive decorative animations.
 */

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

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

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }


    .fade-up,
    .fade-in,
    .zoom-in {

        opacity: 1;

        transform: none;

    }


    .float,
    .pulse {

        animation: none;

    }

}