/* SkillsHR WordPress-style AOS motion compatibility layer.
   Mirrors the motion types used by the original WordPress theme:
   fade-up, zoom-in-up, zoom-in-right and zoom-in-left. */

main {
    overflow-x: clip;
}

.skillshr-aos [data-aos].aos-init {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--skillshr-aos-duration, 900ms);
    transition-delay: var(--skillshr-aos-delay, 0ms);
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform-origin: center center;
}

.skillshr-aos [data-aos="fade-up"].aos-init {
    transform: translate3d(0, 100px, 0);
}

.skillshr-aos [data-aos="zoom-in-up"].aos-init {
    transform: translate3d(0, 100px, 0) scale(.6);
}

.skillshr-aos [data-aos="zoom-in-right"].aos-init {
    transform: translate3d(-100px, 0, 0) scale(.6);
}

.skillshr-aos [data-aos="zoom-in-left"].aos-init {
    transform: translate3d(100px, 0, 0) scale(.6);
}

.skillshr-aos [data-aos].aos-init.aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

/* Keep hidden UI out of the reveal engine until it is actually opened. */
.skillshr-aos .booking-modal [data-aos],
.skillshr-aos [hidden] [data-aos],
.skillshr-aos [data-aos][hidden] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (max-width: 700px) {
    .skillshr-aos [data-aos="fade-up"].aos-init {
        transform: translate3d(0, 70px, 0);
    }

    .skillshr-aos [data-aos="zoom-in-up"].aos-init {
        transform: translate3d(0, 70px, 0) scale(.72);
    }

    .skillshr-aos [data-aos="zoom-in-right"].aos-init {
        transform: translate3d(-70px, 0, 0) scale(.72);
    }

    .skillshr-aos [data-aos="zoom-in-left"].aos-init {
        transform: translate3d(70px, 0, 0) scale(.72);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skillshr-aos [data-aos].aos-init,
    .skillshr-aos [data-aos].aos-init.aos-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}
