/**
 * A2 Animations CSS
 * 
 * File: a2-animations.css
 * Description: This file contains custom CSS animations by A2ST.
 * Version: 2.0.0
 * Author: A.Diaz
 * Created: 2024-10-23
 * Last Updated: 2025-03-21
 */

/* ==========================================================================
   Global Animation Settings
   ========================================================================== */
.a2-animation {

    --default-a2animation-delay: 0s;
    --default-a2animation-duration: 1s;
    --default-a2animation-origin: center center;
    --default-a2animation-timing: ease-in-out;

    --default-explode-delay: 0s;
    --default-explode-duration: .5s;
    --default-explode-timing: ease-in-out;
    --default-explode-initValue: 1;
    --default-explode-highValue: 1.5;

    --default-levitate-delay: 0s;
    --default-levitate-duration: .5s;
    --default-levitate-timing: ease-in-out;
    --default-levitate-initXValue: 0;
    --default-levitate-endXValue: 0;
    --default-levitate-initYValue: 0;
    --default-levitate-endYValue: 10px;

    --default-popIn-delay: 0s;
    --default-popIn-duration: .5s;
    --default-popIn-timing: ease-in-out;
    --default-popIn-scale1: 1.2;
    --default-popIn-scale2: 0.95;
    --default-popIn-scale3: 1.05;

    --default-rotate-initValue: 45deg;
    --default-rotate-endValue: 0;
    --default-rotate-opacityValue: 0;

    --default-scale-initValue: 0;
    --default-scale-endValue: 100%;
    --default-scale-opacityValue: 0;

    --default-scaleX-initValue: 0;
    --default-scaleX-endValue: 100%;
    --default-scaleX-opacityValue: 0;

    --default-scaleY-initValue: 0;
    --default-scaleY-endValue: 100%;
    --default-scaleY-opacityValue: 0;

    --default-slide-initXValue: -100%;
    --default-slide-endXValue: 0;
    --default-slide-initYValue: 0;
    --default-slide-endYValue: 0;
    --default-slide-opacityValue: 0;

    --default-slideUp-initValue: 100%;
    --default-slideUp-endValue: 0;
    --default-slideUp-opacityValue: 0;

    --default-slideDown-initValue: -100%;
    --default-slideDown-endValue: 0;
    --default-slideDown-opacityValue: 0;

    --default-slideRight-initValue: -100%;
    --default-slideRight-endValue: 0;
    --default-slideRight-opacityValue: 0;

    --default-slideLeft-initValue: 100%;
    --default-slideLeft-endValue: 0;
    --default-slideLeft-opacityValue: 0;

    --default-staggerText-animation: a2-slideLeft;
    --default-staggerText-delay: 0s;
    --default-staggerText-duration: 1s;
    --default-staggerText-timing: ease-in;
    --default-staggerText-opacityValue: 0;
    --default-staggerText-letterSpacing: 0;

    --default-hoverAnimations-delayIn: 0s;
    --default-hoverAnimations-delayOut: 0s;
    --default-hoverAnimations-duration: 0.5s;
    --default-hoverAnimations-origin: center center;
    --default-hoverAnimations-timing: ease-in-out;

    --default-hoverFade-value: 0.8;
    --default-hoverRotate-value: 45deg;
    --default-hoverRotateX-value: 45deg;
    --default-hoverRotateY-value: 45deg;
    --default-hoverScale-value: 1.1;
    --default-hoverSkew-xValue: 15deg;
    --default-hoverSkew-yValue: 0;
    --default-hoverTranslate-xValue: 10px;
    --default-hoverTranslate-yValue: 0;

    --default-hoverGrowDot-borderRadius: 50%;
    --default-hoverGrowDot-colorValue: #000;
    --default-hoverGrowDot-opacityValue: 1;
    --default-hoverGrowDot-height: 4px;
    --default-hoverGrowDot-width: 4px;
    --default-hoverGrowDot-top: 100%;
    --default-hoverGrowDot-initValue: 0;

    --default-hoverGrowLine-colorValue: #000;
    --default-hoverGrowLine-height: 2px;
    --default-hoverGrowLine-top: 100%;
    --default-hoverGrowLine-left: 0;
    --default-hoverGrowLine-initValue: 0;
    --default-hoverGrowLine-endValue: 1;
    --default-hoverGrowLine-opacityValue: 1;
    --default-hoverImageScale-value: 1.1;

    --default-scaleAndSlide-initScaleValue: 0.8;
    --default-scaleAndSlide-endScaleValue: 1;
    --default-scaleAndSlide-initXValue: 10px;
    --default-scaleAndSlide-endXValue: 0;
    --default-scaleAndSlide-initYValue: 0;
    --default-scaleAndSlide-endYValue: 0;
    --default-scaleAndSlide-opacityValue: 0;

    --default-scaleAndSlideUp-initScaleValue: 0.8;
    --default-scaleAndSlideUp-endScaleValue: 1;
    --default-scaleAndSlideUp-initXValue: 10px;
    --default-scaleAndSlideUp-endXValue: 0;
    --default-scaleAndSlideUp-initYValue: 0;
    --default-scaleAndSlideUp-endYValue: 0;
    --default-scaleAndSlideUp-opacityValue: 0;

    --default-scaleAndSlideDown-initScaleValue: 0.8;
    --default-scaleAndSlideDown-endScaleValue: 1;
    --default-scaleAndSlideDown-initXValue: 10px;
    --default-scaleAndSlideDown-endXValue: 0;
    --default-scaleAndSlideDown-initYValue: 0;
    --default-scaleAndSlideDown-endYValue: 0;
    --default-scaleAndSlideDown-opacityValue: 0;

    --default-scaleAndSlideLeft-initScaleValue: 0.8;
    --default-scaleAndSlideLeft-endScaleValue: 1;
    --default-scaleAndSlideLeft-initXValue: 10px;
    --default-scaleAndSlideLeft-endXValue: 0;
    --default-scaleAndSlideLeft-initYValue: 0;
    --default-scaleAndSlideLeft-endYValue: 0;
    --default-scaleAndSlideLeft-opacityValue: 0;

    --default-scaleAndSlideRight-initScaleValue: 0.8;
    --default-scaleAndSlideRight-endScaleValue: 1;
    --default-scaleAndSlideRight-initXValue: 10px;
    --default-scaleAndSlideRight-endXValue: 0;
    --default-scaleAndSlideRight-initYValue: 0;
    --default-scaleAndSlideRight-endYValue: 0;
    --default-scaleAndSlideRight-opacityValue: 0;

    --default-slideAndRotate-initScaleValue: 0.8;
    --default-slideAndRotate-endScaleValue: 1;
    --default-slideAndRotate-initXValue: 10px;
    --default-slideAndRotate-endXValue: 0;
    --default-slideAndRotate-initYValue: 0;
    --default-slideAndRotate-endYValue: 0;
    --default-slideAndRotate-initDegValue: 45deg;
    --default-slideAndRotate-endDegValue: 0;
    --default-slideAndRotate-opacityValue: 0;

    --default-willChange-value: transform, opacity;
}
/* ==========================================================================
   In/Out Animations
   ========================================================================== */
.a2-entranceAnimation,
.a2-entranceAnimation::before,
.a2-entranceAnimation::after {
    will-change: var(--will-change, var(--default-willChange-value));
    transition: all var(--duration, var(--default-a2animation-duration)) var(--animation-timing, var(--default-a2animation-timing)) var(--delay, var(--default-a2animation-delay)) !important;
    transform-origin: var(--origin, var(--default-a2animation-origin)) !important;
}

/* Explode animation */
.a2-explode {
    display: inline-block;
}

.a2-explode.active,
.a2-animations-trigger.active .a2-explode {
    animation: a2-explode var(--duration, var(--default-explode-duration)) var(--animation-timing, var(--default-explode-timing)) var(--delay, var(--default-explode-delay)) forwards;
}

/* Fade-in animation */
.a2-fadeIn {
    opacity: 0;
}

.a2-fadeIn.active,
.a2-animations-trigger.active .a2-fadeIn {
    opacity: 1;
}

/* Fade-out animation */
.a2-fadeOut {
    opacity: 1;
}

.a2-fadeOut.active,
.a2-animations-trigger.active .a2-fadeOut {
    opacity: 0;
}

/* Levitate animation */
.a2-levitate.active {
    animation: a2-levitate var(--duration, var(--default-levitate-duration)) var(--animation-timing, var(--default-levitate-timing)) var(--delay, var(--default-levitate-delay)) infinite;
}

/* Pop-in animation */
.a2-popIn {
    display: inline-block;
    opacity: 0;
    transform: scale(0);
    animation: none;
}

.a2-popIn.active,
.a2-animations-trigger.active .a2-popIn {
    animation: a2-popIn var(--duration, var(--default-popIn-duration)) var(--animation-timing, var(--default-popIn-timing)) var(--delay, var(--default-popIn-delay)) forwards;
}

/* Rotate animations */
.a2-rotate {
    opacity: var(--opacityValue, var(--default-rotate-opacityValue));
    transform: scale(var(--initValue, var(--default-rotate-initValue)));
}

.a2-rotate.active,
.a2-animations-trigger.active .a2-rotate {
    opacity: 1;
    transform: rotate(var(--endValue, var(--default-rotate-endValue)));
}

/* Scale animations */
.a2-scale {
    opacity: var(--opacityValue, var(--default-scale-opacityValue));
    transform: scale(var(--initValue, var(--default-scale-initValue)));
}

.a2-scale.active,
.a2-animations-trigger.active .a2-scale {
    opacity: 1;
    transform: scale(var(--endValue, var(--default-scale-endValue)));
}

.a2-scaleX {
    opacity: var(--opacityValue, var(--default-scaleX-opacityValue));
    transform: scaleX(var(--initValue, var(--default-scaleX-initValue)));
}

.a2-scaleX.active,
.a2-animations-trigger.active .a2-scaleX {
    opacity: 1;
    transform: scaleX(var(--endValue, var(--default-scaleX-endValue)));
}

.a2-scaleY {
    opacity: var(--opacityValue, var(--default-scaleY-opacityValue));
    transform: scaleY(var(--initValue, var(--default-scaleY-initValue)));
}

.a2-scaleY.active,
.a2-animations-trigger.active .a2-scaleY {
    opacity: 1;
    transform: scaleY(var(--endValue, var(--default-scaleY-endValue)));
}

/* Slide animations */
.a2-slide {
    opacity: var(--opacityValue, var(--default-slide-opacityValue));
    transform: translate(var(--initXValue, var(--default-slide-initXValue)), var(--initYValue, var(--default-slide-initYValue)));
}

.a2-slide.active,
.a2-animations-trigger.active .a2-slid {
    opacity: 1;
    transform: translate(var(--endXValue, var(--default-slide-endXValue)), var(--endYValue, var(--default-slide-endYValue)));
}

.a2-slideUp {
    opacity: var(--opacityValue, var(--default-slideUp-opacityValue));
    transform: translateY(var(--initValue, var(--default-slideUp-initValue)));
}

.a2-slideUp.active,
.a2-animations-trigger.active .a2-slideUp {
    opacity: 1;
    transform: translateY(var(--endValue, var(--default-slideUp-endValue)));
}

.a2-slideDown {
    opacity: var(--opacityValue, var(--default-slideDown-opacityValue));
    transform: translateY(var(--initValue, var(--default-slideDown-initValue)));
}

.a2-slideDown.active,
.a2-animations-trigger.active .a2-slideDown {
    opacity: 1;
    transform: translateY(var(--endValue, var(--default-slideDown-endValue)));
}

.a2-slideRight {
    opacity: var(--opacityValue, var(--default-slideRight-opacityValue));
    transform: translateX(var(--initValue, var(--default-slideRight-initValue)));
}

.a2-slideRight.active,
.a2-animations-trigger.active .a2-slideRight {
    opacity: 1;
    transform: translateX(var(--endValue, var(--default-slideRight-endValue)));
}

.a2-slideLeft {
    opacity: var(--opacityValue, var(--default-slideLeft-opacityValue));
    transform: translateX(var(--initValue, var(--default-slideLeft-initValue)));
}

.a2-slideLeft.active,
.a2-animations-trigger.active .a2-slideLeft {
    opacity: 1;
    transform: translateX(var(--endValue, var(--default-slideLeft-endValue)));
}

/* Typwriter animation */
.a2-typewriter {
    opacity: 0;
    transition: all 0.1s ease-in-out !important;
}

.a2-typewriter.active {
    opacity: 1;
}

/* Staggered Text animation */
.a2-staggerText {
    opacity: var(--opacityValue, var(--default-staggerText-opacityValue));

}
  
.a2-staggerText.active {
    opacity: 1;
}

.a2-staggerText .a2-stagger-wrapper > span {
    display: inline-block;
    letter-spacing: var(--letterSpacing, var(--default-staggerText-letterSpacing));
    opacity: 0;
    animation: var(--staggerAnimation, var(--default-staggerText-animation)) var(--duration, var(--default-staggerText-duration)) var(--timing, var(--default-staggerText-timing)) var(--delay, var(--default-staggerText-delay)) forwards;
}

/* ==========================================================================
   Animations on Interaction
   ========================================================================== */
.a2-hoverAnimation.hoverable,
.a2-hoverAnimation.hoverable::before,
.a2-hoverAnimation.hoverable::after {
    will-change: var(--will-change, var(--default-willChange-value));
    transition: all var(--hover-duration, var(--default-hoverAnimations-duration)) var(--animation-timing, var(--default-hoverAnimations-timing)) var(--hover-delay-out, var(--default-hoverAnimations-delayOut)) !important;
    transform-origin: var(--origin, var(--default-hoverAnimations-origin)) !important;
}

.a2-hoverFade,
.a2-hoverRotate,
.a2-hoverRotateX,
.a2-hoverRotateY,
.a2-hoverScale,
.a2-hoverSkew,
.a2-hoverTranslate,
.a2-hoverHorizontalFlip,
.a2-hoverVerticalFlip {
    display: inline-block;
}

.a2-hoverFade.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverFade {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    opacity: var(--value, var(--default-hoverFade-value)) !important;
}

.a2-hoverRotate.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverRotate {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: rotate(var(--value, var(--default-hoverRotate-value))) !important;
}

.a2-hoverRotateX.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverRotateX {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: rotateX(var(--value, var(--default-hoverRotateX-value))) !important;
}

.a2-hoverRotateY.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverRotateY {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: rotateY(var(--value, var(--default-hoverRotateY-value))) !important;
}

.a2-hoverScale.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverScale {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: scale(var(--value, var(--default-hoverScale-value))) !important;
}

.a2-hoverSkew.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverSkew {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: skew(var(--xValue, var(--default-hoverSkew-xValue)), var(--yValue, var(--default-hoverSkew-yValue))) !important;
}

.a2-hoverTranslate.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverTranslate {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: translate(var(--xValue, var(--default-hoverTranslate-xValue)), var(--yValue, var(--default-hoverTranslate-yValue))) !important;
}

.a2-hoverHorizontalFlip.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverHorizontalFlip {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: scaleX(-1) !important;
}

.a2-hoverVerticalFlip.hoverable:hover,
.a2-hoverTrigger.hoverable:hover .a2-hoverVerticalFlip {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    transform: scaleY(-1) !important;
}

/**
 * Growing Dot on Hover
 *
 * Creates an animated line that grows horizontally on hover. Configurable options include:
 * 
 * - `--opacity`        : Starting Opacity; default is 1.
 * - `--color`          : Dot color; default is black.
 * - `--borderRadius`   : Border Radius; default is 50%, rounded Dot.
 * - `--height`         : Dot height in pixels; default is 4px.
 * - `--width`          : Dot width in pixels; default is 4px.
 * - `--top`            : Vertical position of the line; default is 120% (below the element).
 * - `--initVal`        : Initial size of the dot; default is 0.
 * - `--origin`         : Transform origin; default is `center center`.
 */
 .a2-hoverGrowDot {
    position: relative;
    display: inline-block;
}

.a2-hoverGrowDot h1,
.a2-hoverGrowDot h2,
.a2-hoverGrowDot h3,
.a2-hoverGrowDot h4,
.a2-hoverGrowDot h5,
.a2-hoverGrowDot h6,
.a2-hoverGrowDot p,
.a2-hoverGrowDot span {
    margin: 0;
    padding: 0;
}

.a2-hoverGrowDot::after {
    content: '';
    position: absolute;
    opacity: var(--opacityValue, var(--default-hoverGrowDot-opacityValue));
    background: var(--colorValue, var(--default-hoverGrowDot-colorValue));
    border-radius: var(--borderRadius, var(--default-hoverGrowDot-borderRadius));
    height: var(--height, var(--default-hoverGrowDot-height));
    width: var(--width, var(--default-hoverGrowDot-width));
    top: var(--top, var(--default-hoverGrowDot-top));
    left: calc(50% - (var(--width, var(--default-hoverGrowDot-width)) / 2));
    transform: scale(var(--initValue, var(--default-hoverGrowDot-initValue)));
}

.a2-hoverGrowDot:hover::after,
.a2-hoverTrigger:hover .a2-hoverGrowDot::after {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    opacity: 1;
    transform: scaleX(1);
}

/**
 * Horizontal Growing Line on Hover
 *
 * Creates an animated line that grows horizontally on hover. Configurable options include:
 * 
 * - `--opacity`     : Starting Opacity; default is 1.
 * - `--color`       : Line color; default is black.
 * - `--height`      : Line thickness in pixels; default is 2px.
 * - `--top`         : Vertical position of the line; default is 120% (below the element).
 * - `--initValue`     : Initial scale of the line on X-axis; default is 0 (no width).
 * - `--origin`      : Transform origin; default is `center left` for left-to-right growth.
 */
.a2-hoverGrowLine {
    position: relative;
    display: inline-block;
}

.a2-hoverGrowLine h1,
.a2-hoverGrowLine h2,
.a2-hoverGrowLine h3,
.a2-hoverGrowLine h4,
.a2-hoverGrowLine h5,
.a2-hoverGrowLine h6,
.a2-hoverGrowLine p,
.a2-hoverGrowLine span {
    margin: 0;
    padding: 0;
}

.a2-hoverGrowLine::after {
    content: '';
    position: absolute;
    width: 100%;
    opacity: var(--opacityValue, var(--default-hoverGrowLine-opacityValue));
    background: var(--colorValue, var(--default-hoverGrowLine-colorValue));
    height: var(--height, var(--default-hoverGrowLine-height));
    top: var(--top, var(--default-hoverGrowLine-top));
    left: var(--left, var(--default-hoverGrowLine-left));
    transform: scaleX(var(--initValue, var(--default-hoverGrowLine-initValue)));
}

.a2-hoverGrowLine:hover::after,
.a2-hoverTrigger:hover .a2-hoverGrowLine::after {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn)) !important;
    opacity: 1;
    transform: scaleX(var(--endValue, var(--default-hoverGrowLine-endValue)));
}

/**
 * Zoom Image in Container on Hover
 *
 * Creates a zoom effect on an image. Configurable options include:
 * 
 * - `--value`     : Transform scale value; default is 1.1.
 */
.a2-hoverImageScale {
    overflow: hidden;
    position: relative;
}

.a2-hoverImageScale img {
    width: 100%;
    height: 100%;
}

.a2-hoverImageScale.hoverable:hover img {
    transition-delay: var(--hover-delay-in, var(--default-hoverAnimations-delayIn));
    transform: scale(var(--value, var(--default-hoverImageScale-value)));
}

/* ==========================================================================
   Global Styles for Editor Mode
   ========================================================================== */

.elementor-editor-active .a2-animation {
    opacity: 0.6;
    transform: none !important;
}


/* ==========================================================================
   Keyframes
   ========================================================================== */

/* Explode */
@keyframes a2-explode {
    0% {
      transform: scale(var(--initValue, var(--default-explode-initValue)));
    }
    50% {
      transform: scale(var(--highValue, var(--default-explode-highValue)));
      opacity: 1;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
}

/* Fade */
@keyframes a2-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Levitate */
@keyframes a2-levitate {
    0% {
        transform: translate(var(--initXValue, var(--default-levitate-initXValue)), var(--initYValue, var(--default-levitate-initYValue)));
    }

    50% {
        transform: translate(var(--endXValue, var(--default-levitate-endXValue)), var(--endYValue, var(--default-levitate-endYValue)));
    }

    100% {
        transform: translate(var(--initXValue, var(--default-levitate-initXValue)), var(--initYValue, var(--default-levitate-initYValue)));
    }
}

/* PopIn */
@keyframes a2-popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    30% {
        transform: scale(var(--scale1, var(--default-popIn-scale1)));
        opacity: 1;
    }

    50% {
        transform: scale(var(--scale2, var(--default-popIn-scale2)));
        opacity: 1;
    }

    70% {
        transform: scale(var(--scale3, var(--default-popIn-scale3)));
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Rotate */
@keyframes a2-rotate {
    0% {
        opacity: var(--opacityValue, var(--default-rotate-opacityValue));
        transform: rotate(var(--initValue, var(--default-rotate-initValue)));
    }
    100% {
        opacity: 1;
        transform: rotate(var(--endValue, var(--default-rotate-endValue)));
    }
}

/* Scale */
@keyframes a2-scale {
    0% {
        opacity: var(--opacityValue, var(--default-scale-opacityValue));
        transform: scale(var(--initValue, var(--default-scale-initValue)));
    }
    100% {
        opacity: 1;
        transform: scale(var(--endValue, var(--default-scale-endValue)));
    }
}

/* ScaleX */
@keyframes a2-scaleX {
    0% {
        opacity: var(--opacityValue, var(--default-scaleX-opacityValue));
        transform: scaleX(var(--initValue, var(--default-scaleX-initValue)));
    }
    100% {
        opacity: 1;
        transform: scaleX(var(--endValue, var(--default-scaleX-endValue)));
    }
}

/* ScaleY */
@keyframes a2-scaleY {
    0% {
        opacity: var(--opacityValue, var(--default-scaleY-opacityValue));
        transform: scaleY(var(--initValue, var(--default-scaleY-initValue)));
    }
    100% {
        opacity: 1;
        transform: scaleY(var(--endValue, var(--default-scaleY-endValue)));
    }
}

/* Slide */
@keyframes a2-slide {
    0% {
        opacity: var(--opacityValue, var(--default-slide-opacityValue));
        transform: translate(var(--initXValue, var(--default-slide-initXValue)), var(--initYValue, var(--default-slide-initYValue)));
    }
    100% {
        opacity: 1;
        transform: translate(var(--endXValue, var(--default-slide-endXValue)), var(--endYValue, var(--default-slide-endYValue)));
    }
}

/* Slide Up */
@keyframes a2-slideUp {
    0% {
        opacity: var(--opacityValue, var(--default-slideUp-opacityValue));
        transform: translateY(var(--initValue, var(--default-slideUp-initValue)));
    }
    100% {
        opacity: 1;
        transform: translateY(var(--endValue, var(--default-slideUp-endValue)));
    }
}

/* Slide Down */
@keyframes a2-slideDown {
    0% {
        opacity: var(--opacityValue, var(--default-slideDown-opacityValue));
        transform: translateY(var(--initValue, var(--default-slideDown-initValue)));
    }
    100% {
        opacity: 1;
        transform: translateY(var(--endValue, --default-slideDown-endValue));
    }
}

/* Slide Right */
@keyframes a2-slideRight {
    0% {
        opacity: var(--opacityValue, var(--default-slideRight-opacityValue));
        transform: translateX(var(--initValue, var(--default-slideRight-initValue)));
    }
    100% {
        opacity: 1;
        transform: translateX(var(--endValue, var(--default-slideRight-endValue)));
    }
}

/* Slide Left */
@keyframes a2-slideLeft {
    0% {
        opacity: var(--opacityValue, var(--default-slideLeft-opacityValue));
        transform: translateX(var(--initValue, var(--default-slideLeft-initValue)));
    }
    100% {
        opacity: 1;
        transform: translateX(var(--endValue, var(--default-slideLeft-endValue)));
    }
}

/* Combined animations */
/* ------------------- */
/* Scale and Slide */
@keyframes a2-scale-slide {
    0% {
        opacity: var(--opacityValue, var(--default-scaleAndSlide-opacityValue));
        transform: scale(var(--initScaleValue, var(--default-scaleAndSlide-initScaleValue))) translate(var(--initXValue, var(--default-scaleAndSlide-initXValue)), var(--initYValue, var(--default-scaleAndSlide-initYValue)));
    }
    100% {
        opacity: 1;
        transform: scale(var(--endScaleValue, var(--default-scaleAndSlide-endScaleValue))) translate(var(--endXValue, var(--default-scaleAndSlide-endXValue)), var(--endYValue, var(--default-scaleAndSlide-endYValue)));
    }
}

/* Scale and Slide Up */
@keyframes a2-scale-slideUp {
    0% {
        opacity: var(--opacityValue, var(--default-scaleAndSlideUp-opacityValue));
        transform: scale(var(--initScaleValue, var(--default-scaleAndSlideUp-initScaleValue))) translateY(var(--initYValue, var(--default-scaleAndSlideUp-initYValue)));
    }
    100% {
        opacity: 1;
        transform: scale(var(--endScaleValue, var(--default-scaleAndSlideUp-endScaleValue))) translateY(var(--endYValue, var(--default-scaleAndSlideUp-endYValue)));
    }
}

/* Scale and Slide Down */
@keyframes a2-scale-slideDown {
    0% {
        opacity: var(--opacityValue, var(--default-scaleAndSlideDown-opacityValue));
        transform: scale(var(--initScaleValue, var(--default-scaleAndSlideDown-initScaleValue))) translateY(var(--initYValue, var(--default-scaleAndSlideDown-initYValue)));
    }
    100% {
        opacity: 1;
        transform: scale(var(--endScaleValue, var(--default-scaleAndSlideDown-endScaleValue))) translateY(var(--endYValue, var(--default-scaleAndSlideDown-endYValue)));
    }
}

/* Scale and Slide Left */
@keyframes a2-scale-slideLeft {
    0% {
        opacity: var(--opacityValue, var(--default-scaleAndSlideLeft-opacityValue));
        transform: scale(var(--initScaleValue, var(--default-scaleAndSlideLeft-initScaleValue))) translateX(var(--initXValue, var(--default-scaleAndSlideLeft-initXValue)));
    }
    100% {
        opacity: 1;
        transform: scale(var(--endScaleValue, var(--default-scaleAndSlideLeft-endScaleValue))) translateX(var(--endXValue, var(--default-scaleAndSlideLeft-endXValue)));
    }
}

/* Scale and Slide Right */
@keyframes a2-scale-slideRight {
    0% {
        opacity: var(--opacityValue, var(--default-scaleAndSlideRight-opacityValue));
        transform: scale(var(--initScaleValue, var(--default-scaleAndSlideRight-initScaleValue))) translateX(var(--initXValue, var(--default-scaleAndSlideRight-initXValue)));
    }
    100% {
        opacity: 1;
        transform: scale(var(--endScaleValue, var(--default-scaleAndSlideRight-endScaleValue))) translateX(var(--endXValue, var(--default-scaleAndSlideRight-endXValue)));
    }
}

/* Slide and Rotate */
@keyframes a2-slide-rotate {
    0% {
        opacity: var(--opacityValue, var(--default-slideAndRotate-opacityValue));
        transform: translate(var(--initXValue, var(--default-slideAndRotate-initXValue)), var(--initYValue, var(--default-slideAndRotate-initYValue))) rotate(var(--initDegValue, var(--default-slideAndRotate-initDegValue)));
    }
    100% {
        opacity: 1;
        transform: translate(var(--endXValue, var(--default-slideAndRotate-endXValue)), var(--endYValue, var(--default-slideAndRotate-endYValue))) rotate(var(--endDegValue, var(--default-slideAndRotate-endDegValue)));
    }
}