/*!
 * YTP Extras - extra animations for YOOtheme Pro / UIkit
 *
 * Each class follows UIkit's "uk-animation-<name>" convention so it works
 * with the scrollspy-based animation system of the YOOtheme Pro builder
 * (elements, sections) and with any component that accepts an animation
 * class (switcher, toggle...). UIkit's own .uk-animation-reverse modifier
 * also applies to these classes.
 *
 * Every class selector is deliberately doubled (.a.a): UIkit >= 3.25 (as
 * bundled with YOOtheme Pro 5) ships a catch-all reset
 * "[class*=uk-animation-]{animation:.5s ease-out both}" that loads after
 * this file and would otherwise clear our animation-name at equal
 * specificity. The doubled selector outranks the reset but stays below
 * UIkit's intentional guards (slideshow inactive items, hover toggles).
 */

/* ----------------------------------------------------------------- fades */

.uk-animation-x-fade-slow.uk-animation-x-fade-slow {
    animation: ytx-fade 1.6s ease-out both;
}

.uk-animation-x-blur-in.uk-animation-x-blur-in {
    animation: ytx-blur-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.uk-animation-x-blur-in-up.uk-animation-x-blur-in-up {
    animation: ytx-blur-in-up 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.uk-animation-x-blur-in-down.uk-animation-x-blur-in-down {
    animation: ytx-blur-in-down 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes ytx-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes ytx-blur-in {
    0% { opacity: 0; filter: blur(14px); }
    100% { opacity: 1; filter: blur(0); }
}

@keyframes ytx-blur-in-up {
    0% { opacity: 0; filter: blur(10px); transform: translateY(40px); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes ytx-blur-in-down {
    0% { opacity: 0; filter: blur(10px); transform: translateY(-40px); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ----------------------------------------------------------------- zooms */

.uk-animation-x-zoom-in.uk-animation-x-zoom-in {
    animation: ytx-zoom-in 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.uk-animation-x-zoom-in-bounce.uk-animation-x-zoom-in-bounce {
    animation: ytx-zoom-in-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.uk-animation-x-zoom-out.uk-animation-x-zoom-out {
    animation: ytx-zoom-out 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes ytx-zoom-in {
    0% { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes ytx-zoom-in-bounce {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes ytx-zoom-out {
    0% { opacity: 0; transform: scale(1.4); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------- large slides */

.uk-animation-x-slide-top-large.uk-animation-x-slide-top-large {
    animation: ytx-slide-top-large 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.uk-animation-x-slide-bottom-large.uk-animation-x-slide-bottom-large {
    animation: ytx-slide-bottom-large 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.uk-animation-x-slide-left-large.uk-animation-x-slide-left-large {
    animation: ytx-slide-left-large 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.uk-animation-x-slide-right-large.uk-animation-x-slide-right-large {
    animation: ytx-slide-right-large 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes ytx-slide-top-large {
    0% { opacity: 0; transform: translateY(-150px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ytx-slide-bottom-large {
    0% { opacity: 0; transform: translateY(150px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ytx-slide-left-large {
    0% { opacity: 0; transform: translateX(-150px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes ytx-slide-right-large {
    0% { opacity: 0; transform: translateX(150px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------- bounces */

.uk-animation-x-bounce-up.uk-animation-x-bounce-up {
    animation: ytx-bounce-up 0.9s ease-out both;
}

.uk-animation-x-bounce-down.uk-animation-x-bounce-down {
    animation: ytx-bounce-down 0.9s ease-out both;
}

@keyframes ytx-bounce-up {
    0% { opacity: 0; transform: translateY(90px); }
    40% { opacity: 1; transform: translateY(-18px); }
    65% { transform: translateY(8px); }
    85% { transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ytx-bounce-down {
    0% { opacity: 0; transform: translateY(-90px); }
    40% { opacity: 1; transform: translateY(18px); }
    65% { transform: translateY(-8px); }
    85% { transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------- elastic */

.uk-animation-x-elastic-left.uk-animation-x-elastic-left {
    animation: ytx-elastic-left 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.uk-animation-x-elastic-right.uk-animation-x-elastic-right {
    animation: ytx-elastic-right 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes ytx-elastic-left {
    0% { opacity: 0; transform: translateX(-120px); }
    45% { opacity: 1; transform: translateX(20px); }
    65% { transform: translateX(-10px); }
    82% { transform: translateX(5px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes ytx-elastic-right {
    0% { opacity: 0; transform: translateX(120px); }
    45% { opacity: 1; transform: translateX(-20px); }
    65% { transform: translateX(10px); }
    82% { transform: translateX(-5px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------------------------- 3D flips */

.uk-animation-x-flip-up.uk-animation-x-flip-up,
.uk-animation-x-flip-down.uk-animation-x-flip-down,
.uk-animation-x-flip-left.uk-animation-x-flip-left,
.uk-animation-x-flip-right.uk-animation-x-flip-right {
    backface-visibility: hidden;
}

.uk-animation-x-flip-up.uk-animation-x-flip-up {
    animation: ytx-flip-up 0.85s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    transform-origin: center bottom;
}

.uk-animation-x-flip-down.uk-animation-x-flip-down {
    animation: ytx-flip-down 0.85s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    transform-origin: center top;
}

.uk-animation-x-flip-left.uk-animation-x-flip-left {
    animation: ytx-flip-left 0.85s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.uk-animation-x-flip-right.uk-animation-x-flip-right {
    animation: ytx-flip-right 0.85s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes ytx-flip-up {
    0% { opacity: 0; transform: perspective(900px) rotateX(70deg); }
    100% { opacity: 1; transform: perspective(900px) rotateX(0); }
}

@keyframes ytx-flip-down {
    0% { opacity: 0; transform: perspective(900px) rotateX(-70deg); }
    100% { opacity: 1; transform: perspective(900px) rotateX(0); }
}

@keyframes ytx-flip-left {
    0% { opacity: 0; transform: perspective(900px) rotateY(-70deg); }
    100% { opacity: 1; transform: perspective(900px) rotateY(0); }
}

@keyframes ytx-flip-right {
    0% { opacity: 0; transform: perspective(900px) rotateY(70deg); }
    100% { opacity: 1; transform: perspective(900px) rotateY(0); }
}

/* ---------------------------------------------------------- tilt & swing */

.uk-animation-x-tilt-left.uk-animation-x-tilt-left {
    animation: ytx-tilt-left 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.uk-animation-x-tilt-right.uk-animation-x-tilt-right {
    animation: ytx-tilt-right 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.uk-animation-x-swing.uk-animation-x-swing {
    animation: ytx-swing 1s ease-out both;
    transform-origin: center top;
}

@keyframes ytx-tilt-left {
    0% { opacity: 0; transform: translateX(-80px) rotate(-8deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes ytx-tilt-right {
    0% { opacity: 0; transform: translateX(80px) rotate(8deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes ytx-swing {
    0% { opacity: 0; transform: perspective(900px) rotateX(-80deg); }
    45% { opacity: 1; transform: perspective(900px) rotateX(18deg); }
    70% { transform: perspective(900px) rotateX(-8deg); }
    88% { transform: perspective(900px) rotateX(3deg); }
    100% { opacity: 1; transform: perspective(900px) rotateX(0); }
}

/* ----------------------------------------------------------------- skews */

.uk-animation-x-skew-left.uk-animation-x-skew-left {
    animation: ytx-skew-left 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.uk-animation-x-skew-right.uk-animation-x-skew-right {
    animation: ytx-skew-right 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes ytx-skew-left {
    0% { opacity: 0; transform: translateX(-70px) skewX(12deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes ytx-skew-right {
    0% { opacity: 0; transform: translateX(70px) skewX(-12deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0); }
}

/* -------------------------------------------------------------- rotation */

.uk-animation-x-rotate-in.uk-animation-x-rotate-in {
    animation: ytx-rotate-in 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.uk-animation-x-spin-in.uk-animation-x-spin-in {
    animation: ytx-spin-in 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes ytx-rotate-in {
    0% { opacity: 0; transform: rotate(-25deg) scale(0.7); }
    100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes ytx-spin-in {
    0% { opacity: 0; transform: rotate(-200deg) scale(0.2); }
    100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* ------------------------------------------------------ clip-path reveals */

.uk-animation-x-reveal-left.uk-animation-x-reveal-left {
    animation: ytx-reveal-left 0.8s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.uk-animation-x-reveal-right.uk-animation-x-reveal-right {
    animation: ytx-reveal-right 0.8s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.uk-animation-x-reveal-top.uk-animation-x-reveal-top {
    animation: ytx-reveal-top 0.8s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.uk-animation-x-reveal-bottom.uk-animation-x-reveal-bottom {
    animation: ytx-reveal-bottom 0.8s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes ytx-reveal-left {
    0% { opacity: 1; clip-path: inset(0 100% 0 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ytx-reveal-right {
    0% { opacity: 1; clip-path: inset(0 0 0 100%); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ytx-reveal-top {
    0% { opacity: 1; clip-path: inset(0 0 100% 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ytx-reveal-bottom {
    0% { opacity: 1; clip-path: inset(100% 0 0 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---------------------------------------------------------- accessibility */

@media (prefers-reduced-motion: reduce) {
    [class*='uk-animation-x-'] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}