[data-animation]:not(.u-in-viewport) {
    visibility: hidden; 
}

[data-animation].js-carousel {
    visibility: visible; 
}

/* .bounceIn {
    animation-name: bounceIn;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.8); }
    60% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
} */

.slideIn {
    animation: slideIn 0.4s ease;
}

@keyframes slideIn {
    0% { opacity: 0; transform: translate(0%, -100%); }
    100% { opacity: 1; transform: translate(0%, 0%); }
}

.spinIn {
    animation: spinIn 0.6s ease;
}

@keyframes spinIn {
    0% { opacity: 0; transform: rotate(-180deg) scale(0.5); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.popUp {
    animation: popUp 0.5s ease;
}

@keyframes popUp {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

.growIn {
    animation: growIn 0.5s ease;
}

@keyframes growIn {
    0% { width: 0%; height: 0%; }
    100% { width: 100%; height: 100%; }
}

.tada {
    animation: tada 1s ease;
}

@keyframes tada {
    0% { transform: rotate(0deg) scale(1); }
    5% { transform: rotate(2deg) scale(1.1); }
    10% { transform: rotate(-2deg); }
    20% { transform: rotate(2deg); }
    30% { transform: rotate(-2deg); }
    40% { transform: rotate(2deg); }
    50% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    70% { transform: rotate(-2deg); }
    80% { transform: rotate(2deg); }
    90% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg) scale(1); }
}

.swing {
    animation: swing 1s ease;
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(8deg); }
    40% { transform: rotate(-6deg); }
    60% { transform: rotate(4deg); }
    80% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

.wobble {
    animation: wobble 1s ease;
}

@keyframes wobble {
    0% { transform: translateX(0%); }
    20% { transform: translateX(10%); }
    40% { transform: translateX(-8%); }
    60% { transform: translateX(5%); }
    80% { transform: translateX(-2%); }
    100% { transform: translateX(0%); }
}

.shake {
    animation: shake 1s ease;
}

@keyframes shake {
    0% { transform: translateX(0%); }
    10% { transform: translateX(3%); }
    20% { transform: translateX(-3%); }
    30% { transform: translateX(3%); }
    40% { transform: translateX(-3%); }
    50% { transform: translateX(3%); }
    60% { transform: translateX(-3%); }
    70% { transform: translateX(3%); }
    80% { transform: translateX(-3%); }
    90% { transform: translateX(3%); }
    100% { transform: translateX(0%); }
}

.rubberBand {
    animation: rubberBand 1s ease;
}

@keyframes rubberBand {
    0% { transform: scale(1, 1); }
    40% { transform: scale(0.8, 1.2); }
    55% { transform: scale(1.1, 0.9); }
    70% { transform: scale(0.95, 1.05); }
    85% { transform: scale(1.02, 0.98); }
    100% { transform: scale(1, 1); }
}

.pulse {
    animation: pulse 1s ease;
}

@keyframes pulse {
    0% { transform: scale(1, 1); }
    40% { transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1); }
}

.bounce {
    animation: bounce 1s ease;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-12%); }
    35% { transform: translateY(0%); }
    55% { transform: translateY(-8%); }
    65% { transform: translateY(0%); }
    75% { transform: translateY(-2%); }
    85% { transform: translateY(0%); }
    95% { transform: translateY(-1%); }
    100% { transform: translateY(0); }
}

.bounceIn {
    animation: bounceIn 1s ease;
}

@keyframes bounceIn {
    0% { transform: scale(1, 1); }
    25% { transform: scale(0.88, 0.88); }
    35% { transform: scale(1, 1); }
    55% { transform: scale(0.92, 0.92); }
    65% { transform: scale(1, 1); }
    75% { transform: scale(0.98, 0.98); }
    85% { transform: scale(1, 1); }
    95% { transform: scale(0.99, 0.99); }
    100% { transform: scale(1, 1); }
}

.bounceInLeft {
    animation: bounceInLeft 1s ease;
}

@keyframes bounceInLeft {
    0% { transform: translateX(0); }
    25% { transform: translateX(-12%); }
    35% { transform: translateX(0%); }
    55% { transform: translateX(-8%); }
    65% { transform: translateX(0%); }
    75% { transform: translateX(-2%); }
    85% { transform: translateX(0%); }
    95% { transform: translateX(-1%); }
    100% { transform: translateX(0); }
}

.bounceInRight {
    animation: bounceInRight 1s ease;
}

@keyframes bounceInRight {
    0% { transform: translateX(0); }
    25% { transform: translateX(12%); }
    35% { transform: translateX(0%); }
    55% { transform: translateX(8%); }
    65% { transform: translateX(0%); }
    75% { transform: translateX(2%); }
    85% { transform: translateX(0%); }
    95% { transform: translateX(1%); }
    100% { transform: translateX(0); }
}

.bounceInUp {
    animation: bounceInUp 1s ease;
}

@keyframes bounceInUp {
    0% { transform: translateY(0); }
    25% { transform: translateY(12%); }
    35% { transform: translateY(0%); }
    55% { transform: translateY(8%); }
    65% { transform: translateY(0%); }
    75% { transform: translateY(2%); }
    85% { transform: translateY(0%); }
    95% { transform: translateY(1%); }
    100% { transform: translateY(0); }
}

.bounceInDown {
    animation: bounceInDown 1s ease;
}

@keyframes bounceInDown {
    0% { transform: translateY(0); }
    25% { transform: translateY(-12%); }
    35% { transform: translateY(0%); }
    55% { transform: translateY(-8%); }
    65% { transform: translateY(0%); }
    75% { transform: translateY(-2%); }
    85% { transform: translateY(0%); }
    95% { transform: translateY(-1%); }
    100% { transform: translateY(0); }
}

.fadeIn {
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    0% { opacity: 0%; }
    100% { opacity: 100%; }
}

.fadeInLeft {
    animation: fadeInLeft 1s ease;
}

@keyframes fadeInLeft {
    0% { opacity: 0%; transform: translateX(-50%); }
    100% { opacity: 100%; transform: translateX(0%); }
}

.fadeInRight {
    animation: fadeInRight 1s ease;
}

@keyframes fadeInRight {
    0% { opacity: 0%; transform: translateX(50%); }
    100% { opacity: 100%; transform: translateX(0%); }
}

.fadeInUp {
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    0% { opacity: 0%; transform: translateY(50%); }
    100% { opacity: 100%; transform: translateY(0%); }
}

.fadeInDown {
    animation: fadeInDown 1s ease;
}

@keyframes fadeInDown {
    0% { opacity: 0%; transform: translateY(-50%); }
    100% { opacity: 100%; transform: translateY(0%); }
}

.flipInVertical {
    animation: flipInVertical 1s ease;
}

@keyframes flipInVertical {
    0% { opacity: 0%; transform: rotate3d(1, 0, 0, 110deg); }
    50% { transform: rotate3d(1, 0, 0, -40deg); }
    60% { transform: rotate3d(1, 0, 0, 25deg); }
    75% { transform: rotate3d(1, 0, 0, -10deg); }
    85% { transform: rotate3d(1, 0, 0, 5deg); }
    100% { opacity: 100%; transform: rotate3d(1, 0, 0, 0); }
}

.flipInHorizontal {
    animation: flipInHorizontal 1s ease;
}

@keyframes flipInHorizontal {
    0% { opacity: 0%; transform: rotate3d(0, 1, 0, 110deg); }
    50% { transform: rotate3d(0, 1, 0, -40deg); }
    60% { transform: rotate3d(0, 1, 0, 25deg); }
    75% { transform: rotate3d(0, 1, 0, -10deg); }
    85% { transform: rotate3d(0, 1, 0, 5deg); }
    100% { opacity: 100%; transform: rotate3d(0, 1, 0, 0); }
}

.rotateInHorizontal {
    animation: rotateInHorizontal 1s ease;
}

@keyframes rotateInHorizontal {
    0% { opacity: 0%; transform: rotateX(90deg); }
    100% { opacity: 100%; transform: rotateX(0); }
}

.rotateInVertical {
    animation: rotateInVertical 1s ease;
}

@keyframes rotateInVertical {
    0% { opacity: 0%; transform: rotateY(90deg); }
    100% { opacity: 100%; transform: rotateY(0); }
}

.rotateInDownLeft {
    animation: rotateInDownLeft 1s ease;
}

@keyframes rotateInDownLeft {
    0% { opacity: 0%; transform: rotate3d(0, 0, 1, -45deg); transform-origin: left bottom; }
    100% { opacity: 100%; transform: rotate3d(0, 0, 1, 0); transform-origin: left bottom; }
}

.rotateInDownRight {
    animation: rotateInDownRight 1s ease;
}

@keyframes rotateInDownRight {
    0% { opacity: 0%; transform: rotate3d(0, 0, 1, 45deg); transform-origin: right bottom; }
    100% { opacity: 100%; transform: rotate3d(0, 0, 1, 0); transform-origin: right bottom; }
}

.rotateInUpLeft {
    animation: rotateInUpLeft 1s ease;
}

@keyframes rotateInUpLeft {
    0% { opacity: 0%; transform: rotate3d(0, 0, 1, -45deg); transform-origin: left top; }
    100% { opacity: 100%; transform: rotate3d(0, 0, 1, 0); transform-origin: left top; }
}

.rotateInUpRight {
    animation: rotateInUpRight 1s ease;
}

@keyframes rotateInUpRight {
    0% { opacity: 0%; transform: rotate3d(0, 0, 1, 45deg); transform-origin: right top; }
    100% { opacity: 100%; transform: rotate3d(0, 0, 1, 0); transform-origin: right top; }
}

.zoomIn {
    animation: zoomIn 1s ease;
}

@keyframes zoomIn {
    0% { scale: 0%; }
    100% { scale: 100%; }
}

.zoomInLeft {
    animation: zoomInLeft 1s ease;
}

@keyframes zoomInLeft {
    0% { scale: 0%; transform: translateX(100%);}
    100% { scale: 100%; transform: translateX(0%);}
}

.zoomInRight {
    animation: zoomInRight 1s ease;
}

@keyframes zoomInRight {
    0% { scale: 0%; transform: translateX(-100%);}
    100% { scale: 100%; transform: translateX(0%);}
}

.zoomInUp {
    animation: zoomInUp 1s ease;
}

@keyframes zoomInUp {
    0% { scale: 0%; transform: translateY(-100%);}
    100% { scale: 100%; transform: translateY(0%); }
}

.zoomInDown {
    animation: zoomInDown 1s ease;
}

@keyframes zoomInDown {
    0% { scale: 0%; transform: translateY(100%); }
    100% { scale: 100%; transform: translateY(0%); }
}


/* MODAL ANIMATIONS ============================================================================== */
.pt-modal-bounce-in {
    animation: modalBounceIn 0.5s ease;
}

@keyframes modalBounceIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    60% { transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.pt-modal-slide-in {
    animation: modalSlideIn 0.4s ease;
}

@keyframes modalSlideIn {
    0% { opacity: 0; transform: translate(-50%, -100%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

.pt-modal-spin-in {
    animation: modalSpinIn 0.6s ease;
}

@keyframes modalSpinIn {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-180deg) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}

.pt-modal-pop-up {
    animation: modalPopUp 0.5s ease;
}

@keyframes modalPopUp {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}