/* ===== Additional Animations ===== */

/* Fade In Up */
.vewi-modal-wrapper[vewi-data-open-animation=fadeInUp] {
    animation: vewiFadeInUp 0.5s both;
}
@keyframes vewiFadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fade In Down */
.vewi-modal-wrapper[vewi-data-open-animation=fadeInDown] {
    animation: vewiFadeInDown 0.5s both;
}
@keyframes vewiFadeInDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fade In Left */
.vewi-modal-wrapper[vewi-data-open-animation=fadeInLeft] {
    animation: vewiFadeInLeft 0.5s both;
}
@keyframes vewiFadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Fade In Right */
.vewi-modal-wrapper[vewi-data-open-animation=fadeInRight] {
    animation: vewiFadeInRight 0.5s both;
}
@keyframes vewiFadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Light Speed In */
.vewi-modal-wrapper[vewi-data-open-animation=lightSpeedIn] {
    animation: vewiLightSpeedIn 0.5s ease-out both;
}
@keyframes vewiLightSpeedIn {
    from { transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { transform: skewX(20deg); opacity: 1; }
    80% { transform: skewX(-5deg); }
    to { transform: translateX(0); }
}

/* Jack In The Box */
.vewi-modal-wrapper[vewi-data-open-animation=jackInTheBox] {
    animation: vewiJackInTheBox 0.5s both;
}
@keyframes vewiJackInTheBox {
    from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
    50% { transform: rotate(-10deg); }
    70% { transform: rotate(3deg); }
    to { opacity: 1; transform: scale(1); }
}

/* Roll In */
.vewi-modal-wrapper[vewi-data-open-animation=rollIn] {
    animation: vewiRollIn 0.6s both;
}
@keyframes vewiRollIn {
    from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    to { opacity: 1; transform: translateX(0) rotate(0); }
}

/* Back In Down */
.vewi-modal-wrapper[vewi-data-open-animation=backInDown] {
    animation: vewiBackInDown 0.8s both;
}
@keyframes vewiBackInDown {
    0% { transform: translateY(-1000px) scale(0.7); opacity: 0.7; }
    80% { transform: translateY(0) scale(0.7); opacity: 0.7; }
    to { transform: scale(1); opacity: 1; }
}
/* Back In Up */
.vewi-modal-wrapper[vewi-data-open-animation=backInUp] {
    animation: vewiBackInUp 0.8s both;
}
@keyframes vewiBackInUp {
    0% { transform: translateY(1000px) scale(0.7); opacity: 0.7; }
    80% { transform: translateY(0) scale(0.7); opacity: 0.7; }
    to { transform: scale(1); opacity: 1; }
}
/* Back In Left */
.vewi-modal-wrapper[vewi-data-open-animation=backInLeft] {
    animation: vewiBackInLeft 0.8s both;
}
@keyframes vewiBackInLeft {
    0% { transform: translateX(-1000px) scale(0.7); opacity: 0.7; }
    80% { transform: translateX(0) scale(0.7); opacity: 0.7; }
    to { transform: scale(1); opacity: 1; }
}
/* Back In Right */
.vewi-modal-wrapper[vewi-data-open-animation=backInRight] {
    animation: vewiBackInRight 0.8s both;
}
@keyframes vewiBackInRight {
    0% { transform: translateX(1000px) scale(0.7); opacity: 0.7; }
    80% { transform: translateX(0) scale(0.7); opacity: 0.7; }
    to { transform: scale(1); opacity: 1; }
}

/* Rotate In */
.vewi-modal-wrapper[vewi-data-open-animation=rotateIn] {
    animation: vewiRotateIn 0.6s both;
}
@keyframes vewiRotateIn {
    from { transform: rotate(-180deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
}
/* Rotate In Down Left */
.vewi-modal-wrapper[vewi-data-open-animation=rotateInDownLeft] {
    animation: vewiRotateInDownLeft 0.6s both;
}
@keyframes vewiRotateInDownLeft {
    from { transform: translateY(-100%) rotate(-45deg); transform-origin: left bottom; opacity: 0; }
    to { transform: translateY(0) rotate(0); transform-origin: left bottom; opacity: 1; }
}
/* Rotate In Down Right */
.vewi-modal-wrapper[vewi-data-open-animation=rotateInDownRight] {
    animation: vewiRotateInDownRight 0.6s both;
}
@keyframes vewiRotateInDownRight {
    from { transform: translateY(-100%) rotate(45deg); transform-origin: right bottom; opacity: 0; }
    to { transform: translateY(0) rotate(0); transform-origin: right bottom; opacity: 1; }
}
/* Rotate In Up Left */
.vewi-modal-wrapper[vewi-data-open-animation=rotateInUpLeft] {
    animation: vewiRotateInUpLeft 0.6s both;
}
@keyframes vewiRotateInUpLeft {
    from { transform: translateY(100%) rotate(45deg); transform-origin: left top; opacity: 0; }
    to { transform: translateY(0) rotate(0); transform-origin: left top; opacity: 1; }
}
/* Rotate In Up Right */
.vewi-modal-wrapper[vewi-data-open-animation=rotateInUpRight] {
    animation: vewiRotateInUpRight 0.6s both;
}
@keyframes vewiRotateInUpRight {
    from { transform: translateY(100%) rotate(-45deg); transform-origin: right top; opacity: 0; }
    to { transform: translateY(0) rotate(0); transform-origin: right top; opacity: 1; }
}
/* Swing In */
.vewi-modal-wrapper[vewi-data-open-animation=swingIn] {
    animation: vewiSwingIn 0.6s both;
    transform-origin: top center;
}
@keyframes vewiSwingIn {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-2deg); }
    to { transform: rotate(0); }
}

/* Rubber Band */
.vewi-modal-wrapper[vewi-data-open-animation=rubberBand] {
    animation: vewiRubberBand 0.8s both;
}
@keyframes vewiRubberBand {
    from { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    to { transform: scale3d(1, 1, 1); }
}

/* Tada */
.vewi-modal-wrapper[vewi-data-open-animation=tada] {
    animation: vewiTada 0.8s both;
}
@keyframes vewiTada {
    from { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    to { transform: scale3d(1, 1, 1); }
}

/* Wobble */
.vewi-modal-wrapper[vewi-data-open-animation=wobble] {
    animation: vewiWobble 0.8s both;
}
@keyframes vewiWobble {
    from { transform: translate3d(0, 0, 0); }
    15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
    30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
    45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
    60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
    75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
    to { transform: translate3d(0, 0, 0); }
}

/* Pulse */
.vewi-modal-wrapper[vewi-data-open-animation=pulse] {
    animation: vewiPulse 0.8s both;
}
@keyframes vewiPulse {
    from { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1.05); }
    to { transform: scale3d(1, 1, 1); }
}

/* Heart Beat */
.vewi-modal-wrapper[vewi-data-open-animation=heartBeat] {
    animation: vewiHeartBeat 1s both;
}
@keyframes vewiHeartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.2); }
    28% { transform: scale(1); }
    42% { transform: scale(1.2); }
    70% { transform: scale(1); }
}
.vewi-modal-wrapper[vewi-data-open-animation=fadeIn] {
    animation: vewiFadeIn 0.4s both;
}
@keyframes vewiFadeIn {
    from { opacity: 0; transform: translateY(-20px);}
    to   { opacity: 1; transform: translateY(0);}
}

/* Bounce In */
.vewi-modal-wrapper[vewi-data-open-animation=bounceIn] {
    animation: vewiBounceIn 0.6s both;
}
@keyframes vewiBounceIn {
    0%   { opacity: 0; transform: scale(0.7);}
    60%  { opacity: 1; transform: scale(1.05);}
    80%  { transform: scale(0.95);}
    100% { opacity: 1; transform: scale(1);}
}

/* Flip In X */
.vewi-modal-wrapper[vewi-data-open-animation=flipInX] {
    animation: vewiFlipInX 0.6s both;
}
@keyframes vewiFlipInX {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    40% {
        opacity: 1;
        transform: perspective(400px) rotateX(-20deg);
    }
    60% {
        transform: perspective(400px) rotateX(10deg);
    }
    80% {
        transform: perspective(400px) rotateX(-5deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

/* Zoom In */
.vewi-modal-wrapper[vewi-data-open-animation=zoomIn] {
    animation: vewiZoomIn 0.4s both;
}
@keyframes vewiZoomIn {
    from { opacity: 0; transform: scale(0.7);}
    to   { opacity: 1; transform: scale(1);}
}

/* Slide In Down */
.vewi-modal-wrapper[vewi-data-open-animation=slideInDown] {
    animation: vewiSlideInDown 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes vewiSlideInDown {
    from { 
        opacity: 0; 
        transform: translateY(-200px);
    }
    90% {
        transform: translateY(10px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Slide In Up */
.vewi-modal-wrapper[vewi-data-open-animation=slideInUp] {
    animation: vewiSlideInUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes vewiSlideInUp {
    from { 
        opacity: 0; 
        transform: translateY(200px);
    }
    90% {
        transform: translateY(-10px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}
/* Slide In Left */
.vewi-modal-wrapper[vewi-data-open-animation=slideInLeft] {
    animation: vewiSlideInLeft 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes vewiSlideInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-200px);
    }
    90% {
        transform: translateX(10px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}

/* Slide In Right */
.vewi-modal-wrapper[vewi-data-open-animation=slideInRight] {
    animation: vewiSlideInRight 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes vewiSlideInRight {
    from { 
        opacity: 0; 
        transform: translateX(200px);
    }
    90% {
        transform: translateX(-10px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}


/* Animation Close modal */
 .vewi-modal-wrapper[vewi-data-close-animation=bounceOut]:not(.vewi-active) {
    animation: vewiBounceOut 0.6s both;
}
@keyframes vewiBounceOut {
    20% { transform: scale(1.1); }
    50% { transform: scale(0.9); }
    60% { transform: scale(1.05); }
    80% { transform: scale(0.95); }
    to { transform: scale(1); }
}

/* Fade Out */
 .vewi-modal-wrapper[vewi-data-close-animation=fadeOut]:not(.vewi-active) {
    animation: vewiFadeOut 0.3s both;
}
@keyframes vewiFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Flip Out X */
 .vewi-modal-wrapper[vewi-data-close-animation=flipOutX]:not(.vewi-active) {
    animation: vewiFlipOutX 0.6s both;
    backface-visibility: visible !important;
}
@keyframes vewiFlipOutX {
    from { transform: perspective(400px); }
    30% { opacity: 1; transform: perspective(400px) rotateX(-20deg); }
    to { opacity: 0; transform: perspective(400px) rotateX(90deg); }
}

/* Zoom Out */
 .vewi-modal-wrapper[vewi-data-close-animation=zoomOut]:not(.vewi-active) {
    animation: vewiZoomOut 0.3s both;
}
@keyframes vewiZoomOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.7); }
}

/* Slide Out Down */
 .vewi-modal-wrapper[vewi-data-close-animation=slideOutDown]:not(.vewi-active) {
    animation: vewiSlideOutDown 0.5s both;
}
@keyframes vewiSlideOutDown {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100px); opacity: 0; }
}

/* Slide Out Up */
 .vewi-modal-wrapper[vewi-data-close-animation=slideOutUp]:not(.vewi-active) {
    animation: vewiSlideOutUp 0.5s both;
}
@keyframes vewiSlideOutUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100px); opacity: 0; }
}

/* Slide Out Left */
 .vewi-modal-wrapper[vewi-data-close-animation=slideOutLeft]:not(.vewi-active) {
    animation: vewiSlideOutLeft 0.5s both;
}
@keyframes vewiSlideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-200px); opacity: 0; }
}

/* Slide Out Right */
 .vewi-modal-wrapper[vewi-data-close-animation=slideOutRight]:not(.vewi-active) {
    animation: vewiSlideOutRight 0.5s both;
}
@keyframes vewiSlideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(200px); opacity: 0; }
}

/* Light Speed Out */
 .vewi-modal-wrapper[vewi-data-close-animation=lightSpeedOut]:not(.vewi-active) {
    animation: vewiLightSpeedOut 0.5s ease-in;
}
@keyframes vewiLightSpeedOut {
    from { opacity: 1; transform: translateX(0) skewX(0deg); }
    to { opacity: 0; transform: translateX(100%) skewX(30deg); }
}

/* Roll Out */
 .vewi-modal-wrapper[vewi-data-close-animation=rollOut]:not(.vewi-active) {
    animation: vewiRollOut 0.6s both;
}
@keyframes vewiRollOut {
    from { opacity: 1; transform: translateX(0) rotate(0deg); }
    to { opacity: 0; transform: translateX(100%) rotate(120deg); }
}

/* Back Out Animations */
 .vewi-modal-wrapper[vewi-data-close-animation=backOutUp]:not(.vewi-active) {
    animation: vewiBackOutUp 0.7s both;
}
 .vewi-modal-wrapper[vewi-data-close-animation=backOutDown]:not(.vewi-active) {
    animation: vewiBackOutDown 0.7s both;
}
 .vewi-modal-wrapper[vewi-data-close-animation=backOutLeft]:not(.vewi-active) {
    animation: vewiBackOutLeft 0.7s both;
}
 .vewi-modal-wrapper[vewi-data-close-animation=backOutRight]:not(.vewi-active) {
    animation: vewiBackOutRight 0.7s both;
}

@keyframes vewiBackOutUp {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: translateY(-700px) scale(0.7); opacity: 0.7; }
}

@keyframes vewiBackOutDown {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: translateY(700px) scale(0.7); opacity: 0.7; }
}

@keyframes vewiBackOutLeft {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: translateX(-700px) scale(0.7); opacity: 0.7; }
}

@keyframes vewiBackOutRight {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: translateX(700px) scale(0.7); opacity: 0.7; }
}

/* Rotate Out Animations */
 .vewi-modal-wrapper[vewi-data-close-animation=rotateOut]:not(.vewi-active) {
    animation: vewiRotateOut 0.6s both;
}
 .vewi-modal-wrapper[vewi-data-close-animation=rotateOutDownLeft]:not(.vewi-active) {
    animation: vewiRotateOutDownLeft 0.6s both;
    transform-origin: left bottom;
}
 .vewi-modal-wrapper[vewi-data-close-animation=rotateOutDownRight]:not(.vewi-active) {
    animation: vewiRotateOutDownRight 0.6s both;
    transform-origin: right bottom;
}
 .vewi-modal-wrapper[vewi-data-close-animation=rotateOutUpLeft]:not(.vewi-active) {
    animation: vewiRotateOutUpLeft 0.6s both;
    transform-origin: left bottom;
}
 .vewi-modal-wrapper[vewi-data-close-animation=rotateOutUpRight]:not(.vewi-active) {
    animation: vewiRotateOutUpRight 0.6s both;
    transform-origin: right bottom;
}

@keyframes vewiRotateOut {
    from { opacity: 1; transform: rotate(0); }
    to { opacity: 0; transform: rotate(180deg); }
}

@keyframes vewiRotateOutDownLeft {
    from { opacity: 1; transform: rotate(0); }
    to { opacity: 0; transform: rotate(90deg); }
}

@keyframes vewiRotateOutDownRight {
    from { opacity: 1; transform: rotate(0); }
    to { opacity: 0; transform: rotate(-90deg); }
}

@keyframes vewiRotateOutUpLeft {
    from { opacity: 1; transform: rotate(0); }
    to { opacity: 0; transform: rotate(-90deg); }
}

@keyframes vewiRotateOutUpRight {
    from { opacity: 1; transform: rotate(0); }
    to { opacity: 0; transform: rotate(90deg); }
}

/* Hinge */
 .vewi-modal-wrapper[vewi-data-close-animation=hinge]:not(.vewi-active) {
    animation: vewiHinge 1s both;
    transform-origin: top left;
}
@keyframes vewiHinge {
    0% { transform: rotate(0); opacity: 1; }
    20%, 60% { transform: rotate(80deg); }
    40% { transform: rotate(60deg); }
    80% { transform: rotate(60deg) translateY(0); opacity: 1; }
    100% { transform: translateY(700px); opacity: 0; }
}