@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.1
* Built: 2025-07-18 18:25:30 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";
:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -800px;
}
.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: 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: 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: top right;
  will-change: transform, opacity;
}
@keyframes flipTwistDiagonal {
  0% {
    transform: perspective(1000px) rotateX(-60deg) rotateY(60deg) rotateZ(25deg);
    opacity: 0;
  }

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

  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistSlam {
  animation-name: flipTwistSlam;
  transform-origin: center left;
  will-change: transform, opacity;
  animation-timing-function: cubic-bezier(0.3, 1.5, 0.4, 1);
}
@keyframes flipTwistSlam {
  0% {
    transform: perspective(800px) rotateY(-120deg) rotateZ(20deg);
    opacity: 0;
  }

  70% {
    transform: rotateY(15deg) rotateZ(-10deg);
    opacity: 1;
  }

  100% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistZoom {
  animation-name: flipTwistZoom;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes flipTwistZoom {
  0% {
    transform: perspective(1000px) rotateY(75deg) scale(1.3);
    opacity: 0;
  }

  60% {
    transform: rotateY(-15deg) scale(0.95);
    opacity: 1;
  }

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

  50% {
    transform: rotateX(-15deg) translateY(5%);
    opacity: 1;
  }

  100% {
    transform: rotateX(0deg) translateY(0%);
  }
}
.ca__fx-flipTwistTiltIn {
  animation-name: flipTwistTiltIn;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes flipTwistTiltIn {
  0% {
    transform: perspective(900px) rotateY(90deg) rotateZ(-30deg);
    opacity: 0;
  }

  40% {
    transform: rotateY(-20deg) rotateZ(10deg);
    opacity: 1;
  }

  100% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
}
.ca__fx-flipTwistHover {
  display: inline-block;
  transform-origin: center;
  transition:
    transform 0.5s ease, opacity 0.5s ease;
}
.ca__fx-flipTwistHover:hover {
  transform: perspective(800px) rotateY(15deg) rotateZ(-5deg) scale(1.05);
  opacity: 0.95;
}
.ca__fx-flipTwistTiltHover {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}
.ca__fx-flipTwistTiltHover:hover {
  transform: perspective(900px) rotateZ(10deg) rotateY(20deg);
}
.ca__fx-flipTwistZoomHover {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.6s ease-out;
}
.ca__fx-flipTwistZoomHover:hover {
  transform: perspective(1000px) rotateY(-15deg) scale(1.1);
}
.ca__fx-flipTwistOutRight {
  animation-name: flipTwistOutRight;
  transform-origin: center right;
  will-change: transform, opacity;
}
@keyframes flipTwistOutRight {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
    opacity: 1;
  }

  60% {
    transform: rotateY(-20deg) rotateZ(10deg);
    opacity: 0.7;
  }

  100% {
    transform: rotateY(90deg) rotateZ(-15deg);
    opacity: 0;
  }
}
.ca__fx-flipTwistOutLeft {
  animation-name: flipTwistOutLeft;
  transform-origin: center left;
  will-change: transform, opacity;
}
@keyframes flipTwistOutLeft {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  60% {
    transform: rotateY(20deg) rotateZ(-10deg);
    opacity: 0.6;
  }

  100% {
    transform: rotateY(-90deg) rotateZ(10deg);
    opacity: 0;
  }
}
.ca__fx-flipTwistOutTop {
  animation-name: flipTwistOutTop;
  transform-origin: top center;
  will-change: transform, opacity;
}
@keyframes flipTwistOutTop {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }

  50% {
    transform: rotateX(20deg);
    opacity: 0.6;
  }

  100% {
    transform: rotateX(-90deg) translateY(-60%);
    opacity: 0;
  }
}
.ca__fx-flipTwistOutZoom {
  animation-name: flipTwistOutZoom;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes flipTwistOutZoom {
  0% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }

  60% {
    transform: rotateY(-15deg) scale(0.9);
    opacity: 0.6;
  }

  100% {
    transform: rotateY(75deg) scale(0.5);
    opacity: 0;
  }
}
/**
 * Module: Flip X
 * Filename: ca__FlipX.css
 */
.ca__fx-flipX {
  animation-name: flipX;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipX {
  from {
    transform: perspective(600px) rotateX(-180deg);
    opacity: 0;
  }

  to {
    transform: perspective(600px) rotateX(-360deg);
  }
}
.ca__fx-flipXZoomIn {
  animation-name: flipXZoomIn;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipXZoomIn {
  0% {
    transform: perspective(600px) rotateX(0deg) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(600px) rotateX(-180deg) scale(1.8);
    animation-timing-function: ease-out;
  }

  80% {
    transform: perspective(600px) rotateX(-360deg) scale(0.7);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-flipXZoomOut {
  animation-name: flipXZoomOut;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipXZoomOut {
  0% {
    transform: perspective(600px) rotateX(0deg) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(600px) rotateX(180deg) scale(1.8);
    animation-timing-function: ease-out;
  }

  80% {
    transform: perspective(600px) rotateX(360deg) scale(0.7);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-flipOutLeft {
  animation-name: flipOutLeft;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipOutLeft {
  0% {
    transform: perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateY(-90deg) translateX(-60px);
    opacity: 0;
  }
}
.ca__fx-flipOutRight {
  animation-name: flipOutRight;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipOutRight {
  0% {
    transform: perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateY(90deg) translateX(60px);
    opacity: 0;
  }
}
.ca__fx-flipOutXLeft {
  animation-name: flipOutXLeft;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipOutXLeft {
  0% {
    transform: perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateX(-90deg) translateX(-60px);
    opacity: 0;
  }
}
.ca__fx-flipOutXRight {
  animation-name: flipOutXRight;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipOutXRight {
  0% {
    transform: perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateX(90deg) translateX(60px);
    opacity: 0;
  }
}
/**
 * Module: Flip Y
 * Filename: ca__FlipY.css
 */
.ca__fx-flipY {
  animation-name: flipY;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipY {
  from {
    transform: perspective(600px) rotateY(180deg);
    opacity: 0;
  }

  to {
    transform: perspective(600px) rotateY(360deg);
  }
}
.ca__fx-flipYZoomIn {
  animation-name: flipYZoomIn;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipYZoomIn {
  0% {
    transform: perspective(600px) rotateY(0deg) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(600px) rotateY(180deg) scale(1.6);
    animation-timing-function: ease-out;
  }

  80% {
    transform: perspective(600px) rotateY(360deg) scale(0.7);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale(1);
  }
}
.ca__fx-flipYZoomOut {
  animation-name: flipYZoomOut;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes flipYZoomOut {
  0% {
    transform: perspective(600px) rotateY(0deg) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(600px) rotateY(180deg) scale(0.6);
    animation-timing-function: ease-out;
  }

  80% {
    transform: perspective(600px) rotateY(360deg) scale(1.8);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale(1);
  }
}
/**
 * Module: One After One Fade in
 * Filename: ca__OneAfterOneFadeIn.css
 */
.ca__fx-flyInTop {
  animation-name: flyInTop;
}
@keyframes flyInTop {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }

  50% {
    transform: translateY(-50px);
    animation-timing-function: ease-out;
  }
}
.ca__fx-flyInBottom {
  animation-name: flyInBottom;
}
@keyframes flyInBottom {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }

  50% {
    transform: translateY(50px);
    animation-timing-function: ease-out;
  }
}
.ca__fx-flyOutTop {
  animation-name: flyOutTop;
}
@keyframes flyOutTop {
  30% {
    transform: translateY(80px);
    animation-timing-function: ease-out;
  }

  80% {
    transform: translateY(-50px);
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
  }
}
.ca__fx-flyOutBottom {
  animation-name: flyOutBottom;
}
@keyframes flyOutBottom {
  30% {
    transform: translateY(-80px);
    animation-timing-function: ease-out;
  }

  80% {
    transform: translateY(50px);
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
  }
}
/**
 * Module: Glitch
 * Filename: ca__Glitch.css
 */
.ca__fx-microGlitch {
  animation-name: microGlitch;
  animation-timing-function: steps(1);
  will-change: transform, opacity;
}
@keyframes microGlitch {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }

  20% {
    transform: translate(-2px, 1px);
  }

  40% {
    transform: translate(3px, -1px);
  }

  60% {
    transform: translate(-1px, 2px);
  }

  80% {
    transform: translate(1px, -2px);
  }
}
.ca__fx-glitchPopIn {
  animation-name: glitchPopIn;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  will-change: transform, opacity;
}
@keyframes glitchPopIn {
  0% {
    transform: scale(0.8);
    filter: contrast(2) brightness(0.5);
    opacity: 0;
  }

  30% {
    transform: scale(1.2);
    filter: contrast(1.5) brightness(1.5);
    opacity: 1;
  }

  50% {
    transform: scale(0.95) translate(-2px, 2px);
  }

  70% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: scale(1);
    filter: none;
  }
}
.ca__fx-glitchExit {
  animation-name: glitchExit;
  animation-timing-function: steps(2);
  animation-iteration-count: 1;
  animation-direction: normal;
  will-change: transform, opacity;
}
@keyframes glitchExit {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }

  30% {
    transform: translate(4px, -2px);
  }

  60% {
    transform: translate(-4px, 2px);
  }

  100% {
    opacity: 0;
    transform: translate(-10px, 10px) scale(0.9);
  }
}
.ca__fx-glitchJitter {
  animation: glitchJitter 0.6s steps(2, end) infinite;
}
@keyframes glitchJitter {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(2px, -2px);
  }

  60% {
    transform: translate(-1px, 1px);
  }

  80% {
    transform: translate(1px, -1px);
  }

  100% {
    transform: translate(0, 0);
  }
}
.ca__fx-glitchSlice {
  animation: glitchSlice 1s infinite linear alternate;
}
@keyframes glitchSlice {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }

  20% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-5px, 0);
  }

  40% {
    clip-path: inset(60% 0 15% 0);
    transform: translate(5px, 0);
  }

  60% {
    clip-path: inset(30% 0 40% 0);
    transform: translate(-3px, 0);
  }

  80% {
    clip-path: inset(45% 0 30% 0);
    transform: translate(3px, 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
}
.ca__fx-glitchFlash {
  animation: glitchFlash 0.15s steps(2, end) infinite;
}
@keyframes glitchFlash {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
.ca__fx-glitchSliceInCollapse {
  animation-name: glitchSliceInCollapse;
  animation-timing-function: steps(5 end);
}
@keyframes glitchSliceInCollapse {
  0% {
    opacity: 0;
    transform: scaleY(0);
    clip-path: inset(100% 0 0 0);
  }

  40% {
    transform: scaleY(0.6);
    clip-path: inset(60% 0 10% 0);
  }

  70% {
    transform: scaleY(0.9);
    clip-path: inset(20% 0 20% 0);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    clip-path: inset(0 0 0 0);
  }
}
.ca__fx-typewriterCorrupt {
  animation: typewriterCorrupt 1.5s steps(2, end) infinite;
}
@keyframes typewriterCorrupt {
  0% {
    transform: translate(0, 0);
    opacity: 1;
    filter: none;
  }

  25% {
    transform: translate(-1px, 0);
    filter: blur(1px) hue-rotate(30deg);
  }

  50% {
    transform: translate(1px, 0);
    filter: grayscale(0.5);
  }

  75% {
    transform: translate(-0.5px, 0);
    opacity: 0.9;
  }

  100% {
    transform: translate(0, 0);
    filter: none;
    opacity: 1;
  }
}
.ca__fx-glitchSliceYank {
  animation: glitchSliceYank 1s infinite steps(2, end);
}
@keyframes glitchSliceYank {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }

  15% {
    clip-path: inset(10% 0 80% 0);
    transform: translateX(-5px);
  }

  30% {
    clip-path: inset(60% 0 25% 0);
    transform: translateX(4px);
  }

  45% {
    clip-path: inset(40% 0 50% 0);
    transform: translateX(-3px);
  }

  60% {
    clip-path: inset(20% 0 70% 0);
    transform: translateX(3px);
  }

  75% {
    clip-path: inset(50% 0 30% 0);
    transform: translateX(-2px);
  }

  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
}
.ca__fx-glitchSliceInSharp {
  animation-name: glitchSliceInSharp;
  animation-timing-function: ease-out;
}
@keyframes glitchSliceInSharp {
  0% {
    opacity: 0;
    clip-path: