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

/* ==========================================================================
   Global Animation Settings
   ========================================================================== */
.a2-animation,
.a2-animation::before,
.a2-animation::after {
    transition: all var(--duration, 1s) var(--animation-timing, ease-in-out) var(--delay, 0s) !important;
    transform-origin: var(--origin, center center) !important;
}

/* ==========================================================================
   In/Out Animations
   ========================================================================== */

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

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

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

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

/* Slide animations */
.a2-slideIn {
    opacity: var(--opacityValue, 0);
    transform: translate(var(--initXPos, -100%), var(--initYPos, 0));
}

.a2-animations-trigger.active .a2-slideIn,
.a2-slideIn.active {
    opacity: 1;
    transform: translate(var(--endXPos, 0), var(--endYPos, 0));
}

.a2-slideUp {
    opacity: var(--opacityValue, 0);
    transform: translateY(var(--initPos, 100%));
}

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

.a2-slideDown {
    opacity: var(--opacityValue, 0);
    transform: translateY(var(--initPos, -100%));
}

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

.a2-slideRight {
    opacity: var(--opacityValue, 0);
    transform: translateX(var(--initPos, -100%));
}

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

.a2-slideLeft {
    opacity: var(--opacityValue, 0);
    transform: translateX(var(--initPos, 100%));
}

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

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

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

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

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

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

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

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

.a2-animations-trigger.active .a2-popIn, 
.a2-popIn.active {
    animation: a2-popIn var(--duration, 0.5s) var(--animation-timing, ease-in-out) var(--delay, 0s) forwards;
}

/* Explode animation */
.a2-explode {
    display: inline-block;
    animation: a2-explode var(--duration, 0.5s) var(--animation-timing, ease-in-out) var(--delay, 0s) forwards;
}

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

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

/* Levitate animation */
.a2-levitate {
    animation: a2-levitate var(--duration, 0.5s) var(--animation-timing, ease-in-out) infinite;
}

/* ==========================================================================
   Animations on Interaction
   ========================================================================== */
.a2-hoverScale,
.a2-hoverFade,
.a2-hoverTranslate,
.a2-hoverRotate,
.a2-hoverRotateX,
.a2-hoverRotateY,
.a2-hoverHorizontalFlip,
.a2-hoverVerticalFlip,
.a2-hoverSkew {
    display: inline-block;
}

.a2-hoverTrigger:hover .a2-hoverScale, 
.a2-hoverScale:hover {
    transform: scale(var(--value, 1.1)) !important;
}

.a2-hoverTrigger:hover .a2-hoverFade, 
.a2-hoverFade:hover {
    opacity: var(--value, 0.8) !important;
}

.a2-hoverTrigger:hover .a2-hoverTranslate, 
.a2-hoverTranslate:hover {
    transform: translate(var(--xValue, 5%), var(--yValue, 0)) !important;
}

.a2-hoverTrigger:hover .a2-hoverRotate, 
.a2-hoverRotate:hover {
    transform: rotate(var(--value, 45deg)) !important;
}

.a2-hoverTrigger:hover .a2-hoverRotateX, 
.a2-hoverRotateX:hover {
    transform: rotateX(var(--value, 180deg)) !important;
}

.a2-hoverTrigger:hover .a2-hoverRotateY, 
.a2-hoverRotateY:hover {
    transform: rotateY(var(--value, 180deg)) !important;
}

.a2-hoverTrigger:hover .a2-hoverHorizontalFlip, 
.a2-hoverHorizontalFlip:hover {
    transform: scaleX(-1) !important;
}

.a2-hoverTrigger:hover .a2-hoverVerticalFlip, 
.a2-hoverVerticalFlip:hover {
    transform: scaleY(-1) !important;
}

.a2-hoverTrigger:hover .a2-hoverSkew, 
.a2-hoverSkew:hover {
    transform: skew(var(--xValue, 15deg), var(--yValue, 0)) !important;
}

/**
 * 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).
 * - `--initVal`     : 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(--opacity, 1);
    background: var(--color, #000);
    height: var(--height, 2px);
    top: var(--top, 100%);
    left: var(--left, 0);
    transform: scaleX(var(--initVal, 0));
    transform-origin: var(--origin, center left) !important;
}

.a2-hoverTrigger:hover .a2-hoverGrowLine::after, 
.a2-hoverGrowLine:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/**
 * 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(--opacity, 1);
    background: var(--color, #000);
    border-radius: var(--borderRadius, 50%);
    height: var(--height, 4px);
    width: var(--width, 4px);
    top: var(--top, 100%);
    left: calc(50% - (var(--width, 4px) / 2));
    transform: scale(var(--initVal, 0));
    transform-origin: var(--origin, center center) !important;
}

.a2-hoverTrigger:hover .a2-hoverGrowDot::after, 
.a2-hoverGrowDot:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/**
 * 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:hover img {
    transform: scale(var(--value, 1.1));
}

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

.elementor-editor-active .a2-animation {
    opacity: 0.6;
    transform: translateX(0) translateY(0) scale(1) scaleX(1) scaleY(1);
}

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

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

    30% {
        transform: scale(1.2);
        opacity: 1;
    }

    50% {
        transform: scale(0.95);
        opacity: 1;
    }

    70% {
        transform: scale(1.05);
        opacity: 1;
    }

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

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

    50% {
        transform: translate(var(--endXPos, 0), var(--endYPos, 10px));
    }

    100% {
        transform: translate(var(--initXPos, 0), var(--initYPos, 0));
    }
}

/* Explode */
@keyframes a2-explode {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
      opacity: 1;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }