@hellouxpavel/cssanimation/dist/cssanimation.css

A Powerful CSS Animation Library for Advanced Motion Design.

/*!* @preserve
* cssanimation.css – Core animation styles and keyframes
* Part of: https://cssanimation.io/
* Version: 6.10.2
* Built: 2025-07-24 08:52:19 UTC
*
* Author: Shafayetul Islam Pavel
* LinkedIn: https://www.linkedin.com/in/shafayetul/
* Email: hello@cssanimation.io
* GitHub: https://github.com/yesiamrocks/cssanimation
*
* Title: Core Animation Styles and Keyframe Definitions for cssanimation.
* Description: Contains the fundamental CSS animation classes, keyframe definitions,
* and essential styling that form the base of the cssanimation.io library.
*
* © 2025 Shafayetul Islam Pavel – All rights reserved.*/
@charset "UTF-8";
.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}
.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}
.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}
@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}
/**
 * Module: Blob
 * Filename: ca__blob.css
 */
.ca__fx-blobJumpMorph {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 50% 50%, #00f0ff, #0099cc);
  border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
  animation: blobJumpMorph 2.2s ease-in-out infinite;
}
@keyframes blobJumpMorph {
  0%,
  100% {
    transform: translateY(0) scale(1);
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
  }

  25% {
    transform: translateY(-30%) scale(1.1, 0.9);
    border-radius: 50% 40% 60% 50% / 40% 60% 40% 60%;
  }

  50% {
    transform: translateY(0) scale(0.95, 1.05);
    border-radius: 60% 50% 40% 60% / 50% 60% 50% 40%;
  }

  75% {
    transform: translateY(-15%) scale(1.05, 0.95);
    border-radius: 45% 55% 55% 45% / 55% 45% 55% 45%;
  }
}
.ca__fx-gooBounceBlob {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #ff66cc, #9900ff);
  border-radius: 50%;
  animation: gooBounceBlob 1.8s ease-in-out infinite;
}
@keyframes gooBounceBlob {
  0%,
  100% {
    transform: translateY(0) scale(1);
    border-radius: 50%;
  }

  30% {
    transform: translateY(-40%) scale(1.2, 0.8);
    border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
  }

  60% {
    transform: translateY(10%) scale(0.9, 1.1);
    border-radius: 60% 40% 40% 60% / 50% 40% 60% 50%;
  }
}
.ca__fx-jellyBounceWave {
  width: 80px;
  height: 80px;
  background: conic-gradient(from 90deg, #00ffcc, #6600ff, #00ffcc);
  border-radius: 50%;
  animation: jellyBounceWave 2.6s ease-in-out infinite;
}
@keyframes jellyBounceWave {
  0%,
  100% {
    transform: translateY(0) scale(1);
    border-radius: 50%;
  }

  20% {
    transform: translateY(-30%) scale(1.1, 0.8);
    border-radius: 40% 60% 65% 35% / 50% 40% 60% 50%;
  }

  50% {
    transform: translateY(0) scale(0.95, 1.1);
    border-radius: 60% 40% 45% 55% / 60% 45% 55% 40%;
  }

  80% {
    transform: translateY(-10%) scale(1.05, 0.95);
    border-radius: 55% 45% 50% 50% / 50% 50% 55% 45%;
  }
}
.ca__fx-blobBouncePop {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 40% 40%, #ffe066, #ff6b6b);
  border-radius: 50%;
  animation: blobBouncePop 2.2s ease-in-out infinite;
}
@keyframes blobBouncePop {
  0% {
    transform: scale(1) translateY(0);
    border-radius: 50%;
  }

  20% {
    transform: scale(1.2, 0.8) translateY(-25%);
    border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%;
  }

  50% {
    transform: scale(0.95, 1.1) translateY(10%);
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  }

  100% {
    transform: scale(1) translateY(0);
    border-radius: 50%;
  }
}
.ca__fx-blobElasticStretch {
  width: 70px;
  height: 70px;
  background: linear-gradient(45deg, #00f0ff, #0044ff);
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  animation: blobElasticStretch 2.8s ease-in-out infinite;
}
@keyframes blobElasticStretch {
  0%,
  100% {
    transform: translateY(0%) scale(1);
  }

  25% {
    transform: translateY(-60%) scale(0.9, 1.3);
    border-radius: 50% 60% 40% 50% / 50% 40% 60% 50%;
  }

  50% {
    transform: translateY(10%) scale(1.1, 0.8);
    border-radius: 60% 50% 50% 40% / 50% 50% 50% 60%;
  }
}
.ca__fx-blobPulseDrop {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 50% 50%, #ffffff, #00ffcc);
  border-radius: 50%;
  animation: blobPulseDrop 1.8s ease-in-out infinite;
  box-shadow:
    0 0 12px #00ffc3,
    0 0 24px #00ffc3;
}
@keyframes blobPulseDrop {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  30% {
    transform: translateY(-30%) scale(1.15, 0.85);
  }

  50% {
    transform: translateY(0) scale(0.9, 1.1);
    opacity: 0.9;
  }

  75% {
    transform: translateY(-15%) scale(1.05, 0.95);
    opacity: 1;
  }
}
.ca__fx-floatingOrb {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 60% 40%, #fff5cc, #ff00cc);
  border-radius: 50%;
  animation: floatingOrb 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,0,204,0.66667));
}
@keyframes floatingOrb {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-12%) scale(1.05);
  }
}
.ca__fx-magicBlobSplit {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #99faff, #3300ff);
  border-radius: 60% 40% 50% 70% / 60% 40% 60% 50%;
  animation: magicBlobSplit 2.8s ease-in-out infinite;
}
@keyframes magicBlobSplit {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    border-radius: 60% 40% 50% 70% / 60% 40% 60% 50%;
  }

  50% {
    transform: translate(-10%, -10%) scale(1.1);
    border-radius: 40% 60% 70% 30% / 50% 70% 30% 60%;
  }
}
.ca__fx-orbitalSpin {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #ff66ff, #9900ff);
  border-radius: 50%;
  animation: ca__orbitalSpin 5s linear infinite;
  position: relative;
  transform-origin: 100px center;
}
@keyframes orbitalSpin {
  0% {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}
.ca__fx-pulseAura {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, #ffffff 10%, #00ffff 40%, transparent 70%);
  border-radius: 50%;
  animation: pulseAura 2s ease-in-out infinite;
  filter: blur(3px);
  opacity: 0.5;
}
@keyframes pulseAura {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}
.ca__fx-magicTrailComet {
  width: 120px;
  height: 4px;
  background: linear-gradient(to right, transparent, #00ffff, #ffffff);
  animation: magicTrailComet 1.5s linear infinite;
  border-radius: 100px;
}
@keyframes magicTrailComet {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
/**
 * Module: Blur In
 * Filename: ca__BlurIn.css
 */
.ca__fx-blurIn {
  animation-name: blurIn;
}
@keyframes blurIn {
  from {
    filter: blur(20px);
    opacity: 0;
  }
}
.ca__fx-blurInfromLeft {
  animation-name: blurInLeft;
}
@keyframes blurInLeft {
  from {
    transform: translateX(-100%);
    filter: blur(20px);
    opacity: 0;
  }
}
.ca__fx-blurInFromRight {
  animation-name: blurInRight;
}
@keyframes blurInRight {
  from {
    transform: translateX(100%);
    filter: blur(20px);
    opacity: 0;
  }
}
.ca__fx-blurInFromTop {
  animation-name: blurInTop;
}
@keyframes blurInTop {
  from {
    transform: translateY(-100%);
    filter: blur(20px);
    opacity: 0;
  }
}
.ca__fx-blurInFromBottom {
  animation-name: blurInBottom;
}
@keyframes blurInBottom {
  from {
    transform: translateY(100%);
    filter: blur(20px);
    opacity: 0;
  }
}
/**
 * Module: Blur Out
 * Filename: ca__BlurOut.css
 */
.ca__fx-blurOut {
  animation-name: blurOut;
}
@keyframes blurOut {
  85%,
  100% {
    filter: blur(20px);
  }

  100% {
    opacity: 0;
  }
}
.ca__fx-blurOutToLeft {
  animation-name: blurOutLeft;
}
@keyframes blurOutLeft {
  85%,
  100% {
    filter: blur(20px);
    transform: translateX(-100%);
  }

  100% {
    opacity: 0;
  }
}
.ca__fx-blurOutToRight {
  animation-name: blurOutRight;
}
@keyframes blurOutRight {
  85%,
  100% {
    filter: blur(20px);
    transform: translateX(100%);
  }

  100% {
    opacity: 0;
  }
}
.ca__fx-blurOutToTop {
  animation-name: blurOutTop;
}
@keyframes blurOutTop {
  85%,
  100% {
    filter: blur(20px);
    transform: translateY(-100%);
  }

  100% {
    opacity: 0;
  }
}
.ca__fx-blurOutToBottom {
  animation-name: blurOutBottom;
}
@keyframes blurOutBottom {
  85%,
  100% {
    filter: blur(20px);
    transform: translateY(100%);
  }

  100% {
    opacity: 0;
  }
}
/**
 * Module: Bounce
 * Filename: ca__Bounce.css
 */
.ca__fx-bounceX {
  animation-name: bounceX;
}
@keyframes bounceX {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: scale3d(1, 1, 1);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: scale3d(1.8, 1, 1);
  }

  70% {
    animation-timing-function: ease-in;
    transform: scale3d(1.5, 1, 1);
  }

  90% {
    transform: scale3d(1.1, 1, 1);
  }
}
.ca__fx-bounceY {
  animation-name: bounceY;
}
@keyframes bounceY {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: scale3d(1, 1, 1);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: scale3d(1, 2, 1);
  }

  70% {
    animation-timing-function: ease-in;
    transform: scale3d(1, 1.5, 1);
  }

  90% {
    transform: scale3d(1, 1.1, 1);
  }
}
.ca__fx-bounceZoomOut {
  animation-name: bounceZoomOut;
}
@keyframes bounceZoomOut {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: scale(0.3);
  }

  70% {
    animation-timing-function: ease-in;
    transform: scale(0.5);
  }

  90% {
    transform: scale(0.9);
  }
}
.ca__fx-spring {
  animation: spring var(--spring-duration, 0.6s) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes spring {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(var(--spring-height, 1rem) * -1));
  }
}
.ca__fx-boing {
  animation: boing var(--boing-duration, 0.9s) cubic-bezier(0.28, 1.5, 0.68, 1) infinite;
}
@keyframes boing {
  0%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(calc(var(--boing-height, 1rem) * -1.1));
  }

  50% {
    transform: translateY(calc(var(--boing-height, 1rem) * 0.3));
  }

  70% {
    transform: translateY(calc(var(--boing-height, 1rem) * -0.5));
  }

  90% {
    transform: translateY(calc(var(--boing-height, 1rem) * 0.15));
  }
}
.ca__fx-hop {
  animation: hop var(--hop-duration, 0.5s) ease-out infinite;
}
@keyframes hop {
  0%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(calc(var(--hop-height, 0.8rem) * -1));
  }
}
.ca__fx-lift {
  animation: lift var(--lift-duration, 1.2s) ease-in-out infinite;
}
@keyframes lift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(var(--lift-height, 10px) * -1));
  }
}
.ca__fx-popUp {
  animation: popUp var(--popUp-duration, 0.5s) ease-out both;
}
@keyframes popUp {
  0% {
    transform: scale(0.95) translateY(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.05) translateY(calc(var(--popUp-height, 8px) * -1));
    opacity: 1;
  }

  80% {
    transform: scale(0.98) translateY(calc(var(--popUp-height, 8px) * -0.3));
  }

  100% {
    transform: scale(1) translateY(0);
  }
}
.ca__fx-rebound {
  animation: rebound var(--rebound-duration, 0.7s) ease-in-out infinite;
}
@keyframes rebound {
  0%,
  100% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(calc(var(--rebound-height, 1rem) * -1));
  }

  40% {
    transform: translateY(calc(var(--rebound-height, 1rem) * 0.5));
  }

  60% {
    transform: translateY(calc(var(--rebound-height, 1rem) * -0.3));
  }
}
.ca__fx-jump {
  animation: jump var(--jump-duration, 0.6s) ease-in-out infinite;
}
@keyframes jump {
  0%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(calc(var(--jump-height, 1.2rem) * -1));
  }
}
.ca__fx-jumping {
  animation: jumping 1.2s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes jumping {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }

  25% {
    transform: translateY(-20%) scale(1.1);
    opacity: 1;
  }

  50% {
    transform: translateY(0) scale(0.95);
    opacity: 0.8;
  }

  75% {
    transform: translateY(-10%) scale(1.05);
    opacity: 0.9;
  }
}
.ca__fx-launch {
  animation: launch var(--launch-duration, 0.8s) ease-out infinite;
}
@keyframes launch {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(calc(var(--launch-height, 2rem) * -1.2));
  }

  40% {
    transform: translateY(calc(var(--launch-height, 2rem) * 0.5));
  }

  60% {
    transform: translateY(calc(var(--launch-height, 2rem) * -0.3));
  }

  80% {
    transform: translateY(calc(var(--launch-height, 2rem) * 0.15));
  }

  100% {
    transform: translateY(0);
  }
}
.ca__fx-levitate {
  animation: levitate var(--levitate-duration, 2s) ease-in-out infinite;
}
@keyframes levitate {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(var(--levitate-height, 0.6rem) * -1));
  }
}
.ca__fx-jitterJump {
  animation: jitterJump 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes jitterJump {
  0% {
    transform: translateY(0) scale(1, 1);
  }

  20% {
    transform: translateY(-40px) scale(1.1, 0.9);
  } /* Jump up with squash */

  40% {
    transform: translateY(0) scale(0.9, 1.1);
  } /* Land with stretch */

  60% {
    transform: translateY(-20px) scale(1.05, 0.95);
  } /* Smaller rebound */

  80% {
    transform: translateY(0) scale(0.98, 1.02);
  } /* Settle */

  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.ca__fx-elasticJump {
  animation: elasticJump 1.2s cubic-bezier(0.2, 0.8, 0.3, 1.2) infinite;
  transform-origin: bottom center;
  display: inline-block;
}
@keyframes elasticJump {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }

  30% {
    transform: translateY(-40%) scaleY(1.2);
  }

  50% {
    transform: translateY(0) scaleY(0.9);
  }

  70% {
    transform: translateY(-20%) scaleY(1.05);
  }
}
.ca__fx-squishyBounce {
  animation: squishyBounce 1.4s ease-in-out infinite;
  transform-origin: bottom center;
  display: inline-block;
}
@keyframes squishyBounce {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }

  25% {
    transform: translateY(-30%) scale(1.1, 0.9);
  }

  50% {
    transform: translateY(0) scale(0.95, 1.05);
  }

  75% {
    transform: translateY(-15%) scale(1.05, 0.95);
  }
}
.ca__fx-bouncyDrop {
  animation: bouncyDrop 1.5s ease-in-out infinite;
  transform-origin: top center;
  display: inline-block;
}
@keyframes bouncyDrop {
  0% {
    transform: translateY(-100%) scaleY(1.2);
    opacity: 0;
  }

  30% {
    transform: translateY(10%) scaleY(0.8);
    opacity: 1;
  }

  60% {
    transform: translateY(-5%) scaleY(1.1);
  }

  100% {
    transform: translateY(0) scaleY(1);
  }
}
/**
 * Module: Bounce In
 * Filename: ca__BounceIn.css
 */
.ca__fx-bounceInTop {
  animation-name: bounceInTop;
}
@keyframes bounceInTop {
  0% {
    transform: translate3d(0, -300%, 0);
  }

  58% {
    transform: translate3d(0, 27px, 0);
  }

  73% {
    transform: translate3d(0, -12px, 0);
  }

  88% {
    transform: translate3d(0, 7px, 0);
  }
}
.ca__fx-bounceInBottom {
  animation-name: bounceInBottom;
}
@keyframes bounceInBottom {
  0% {
    transform: translate3d(0, 300%, 0);
  }

  58% {
    transform: translate3d(0, -27px, 0);
  }

  73% {
    transform: translate3d(0, 12px, 0);
  }

  88% {
    transform: translate3d(0, -8px, 0);
  }
}
.ca__fx-bounceInLeft {
  animation-name: bounceInLeft;
}
@keyframes bounceInLeft {
  0% {
    transform: translate3d(-300%, 0, 0);
  }

  58% {
    transform: translate3d(27px, 0, 0);
  }

  73% {
    transform: translate3d(-12px, 0, 0);
  }

  88% {
    transform: translate3d(8px, 0, 0);
  }
}
.ca__fx-bounceInRight {
  animation-name: bounceInRight;
}
@keyframes bounceInRight {
  0% {
    transform: translate3d(300%, 0, 0);
  }

  58% {
    transform: translate3d(-27px, 0, 0);
  }

  73% {
    transform: translate3d(12px, 0, 0);
  }

  88% {
    transform: translate3d(-8px, 0, 0);
  }
}
.ca__fx-bounceFromTop {
  animation-name: bounceFromTop;
}
@keyframes bounceFromTop {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 0);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -80px, 0) scale3d(1, 1.6, 1);
  }

  70% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -20px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.ca__fx-bounceFromDown {
  animation-name: bounceFromDown;
}
@keyframes bounceFromDown {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 0);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
  }

  70% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 20px, 0);
  }

  90% {
    transform: translate3d(0, 4px, 0);
  }
}
/**
 * Module: Bounce Out
 * Filename: ca__BounceOut.css
 */
.ca__fx-bounceOutTop {
  animation-name: bounceOutTop;
}
@keyframes bounceOutTop {
  18%,
  33%,
  48% {
    opacity: 1;
  }

  18% {
    transform: translate3d(0, 27px, 0);
  }

  33% {
    transform: translate3d(0, -12px, 0);
  }

  48% {
    transform: translate3d(0, 8px, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -300%, 0);
  }
}
.ca__fx-bounceOutBottom {
  animation-name: bounceOutBottom;
}
@keyframes bounceOutBottom {
  18%,
  33%,
  48% {
    opacity: 1;
  }

  18% {
    transform: translate3d(0, -27px, 0);
  }

  33% {
    transform: translate3d(0, 12px, 0);
  }

  48% {
    transform: translate3d(0, -8px, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 300%, 0);
  }
}
.ca__fx-bounceOutLeft {
  animation-name: bounceOutLeft;
}
@keyframes bounceOutLeft {
  18%,
  33%,
  48% {
    opacity: 1;
  }

  18% {
    transform: translate3d(27px, 0, 0);
  }

  33% {
    transform: translate3d(-12px, 0, 0);
  }

  48% {
    transform: translate3d(8px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-300%, 0, 0);
  }
}
.ca__fx-bounceOutRight {
  animation-name: bounceOutRight;
}
@keyframes bounceOutRight {
  18%,
  33%,
  48% {
    opacity: 1;
  }

  18% {
    transform: translate3d(-27px, 0, 0);
  }

  33% {
    transform: translate3d(12px, 0, 0);
  }

  48% {
    transform: translate3d(-8px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(300%, 0, 0);
  }
}
/**
 * Module: Clip Path Animations 
 * Filename: ca__Clip-Path.css
 */
.ca__fx-clipCircleExpandIn {
  animation: clipCircleExpandIn 3s ease-out;
  clip-path: circle(0% at 50% 50%);
}
@keyframes clipCircleExpandIn {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(150% at 50% 50%);
  }
}
.ca__fx-clipCircleCollapseOut {
  animation: clipCircleCollapseOut 3s ease-in both;
  clip-path: circle(150% at 50% 50%);
  will-change: clip-path;
}
@keyframes clipCircleCollapseOut {
  0% {
    clip-path: circle(150% at 50% 50%);
  }

  100% {
    clip-path: circle(0% at 50% 50%);
  }
}
.ca__fx-clipDiagonalWipeIn {
  animation-name: clipDiagonalWipeIn;
}
@keyframes clipDiagonalWipeIn {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}
.ca__fx-clipDiagonalWipeOut {
  animation-name: clipDiagonalWipeOut;
  animation-timing-function: ease-in-out;
}
@keyframes clipDiagonalWipeOut {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
    opacity: 0;
  }
}
.ca__fx-clipGridReveal {
  animation-name: clipGridReveal;
}
@keyframes clipGridReveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }

  40% {
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
    opacity: 0.5;
  }

  70% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.8;
  }

  100% {
    clip-path: inset(0);
    opacity: 1;
  }
}
.ca__fx-clipGridCollapse {
  animation-name: clipGridCollapse;
}
@keyframes clipGridCollapse {
  0% {
    clip-path: inset(0);
    opacity: 1;
  }

  40% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.5;
  }

  100% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }
}
.ca__fx-clipVerticalSplitIn {
  animation-name: clipVerticalSplitIn;
}
@keyframes clipVerticalSplitIn {
  0% {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    opacity: 0;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}
.ca__fx-clipVerticalSplitOut {
  animation: clipVerticalSplitOut 0.9s ease-in forwards;
}
@keyframes clipVerticalSplitOut {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    opacity: 0;
  }
}
.ca__fx-clipCrossSweepOut {
  animation: clipCrossSweepOut 1.1s ease-in forwards;
}
@keyframes clipCrossSweepOut {
  0% {
    clip-path: inset(0);
    opacity: 1;
  }

  60% {
    clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
    opacity: 0.6;
  }

  100% {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
  }
}
.ca__fx-clipBurstCircle {
  animation: clipBurstCircle 0.9s cubic-bezier(0.45, 0, 0.55, 1.5) both;
  clip-path: circle(0% at 50% 50%);
}
@keyframes clipBurstCircle {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }

  60% {
    clip-path: circle(60% at 50% 50%);
    opacity: 1;
  }

  100% {
    clip-path: circle(120% at 50% 50%);
  }
}
.ca__fx-clipDiamondIn {
  animation: clipDiamondIn 0.8s ease-out both;
}
@keyframes clipDiamondIn {
  0% {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    clip-path: inset(0);
    opacity: 1;
    transform: scale(1);
  }
}
.ca__fx-clipDiagonalSliceIn {
  animation: clipDiagonalSliceIn 1s ease-out both;
}
@keyframes clipDiagonalSliceIn {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}
.ca__fx-clipMultiStepReveal {
  animation: clipMultiStepReveal 1.1s ease-in-out both;
}
@keyframes clipMultiStepReveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }

  50% {
    clip-path: polygon(0 0, 80% 0, 80% 100%, 0 100%);
    opacity: 0.6;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}
.ca__fx-clipMultiStepCollapse {
  animation: clipMultiStepCollapse 1.1s ease-in-out forwards;
}
@keyframes clipMultiStepCollapse {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }

  50% {
    clip-path: polygon(0 0, 80% 0, 80% 100%, 0 100%);
    opacity: 0.5;
  }

  100% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }
}
.ca__fx-clipAnimate {
  animation: morph 8s infinite ease-in-out alternate;
}
@keyframes morph {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Diamond */
  }

  50% {
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); /* Trapezoid */
  }

  100% {
    clip-path: polygon(0% 15%, 15% 0%, 100% 0%, 85% 15%, 100% 100%, 0% 100%); /* A complex star-like shape */
  }
}
.ca__fx-clipAnimateWave {
  animation: wave-morph 7s infinite ease-in-out alternate; /* Medium speed */
}
@keyframes wave-morph {
  0% {
    /* A gentle, slightly curved top and bottom */
    clip-path: polygon(
      0% 20%,
      10% 25%,
      20% 20%,
      30% 25%,
      40% 20%,
      50% 25%,
      60% 20%,
      70% 25%,
      80% 20%,
      90% 25%,
      100% 20%,
      100% 80%,
      90% 75%,
      80% 80%,
      70% 75%,
      60% 80%,
      50% 75%,
      40% 80%,
      30% 75%,
      20% 80%,
      10% 75%,
      0% 80%
    );
  }

  25% {
    /* More pronounced wave, expanding horizontally */
    clip-path: polygon(
      0% 0%,
      15% 10%,
      30% 0%,
      45% 10%,
      60% 0%,
      75% 10%,
      90% 0%,
      100% 10%,
      100% 90%,
      90% 100%,
      75% 90%,
      60% 100%,
      45% 90%,
      30% 100%,
      15% 90%,
      0% 100%
    );
  }

  50% {
    /* Reaching a flatter, more compressed state */
    clip-path: polygon(0% 30%, 100% 30%, 100% 70%, 0% 70%); /* A wide rectangle */
  }

  75% {
    /* Another wave pattern, perhaps inverted or shifted */
    clip-path: polygon(
      0% 10%,
      10% 0%,
      20% 10%,
      30% 0%,
      40% 10%,
      50% 0%,
      60% 10%,
      70% 0%,
      80% 10%,
      90% 0%,
      100% 10%,
      100% 90%,
      90% 100%,
      80% 90%,
      70% 100%,
      60% 90%,
      50% 100%,
      40% 90%,
      30% 100%,
      20% 90%,
      10% 100%,
      0% 90%
    );
  }

  100% {
    /* Back to the initial gentle wave */
    clip-path: polygon(
      0% 20%,
      10% 25%,
      20% 20%,
      30% 25%,
      40% 20%,
      50% 25%,
      60% 20%,
      70% 25%,
      80% 20%,
      90% 25%,
      100% 20%,
      100% 80%,
      90% 75%,
      80% 80%,
      70% 75%,
      60% 80%,
      50% 75%,
      40% 80%,
      30% 75%,
      20% 80%,
      10% 75%,
      0% 80%
    );
  }
}
/**
 * Module: Dance
 * Filename: ca__Dance.css
 */
.ca__fx-danceTop {
  animation-name: danceTop;
  transform-origin: top;
}
@keyframes danceTop {
  16% {
    transform: skew(-14deg);
  }

  33% {
    transform: skew(12deg);
  }

  49% {
    transform: skew(-8deg);
  }

  66% {
    transform: skew(6deg);
  }

  83% {
    transform: skew(-4deg);
  }
}
.ca__fx-danceMiddle {
  animation-name: danceMiddle;
}
@keyframes danceMiddle {
  16% {
    transform: skew(-14deg);
  }

  33% {
    transform: skew(12deg);
  }

  49% {
    transform: skew(-8deg);
  }

  66% {
    transform: skew(6deg);
  }

  83% {
    transform: skew(-4deg);
  }
}
.ca__fx-danceBottom {
  animation-name: danceBottom;
  transform-origin: bottom;
}
@keyframes danceBottom {
  16% {
    transform: skew(-14deg);
  }

  33% {
    transform: skew(12deg);
  }

  49% {
    transform: skew(-8deg);
  }

  66% {
    transform: skew(6deg);
  }

  83% {
    transform: skew(-4deg);
  }
}
/**
 * Module: Door
 * Filename: ca__Door.css
 */
.ca__fx-doorCloseFromLeft {
  animation-name: doorCloseFromLeft;
}
@keyframes doorCloseFromLeft {
  0% {
    transform: perspective(400px) rotateY(90deg);
    transform-origin: left;
    opacity: 0;
  }

  50%,
  100% {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: left;
    opacity: 1;
  }
}
.ca__fx-doorOpenFromRight {
  animation-name: doorOpenFromRight;
}
@keyframes doorOpenFromRight {
  0% {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: left;
    opacity: 1;
  }

  50%,
  100% {
    transform: perspective(400px) rotateY(90deg);
    transform-origin: left;
    opacity: 0;
  }
}
.ca__fx-doorCloseFromRight {
  animation-name: doorCloseFromRight;
}
@keyframes doorCloseFromRight {
  0% {
    transform: perspective(400px) rotateY(-90deg);
    transform-origin: right;
    opacity: 0;
  }

  50%,
  100% {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: right;
    opacity: 1;
  }
}
.ca__fx-doorOpenFromLeft {
  animation-name: doorOpenFromLeft;
}
@keyframes doorOpenFromLeft {
  0% {
    transform: perspective(400px) rotateY(0deg);
    transform-origin: right;
    opacity: 1;
  }

  50%,
  100% {
    transform: perspective(400px) rotateY(-90deg);
    transform-origin: right;
    opacity: 0;
  }
}
/**
 * Module: Dramatic
 * Filename: ca__Dramatic.css
 */
.ca__fx-curtainReveal {
  animation-name: curtainReveal;
  animation-timing-function: ease-out;
  transform-origin: top center;
  overflow: hidden;
}
@keyframes curtainReveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  50%,
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.ca__fx-curtainClose {
  animation-name: curtainClose;
  animation-timing-function: ease-in;
  transform-origin: top center;
}
@keyframes curtainClose {
  0% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  50%,
  100% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
}
.ca__fx-spiralTwistIn {
  animation-name: spiralTwistIn;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes spiralTwistIn {
  0% {
    transform: scale(0) rotate(720deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.05) rotate(-30deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
.ca__fx-spiralTwistOut {
  animation-name: spiralTwistOut;
  animation-timing-function: ease-in;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes spiralTwistOut {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: scale(0.3) rotate(-360deg);
    opacity: 0;
  }
}
.ca__fx-spotlightFocus {
  animation-name: spotlightFocus;
  animation-timing-function: ease-in-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes spotlightFocus {
  0% {
    filter: brightness(0.2) blur(4px);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    filter: brightness(1) blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
.ca__fx-spotlightFade {
  animation-name: spotlightFade;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes spotlightFade {
  0% {
    filter: brightness(1) blur(0);
    opacity: 1;
    transform: scale(1);
  }

  100% {
    filter: brightness(0.3) blur(6px);
    opacity: 0;
    transform: scale(0.9);
  }
}
/**
 * Module: Elastic Animation
 * Filename: ca__elastic.css
 */
.ca__fx-elasticArise {
  animation: elasticArise 2s cubic-bezier(0.5, 0, 0.5, 1);
  transform-origin: bottom center; /* Important for vertical scaling */
}
@keyframes elasticArise {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }

  20% {
    transform: translateY(-40px) scaleY(1.2); /* Rise with stretch */
  }

  40% {
    transform: translateY(0) scaleY(0.9); /* Settle with slight squash */
  }

  60% {
    transform: translateY(-15px) scaleY(1.05); /* Smaller elastic bounce */
  }

  80% {
    transform: translateY(0) scaleY(0.98);
  }
}
.ca__fx-elasticRise {
  animation: elasticRise var(--elastic-duration, 1s) ease-out both;
}
@keyframes elasticRise {
  0% {
    transform: scaleY(1) translateY(0);
  }

  40% {
    transform: scaleY(0.9) translateY(calc(var(--elastic-height, 1.5rem) * -1.2));
  }

  60% {
    transform: scaleY(1.1) translateY(calc(var(--elastic-height, 1.5rem) * 0.3));
  }

  80% {
    transform: scaleY(0.95) translateY(calc(var(--elastic-height, 1.5rem) * -0.1));
  }

  100% {
    transform: scaleY(1) translateY(0);
  }
}
.ca__fx-elasticStretch {
  animation: elasticStretch var(--duration, 1s) ease-out both;
}
@keyframes elasticStretch {
  0% {
    transform: scaleX(1);
  }

  30% {
    transform: scaleX(1.4);
  }

  50% {
    transform: scaleX(0.85);
  }

  70% {
    transform: scaleX(1.15);
  }

  100% {
    transform: scaleX(1);
  }
}
.ca__fx-elasticBounce {
  animation: elasticBounce var(--duration, 1s) cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes elasticBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.5rem);
  }
}
.ca__fx-elasticSquash {
  animation: elasticSquash var(--duration, 0.7s) ease-out both;
}
@keyframes elasticSquash {
  0% {
    transform: scaleY(1);
  }

  40% {
    transform: scaleY(0.5) scaleX(1.3);
  }

  60% {
    transform: scaleY(1.2) scaleX(0.9);
  }

  80% {
    transform: scaleY(0.95) scaleX(1.05);
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-elasticIn {
  animation: elasticIn var(--duration, 0.6s) ease-out both;
}
@keyframes elasticIn {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

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

  100% {
    transform: scale(1);
  }
}
.ca__fx-rubberPop {
  animation: rubberPop var(--duration, 0.7s) ease-out both;
}
@keyframes rubberPop {
  0% {
    transform: scale(0.3);
  }

  40% {
    transform: scale(1.25);
  }

  60% {
    transform: scale(0.9);
  }

  80% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-squishLift {
  animation: squishLift var(--duration, 0.8s) ease-in-out both;
}
@keyframes squishLift {
  0% {
    transform: translateY(0) scaleY(1);
  }

  30% {
    transform: translateY(-1.2rem) scaleY(1.3);
  }

  60% {
    transform: translateY(0.5rem) scaleY(0.9);
  }

  100% {
    transform: translateY(0) scaleY(1);
  }
}
.ca__fx-flubberBounce {
  animation: flubberBounce var(--duration, 1s) ease-in-out both;
}
@keyframes flubberBounce {
  0% {
    transform: scale(1, 1);
  }

  20% {
    transform: scale(1.2, 0.8);
  }

  40% {
    transform: scale(0.8, 1.2);
  }

  60% {
    transform: scale(1.1, 0.9);
  }

  80% {
    transform: scale(0.95, 1.05);
  }

  100% {
    transform: scale(1, 1);
  }
}
.ca__fx-boingScale {
  animation: boingScale var(--duration, 0.9s) ease-out both;
}
@keyframes boingScale {
  0% {
    transform: scale(0.5);
  }

  30% {
    transform: scale(1.3);
  }

  60% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-slinkyDrop {
  animation: slinkyDrop var(--duration, 1s) ease-in both;
}
@keyframes slinkyDrop {
  0% {
    transform: translateY(-120%);
    scale: 1 0.8;
  }

  40% {
    transform: translateY(20%) scale(1, 1.2);
  }

  60% {
    transform: translateY(-10%) scale(1, 0.95);
  }

  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.ca__fx-elasticBounce {
  animation: elasticBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
  transform-origin: bottom center; /* Important for bouncing */
}
@keyframes elasticBounce {
  0% {
    transform: translateY(0) scale(1);
  }

  20% {
    transform: translateY(-30px) scaleX(1.05) scaleY(0.95);
  }

  40% {
    transform: translateY(0) scaleX(0.98) scaleY(1.02);
  }

  60% {
    transform: translateY(-15px) scaleX(1.02) scaleY(0.98);
  }

  80% {
    transform: translateY(0) scaleX(0.99) scaleY(1.01);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}
.ca__fx-springyEffect {
  animation: springyEffect 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes springyEffect {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1, 0.9);
  }

  50% {
    transform: scale(0.95, 1.05);
  }

  75% {
    transform: scale(1.05, 0.95);
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-jiggleTransform {
  animation: jiggleTransform 0.7s ease-in-out forwards;
  transform-origin: center;
}
@keyframes jiggleTransform {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  15% {
    transform: rotate(-3deg) scale(1.02);
  }

  30% {
    transform: rotate(3deg) scale(0.98);
  }

  45% {
    transform: rotate(-2deg) scale(1.01);
  }

  60% {
    transform: rotate(2deg) scale(0.99);
  }

  75% {
    transform: rotate(-1deg) scale(1);
  }
}
.ca__fx-stretchCollapse {
  animation: stretchCollapse 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
  transform-origin: center;
}
@keyframes stretchCollapse {
  0% {
    transform: scaleY(1);
  }

  25% {
    transform: scaleY(1.3);
  } /* Stretch */

  50% {
    transform: scaleY(0.7);
  } /* Collapse */

  75% {
    transform: scaleY(1.1);
  }

  100% {
    transform: scaleY(1);
  }
}
.ca__fx-reboundMotion {
  animation: reboundMotion 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  transform-origin: bottom center; /* For vertical rebound */
}
@keyframes reboundMotion {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-50px);
  } /* Move up */

  100% {
    transform: translateY(0);
  } /* Rebound with overshoot */
}
.ca__fx-snapBackEase {
  animation: snapBackEase 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
@keyframes snapBackEase {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  80% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-flexiShrink {
  animation: flexiShrink 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
@keyframes flexiShrink {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);
  } /* Shrink */

  75% {
    transform: scale(1.05);
  } /* Overshoot */

  100% {
    transform: scale(1);
  }
}
.ca__fx-bouncyScale {
  animation: bouncyScale 0.7s cubic-bezier(0, 0, 0.2, 1.4) both;
}
/* bouncyScale */
@keyframes bouncyScale {
  0% {
    transform: scale(0.5);
  }

  60% {
    transform: scale(1.1);
  }

  80% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-pulseElastic {
  animation: pulseElastic 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate; /* Infinite for pulsing */
}
@keyframes pulseElastic {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  } /* Pulse out */

  75% {
    transform: scale(0.95);
  } /* Slightly inward */
}
.ca__fx-rubber {
  animation: rubber 0.8s ease-out;
}
@keyframes rubber {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.25, 0.75);
  }

  40% {
    transform: scale(0.75, 1.25);
  }

  50% {
    transform: scale(1.15, 0.85);
  }

  65% {
    transform: scale(0.95, 1.05);
  }

  75% {
    transform: scale(1.05, 0.95);
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-squishBoing {
  animation-name: squishBoing;
  transform-origin: bottom center;
}
@keyframes squishBoing {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1.1, 0.8);
  } /* Squish down and slightly wider */

  50% {
    transform: scale(0.9, 1.2);
  } /* Stretch up and slightly narrower */

  75% {
    transform: scale(1.05, 0.95);
  } /* Overshoot slightly */

  100% {
    transform: scale(1, 1);
  } /* Return to normal */
}
.ca__fx-rubberExpand {
  animation-name: rubberExpand;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform;
}
@keyframes rubberExpand {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scaleX(1.3) scaleY(0.7);
  }

  60% {
    transform: scaleX(0.9) scaleY(1.1);
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-rubberShrink {
  animation-name: rubberShrink;
  animation-timing-function: ease-in;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes rubberShrink {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scaleX(1.1) scaleY(0.8);
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.ca__fx-matrixWave {
  animation: matrixWave 1.5s infinite ease-in-out;
}
@keyframes matrixWave {
  0% {
    transform: translateY(0) scaleY(1);
    filter: grayscale(0);
  }

  25% {
    transform: translateY(-3px) scaleY(1.2);
  }

  50% {
    transform: translateY(3px) scaleY(0.8);
    filter: grayscale(1);
  }

  75% {
    transform: translateY(-1px) scaleY(1.05);
    filter: none;
  }

  100% {
    transform: translateY(0) scaleY(1);
  }
}
/**
 * Module: Elevate
 * Filename: ca__Elevate.css
 */
.ca__fx-elevateLeft {
  animation-name: elevateLeft;
}
@keyframes elevateLeft {
  0% {
    transform: translateY(100%) rotate(-20deg);
    transform-origin: right;
  }

  40% {
    transform: rotate(20deg);
    transform-origin: right;
  }

  65% {
    transform: rotate(0deg);
    transform-origin: right;
  }
}
.ca__fx-elevateRight {
  animation-name: elevateRight;
}
@keyframes elevateRight {
  0% {
    transform: translateY(100%) rotate(20deg);
    transform-origin: left;
  }

  40% {
    transform: rotate(-20deg);
    transform-origin: left;
  }

  65% {
    transform: rotate(0deg);
    transform-origin: left;
  }
}
.ca__fx-bobble {
  animation-name: bobble;
  transform-origin: center;
}
@keyframes bobble {
  0%,
  100% {
    transform: translateX(0%);
  }

  15% {
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    transform: translateX(-5%) rotate(-1deg);
  }

  90% {
    transform: translateX(2%) rotate(0.5deg);
  }
}
.ca__fx-jelly {
  animation-name: jelly;
}
@keyframes jelly {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }

  75% {
    transform: scale(0.95, 1.05);
  }

  100% {
    transform: scale(1, 1);
  }
}
.ca__fx-perspectiveTilt {
  animation-name: perspectiveTilt;
}
@keyframes perspectiveTilt {
  50% {
    transform: perspective(400px) rotateY(10deg);
  }
}
.ca__fx-jello {
  animation: jello var(--jello-duration, 0.9s) both;
}
@keyframes jello {
  0%,
  100% {
    transform: none;
  }

  30% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  40% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  50% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  65% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  75% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
}
.ca__fx-waveBand {
  animation-name: waveBand;
  transform-origin: center center;
}
@keyframes waveBand {
  0%,
  100% {
    transform: scaleY(1) translateY(0); /* Normal state */
  }

  25% {
    transform: scaleY(1.1) translateY(-5px); /* Stretch vertically and move up slightly */
  }

  50% {
    transform: scaleY(0.9) translateY(5px); /* Compress vertically and move down */
  }

  75% {
    transform: scaleY(1.05) translateY(-2px); /* Slight overshoot */
  }
}
/**
 * Module: Fade in
 * Filename: ca__FadeIn.css
 */
.ca__fx-fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.ca__fx-fadeInLeft {
  animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
  }
}
.ca__fx-fadeInRight {
  animation-name: fadeInRight;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
  }
}
.ca__fx-fadeInTop {
  animation-name: fadeInTop;
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
  }
}
.ca__fx-fadeInBottom {
  animation-name: fadeInBottom;
}
@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
  }
}
/**
 * Module: Fade Out
 * Filename: ca__FadeOut.css
 */
.ca__fx-fadeOut {
  animation-name: fadeOut;
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.ca__fx-fadeOutLeft {
  animation-name: fadeOutLeft;
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
.ca__fx-fadeOutRight {
  animation-name: fadeOutRight;
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
.ca__fx-fadeOutTop {
  animation-name: fadeOutTop;
}
@keyframes fadeOutTop {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
.ca__fx-fadeOutBottom {
  animation-name: fadeOutBottom;
}
@keyframes fadeOutBottom {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
.ca__fx-tiltFadeBack {
  animation: tiltFadeBack 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
@keyframes tiltFadeBack {
  0% {
    transform: perspective(800px) rotateX(0deg) translateZ(0);
    opacity: 1;
  }

  100% {
    transform: perspective(800px) rotateX(40deg) translateZ(-100px);
    opacity: 0;
  }
}
/**
 * Module: FlipTwist Animation
 * Filename: ca__FlipTwist.css
 */
.ca__fx-flipTwistRight {
  animation-name: flipTwistRight;
  transform-origin: center right;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes flipTwistRight {
  0% {
    transform: perspective(1000px) rotateY(90deg) rotateZ(-25deg);
    opacity: 0;
  }

  60% {
    transform: perspective(1000px) rotateY(-10deg) rotateZ(5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(1000px) rotateY(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistLeft {
  animation-name: flipTwistLeft;
  transform-origin: center left;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes flipTwistLeft {
  0% {
    transform: perspective(1000px) rotateY(-90deg) rotateZ(25deg);
    opacity: 0;
  }

  60% {
    transform: perspective(1000px) rotateY(10deg) rotateZ(-5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(1000px) rotateY(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistTop {
  animation-name: flipTwistTop;
  transform-origin: top center;
  will-change: transform, opacity;
}
@keyframes flipTwistTop {
  0% {
    transform: perspective(800px) rotateX(90deg) rotateZ(20deg) translateY(-80%);
    opacity: 0;
  }

  50% {
    transform: perspective(800px) rotateX(-10deg) rotateZ(-10deg);
    opacity: 1;
  }

  100% {
    transform: perspective(800px) rotateX(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistBottom {
  animation-name: flipTwistBottom;
  transform-origin: bottom center;
  will-change: transform, opacity;
}
@keyframes flipTwistBottom {
  0% {
    transform: perspective(800px) rotateX(-90deg) rotateZ(-20deg) translateY(80%);
    opacity: 0;
  }

  50% {
    transform: perspective(800px) rotateX(10deg) rotateZ(10deg);
    opacity: 1;
  }

  100% {
    transform: perspective(800px) rotateX(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistPop {
  animation-name: flipTwistPop;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes flipTwistPop {
  0% {
    transform: perspective(600px) rotateY(60deg) rotateZ(-10deg) scale(0.8);
    opacity: 0;
  }

  60% {
    transform: perspective(600px) rotateY(-10deg) rotateZ(5deg) scale(1.05);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateY(0deg) rotateZ(0deg) scale(1);
  }
}
.ca__fx-flipTwistCombo {
  animation-name: flipTwistCombo;
  animation-duration: 1.5s;
  transform-origin: top right;
  will-change: transform, opacity;
  animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes flipTwistCombo {
  0% {
    transform: perspective(1000px) rotateX(90deg) rotateY(60deg) rotateZ(-30deg) translate(50%, -100%);
    opacity: 0;
  }

  50% {
    transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
  }
}
.ca__fx-flipTwistVertical {
  animation-name: flipTwistVertical;
  transform-origin: center top;
  will-change: transform, opacity;
}
@keyframes flipTwistVertical {
  0% {
    transform: perspective(900px) rotateX(-90deg) rotateZ(15deg);
    opacity: 0;
  }

  50% {
    transform: perspective(900px) rotateX(15deg) rotateZ(-5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(900px) rotateX(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistDiagonal {
  animation-name: flipTwistDiagonal;
  transform-origin: t