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

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

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

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

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

  100% {
    opacity: 0;
  }
}
/**
 * Module: Bounce
 * Filename: ca__Bounce.css
 */
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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));
  }
}
.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));
  }
}
.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));
  }
}
.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));
  }
}
.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);
  }
}
.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));
  }
}
.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));
  }
}
.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;
  }
}
.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);
  }
}
.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));
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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
 */
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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
 */
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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
 */
.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%);
  }
}
.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%);
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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%);
  }
}
.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);
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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 */
  }
}
.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
 */
.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);
  }
}
.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);
  }
}
.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
 */
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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
 */
.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;
  }
}
.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;
  }
}
.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);
  }
}
.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;
  }
}
.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;
  }
}
.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
 */
.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;
  }
}
.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;
  }
}
.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);
  }
}
.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);
  }
}
.perspectiveTilt {
  animation-name: perspectiveTilt;
}
@keyframes perspectiveTilt {
  50% {
    transform: perspective(400px) rotateY(10deg);
  }
}
.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);
  }
}
.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
 */
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

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

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

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

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

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

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

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

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

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
.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
 */
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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%);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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%);
  }
}
.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);
  }
}
.flipTwistHover {
  display: inline-block;
  transform-origin: center;
  transition:
    transform 0.5s ease, opacity 0.5s ease;
}
.flipTwistHover:hover {
  transform: perspective(800px) rotateY(15deg) rotateZ(-5deg) scale(1.05);
  opacity: 0.95;
}
.flipTwistTiltHover {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}
.flipTwistTiltHover:hover {
  transform: perspective(900px) rotateZ(10deg) rotateY(20deg);
}
.flipTwistZoomHover {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.6s ease-out;
}
.flipTwistZoomHover:hover {
  transform: perspective(1000px) rotateY(-15deg) scale(1.1);
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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
 */
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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;
  }
}
.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;
  }
}
.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;
  }
}
.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
 */
.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);
  }
}
.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);
  }
}
.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
 */
.flyInTop {
  animation-name: flyInTop;
}
@keyframes flyInTop {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }

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

  50% {
    transform: translateY(50px);
    animation-timing-function: ease-out;
  }
}
.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;
  }
}
.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
 */
.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);
  }
}
.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;
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.glitchFlash {
  animation: glitchFlash 0.15s steps(2, end) infinite;
}
@keyframes glitchFlash {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
.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);
  }
}
.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;
  }
}
.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);
  }
}
.glitchSliceInSharp {
  animation-name: glitchSliceInSharp;
  animation-timing-function: ease-out;
}
@keyframes glitchSliceInSharp {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateX(-10px);
  }

  40% {
    clip-path: inset(60% 0 10% 0);
    transform: translateX(6px);
  }

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

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}
.glitchSliceExitSharp {
  animation: glitchSliceExitSharp 0.8s ease-in forwards;
}
@keyframes glitchSliceExitSharp {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }

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

  60% {
    clip-path: inset(60% 0 10% 0);
    transform: translateX(6px);
  }

  100% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateX(-12px);
  }
}
.glitchSliceTilt {
  animation: glitchSliceTilt 1.2s infinite linear;
}
@keyframes glitchSliceTilt {
  0% {
    clip-path: inset(0 0 0 0);
    transform: skew(0deg, 0deg);
  }

  25% {
    clip-path: inset(10% 0 80% 0);
    transform: skew(2deg, 0);
  }

  50% {
    clip-path: inset(30% 0 40% 0);
    transform: skew(-2deg, 1deg);
  }

  75% {
    clip-path: inset(5% 0 70% 0);
    transform: skew(1.5deg, -0.5deg);
  }

  100% {
    clip-path: inset(0 0 0 0);
    transform: skew(0deg, 0deg);
  }
}
.glitchSliceInTilt {
  animation-name: glitchSliceInTilt;
}
@keyframes glitchSliceInTilt {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: skew(8deg, -2deg) scaleY(0.8);
  }

  50% {
    clip-path: inset(60% 0 10% 0);
    transform: skew(-5deg, 1deg);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: skew(0, 0) scaleY(1);
  }
}
.glitchSliceExitTilt {
  animation: glitchSliceExitTilt 1s ease-in forwards;
}
@keyframes glitchSliceExitTilt {
  0% {
    transform: skew(0deg, 0deg);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  40% {
    transform: skew(-5deg, 1deg);
    clip-path: inset(40% 0 40% 0);
  }

  70% {
    transform: skew(8deg, -2deg);
    clip-path: inset(60% 0 10% 0);
  }

  100% {
    transform: skew(0deg, 0deg) scaleY(0.8);
    clip-path: inset(100% 0 0 0);
    opacity: 0;
  }
}
.glitchSliceCrack {
  animation: glitchSliceCrack 1.4s infinite;
}
@keyframes glitchSliceCrack {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }

  20% {
    clip-path: inset(45% 0 45% 0);
    transform: translateX(5px);
  }

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

  70% {
    clip-path: inset(48% 0 42% 0);
    transform: translateX(3px);
  }
}
.glitchSliceStagger {
  animation: glitchSliceStagger 3s steps(1, end) infinite;
}
@keyframes glitchSliceStagger {
  0% {
    clip-path: inset(0 0 0 0);
    transform: none;
  }

  10% {
    clip-path: inset(10% 0 70% 0);
    transform: translateX(4px);
  }

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

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

  40%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
.glitchScanBurst {
  animation: glitchScanBurst 1.4s ease-out both;
}
@keyframes glitchScanBurst {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: scaleY(1.1);
    filter: brightness(0.1);
    opacity: 0;
  }

  30% {
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%);
    filter: hue-rotate(60deg);
  }

  60% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: brightness(1.2);
  }

  100% {
    transform: scaleY(1);
    opacity: 1;
    filter: none;
  }
}
.hudAlertGlitch {
  animation: hudAlertGlitch 0.6s infinite steps(2, end);
  color: #ff4444;
}
@keyframes hudAlertGlitch {
  0%,
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }

  50% {
    opacity: 0;
    transform: translate(-2px, 2px);
  }
}
.glitchSequence {
  animation: initiateSequence 1.2s steps(3, end) forwards;
  color: #00f9ff;
  text-shadow: 0 0 4px #00f9ff;
}
@keyframes initiateSequence {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

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

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.corruptTextScramble {
  animation: corruptTextScramble 1.2s infinite steps(2, end);
  color: #ff0059;
  text-shadow: 0 0 4px #ff0059;
}
@keyframes corruptTextScramble {
  0% {
    opacity: 1;
    transform: skewX(0);
    filter: hue-rotate(0deg);
  }

  50% {
    opacity: 0.6;
    transform: skewX(15deg);
    filter: hue-rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: skewX(0);
    filter: hue-rotate(0deg);
  }
}
.corruptTextOffset {
  animation: corruptTextOffset 0.5s infinite steps(3, end);
  text-shadow:
    2px 0 #f0f,
    -2px 0 #0ff;
}
@keyframes corruptTextOffset {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(1px);
  }

  100% {
    transform: translateX(-1px);
  }
}
.criticalBreach {
  animation: criticalBreach 1.2s steps(2, end) infinite;
  color: #ff1a1a;
  background: black;
  text-shadow: 0 0 4px red;
}
@keyframes criticalBreach {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}
.glitchCompressIn {
  animation-name: glitchCompressIn;
  animation-timing-function: steps(3, end);
  will-change: transform, opacity;
}
@keyframes glitchCompressIn {
  0% {
    transform: scale(2, 0.6);
    filter: blur(6px) brightness(0.2);
    opacity: 0;
  }

  40% {
    transform: scale(1.5, 0.95);
    filter: blur(2px);
    opacity: 0.8;
  }

  100% {
    transform: scale(1, 1);
    filter: none;
    opacity: 1;
  }
}
.glitchCompressOut {
  animation-name: glitchCompressOut;
  animation-timing-function: steps(3, end);
  will-change: transform, opacity;
}
@keyframes glitchCompressOut {
  0% {
    transform: scale(1, 1);
    filter: none;
    opacity: 1;
  }

  60% {
    transform: scale(1.5, 0.95);
    filter: blur(2px);
    opacity: 0.8;
  }

  100% {
    transform: scale(2, 0.6);
    filter: blur(6px) brightness(0.2);
    opacity: 0;
  }
}
/**
 * Module: Hang And Drop
 * Filename: ca__HangAndDrop.css
 */
.hangAndDropLeft {
  animation-name: hangAndDropLeft;
  transform-origin: left;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes hangAndDropLeft {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(100deg);
  }

  60% {
    transform: rotate(90deg);
    opacity: 1;
  }

  90% {
    opacity: 0.4;
    filter: blur(2px);
  }

  100% {
    transform: translateY(600%) rotate(120deg) scale(0.95);
    opacity: 0;
  }
}
.hangAndDropRight {
  animation-name: hangAndDropRight;
  transform-origin: right;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes hangAndDropRight {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-100deg);
  }

  60% {
    transform: rotate(-90deg);
    opacity: 1;
  }

  90% {
    opacity: 0.4;
    filter: blur(2px);
  }

  100% {
    transform: translateY(600%) rotate(-120deg) scale(0.95);
    opacity: 0;
  }
}
/**
 * Module: Hang On
 * Filename: ca__HangOn.css
 */
.hangOnLeft {
  animation-name: hangOnLeft;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
  transform-origin: left;
}
@keyframes hangOnLeft {
  0% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(100deg);
  }

  55% {
    transform: rotate(80deg);
  }

  70% {
    transform: rotate(95deg);
  }

  85% {
    transform: rotate(85deg);
  }

  100% {
    transform: rotate(90deg);
  }
}
.hangOnRight {
  animation-name: hangOnRight;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
  transform-origin: right;
}
@keyframes hangOnRight {
  0% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(-100deg);
  }

  55% {
    transform: rotate(-80deg);
  }

  70% {
    transform: rotate(-95deg);
  }

  85% {
    transform: rotate(-85deg);
  }

  100% {
    transform: rotate(-90deg);
  }
}
/**
 * Module: Heartbeat
 * Filename: ca__Heartbeat.css
 */
.heartbeatSlow {
  animation-name: heartbeatSlow;
  animation-duration: 0.5s;
  animation-iteration-count: var(--cssanimation-infinite);
}
@keyframes heartbeatSlow {
  0%,
  100% {
    transform: scale(1);
  }

  35%,
  65% {
    transform: scale(1.2);
  }
}
.heartbeatFast {
  animation-name: heartbeatFast;
  animation-iteration-count: var(--cssanimation-infinite);
}
@keyframes heartbeatFast {
  0%,
  28%,
  70%,
  100% {
    transform: scale(1);
  }

  14%,
  42% {
    transform: scale(1.3);
  }
}
.elasticPulse {
  animation: elasticPulse var(--duration, 1.2s) ease-in-out infinite;
}
@keyframes elasticPulse {
  0%,
  100% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(0.95);
  }
}
.pulseShake {
  animation-name: pulseShake;
  animation-iteration-count: infinite;
}
@keyframes pulseShake {
  90% {
    transform: scale(1);
  }

  92% {
    transform: scale(1.2);
  }

  96% {
    transform: scale(1, 1);
  }

  98% {
    transform: scale(1.1);
  }
}
/**
 * Module: Kick out
 * Filename: ca__KickOut.css
 */
.kickOutBehind {
  animation-name: kickOutBehind;
  transform-origin: top;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
  animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
}
@keyframes kickOutBehind {
  0% {
    transform: rotate(0deg);
  }

  40% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.kickOutFront {
  animation-name: kickOutFront;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
  transform-origin: top;
  animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
}
@keyframes kickOutFront {
  0% {
    transform: rotate(0deg);
  }

  40% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
/**
 * Module: kite Animation
 * Filename: ca__Kite.css
 */
.kiteFloatInRight {
  animation-name: kiteFloatInRight;
  transform-origin: top left;
  will-change: transform, opacity;
}
@keyframes kiteFloatInRight {
  0% {
    transform: translate(80%, -100%) rotate(15deg);
    opacity: 0;
  }

  30% {
    transform: translate(-10%, 20%) rotate(-10deg);
    opacity: 1;
  }

  60% {
    transform: translate(5%, -10%) rotate(6deg);
  }

  80% {
    transform: translate(-2%, 5%) rotate(-3deg);
  }

  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
.kiteFloatInLeft {
  animation-name: kiteFloatInLeft;
  transform-origin: top right;
  will-change: transform, opacity;
}
@keyframes kiteFloatInLeft {
  0% {
    transform: translate(-80%, -100%) rotate(-15deg);
    opacity: 0;
  }

  30% {
    transform: translate(10%, 20%) rotate(10deg);
    opacity: 1;
  }

  60% {
    transform: translate(-5%, -10%) rotate(-6deg);
  }

  80% {
    transform: translate(2%, 5%) rotate(3deg);
  }

  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
.kiteHoverLoop {
  animation-name: kiteHoverLoop;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: center;
  will-change: transform;
}
@keyframes kiteHoverLoop {
  0% {
    transform: translateY(0%) rotate(0deg);
  }

  25% {
    transform: translateY(-4%) rotate(2deg);
  }

  50% {
    transform: translateY(2%) rotate(-3deg);
  }

  75% {
    transform: translateY(-3%) rotate(1.5deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.kiteEntrySnap {
  animation-name: kiteEntrySnap;
  transform-origin: center top;
  animation-timing-function: cubic-bezier(0.25, 0.9, 0.4, 1.4);
  will-change: transform, opacity;
}
@keyframes kiteEntrySnap {
  0% {
    transform: translateY(-100%) rotate(20deg);
    opacity: 0;
  }

  50% {
    transform: translateY(10%) rotate(-10deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.kiteWaveExit {
  animation-name: kiteWaveExit;
  transform-origin: bottom left;
  animation-timing-function: ease-in;
  will-change: transform, opacity;
}
@keyframes kiteWaveExit {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 1;
  }

  30% {
    transform: translate(-10%, -10%) rotate(-10deg);
  }

  70% {
    transform: translate(20%, -80%) rotate(25deg);
    opacity: 0.5;
  }

  100% {
    transform: translate(50%, -120%) rotate(40deg);
    opacity: 0;
  }
}
.kiteWhipIn {
  animation-name: kiteWhipIn;
  transform-origin: top left;
  animation-timing-function: cubic-bezier(0.4, -0.3, 0.7, 1.8);
  will-change: transform, opacity;
}
@keyframes kiteWhipIn {
  0% {
    transform: translate(-150%, -80%) rotate(-35deg);
    opacity: 0;
  }

  60% {
    transform: translate(10%, 10%) rotate(15deg);
    opacity: 1;
  }

  85% {
    transform: translate(-5%, -5%) rotate(-7deg);
  }

  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
.kiteSwingEntry {
  animation-name: kiteSwingEntry;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes kiteSwingEntry {
  0% {
    transform: translate(-60%, -100%) rotate(-80deg) scale(0.6);
    opacity: 0;
  }

  40% {
    transform: translate(10%, 10%) rotate(30deg) scale(1.05);
    opacity: 1;
  }

  70% {
    transform: rotate(-15deg);
  }

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

  40% {
    transform: translate(10%, -30%) rotate(15deg);
    opacity: 0.8;
  }

  80% {
    transform: translate(-20%, -90%) rotate(-25deg);
    opacity: 0.4;
  }

  100% {
    transform: translate(40%, -150%) rotate(45deg);
    opacity: 0;
  }
}
.kiteSnapBounceIn {
  animation-name: kiteSnapBounceIn;
  animation-timing-function: cubic-bezier(0.45, 1.5, 0.55, 1);
  transform-origin: center top;
  will-change: transform, opacity;
}
@keyframes kiteSnapBounceIn {
  0% {
    transform: translateY(-150%) rotate(25deg);
    opacity: 0;
  }

  60% {
    transform: translateY(10%) rotate(-10deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-5%) rotate(5deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.kiteFlipTwist {
  animation-name: kiteFlipTwist;
  transform-origin: center;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes kiteFlipTwist {
  0% {
    transform: perspective(800px) rotateX(90deg) rotateZ(-45deg) translateY(-100%);
    opacity: 0;
  }

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

  100% {
    transform: perspective(800px) rotateX(0deg) rotateZ(0deg) translateY(0%);
  }
}
.kiteTetheredFloat {
  animation-name: kiteTetheredFloat;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes kiteTetheredFloat {
  0% {
    transform: translateY(0%) rotate(0deg);
  }

  25% {
    transform: translateY(-5%) rotate(2deg);
  }

  50% {
    transform: translateY(3%) rotate(-2deg);
  }

  75% {
    transform: translateY(-3%) rotate(1.5deg);
  }

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

  30% {
    transform: rotate(20deg) translateY(20%);
    opacity: 1;
  }

  60% {
    transform: rotate(-60deg) translateY(60%) scale(0.8);
    opacity: 0.5;
  }

  100% {
    transform: rotate(90deg) translateY(120%) scale(0.5);
    opacity: 0;
  }
}
.kiteDragDrop {
  animation-name: kiteDragDrop;
  transform-origin: top center;
  animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1);
  will-change: transform, opacity;
}
@keyframes kiteDragDrop {
  0% {
    transform: translateY(-80%) rotate(15deg) scale(1.05);
    opacity: 0;
  }

  60% {
    transform: translateY(5%) rotate(-8deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-3%) rotate(4deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg) scale(1);
  }
}
/**
 * Module: Magical FX Pack
 * Filename: ca__imaginative.css
 */
.sparklePopIn {
  animation-name: sparklePopIn;
  animation-timing-function: ease-out;
  transform-origin: center;
  filter: brightness(1.5);
  will-change: transform, opacity;
}
@keyframes sparklePopIn {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
    filter: brightness(3) blur(4px);
  }

  60% {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.8);
  }

  100% {
    transform: scale(1) rotate(0);
    filter: none;
    opacity: 1;
  }
}
.wandReveal {
  animation-name: wandReveal;
  animation-timing-function: ease-out;
  transform-origin: left center;
  will-change: transform, opacity;
}
@keyframes wandReveal {
  0% {
    transform: translateX(-60%) rotate(-15deg);
    opacity: 0;
    filter: drop-shadow(0 0 8px gold);
  }

  80% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
  }

  100% {
    transform: translateX(0%) rotate(0);
    filter: none;
    opacity: 1;
  }
}
.magicDustExit {
  animation-name: magicDustExit;
  animation-timing-function: ease-in;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes magicDustExit {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }

  60% {
    opacity: 0.5;
    transform: scale(1.1) translateY(-10%);
    filter: blur(4px);
  }

  100% {
    opacity: 0;
    transform: scale(1.2) translateY(-40%);
    filter: blur(10px);
  }
}
.scanReveal {
  animation-name: scanReveal;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes scanReveal {
  0% {
    transform: scaleY(0) skewY(-20deg);
    opacity: 0;
  }

  60% {
    transform: scaleY(1.1) skewY(5deg);
    opacity: 1;
  }

  100% {
    transform: scaleY(1) skewY(0deg);
  }
}
.systemBootIn {
  animation: systemBootIn 1.4s ease-out both;
  transform-origin: top;
  filter: grayscale(1);
  will-change: transform, opacity;
}
@keyframes systemBootIn {
  0% {
    transform: scaleY(0.5) translateY(-30%);
    filter: grayscale(1) blur(4px);
    opacity: 0;
  }

  70% {
    transform: scaleY(1.1);
    filter: grayscale(0.3);
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    filter: none;
  }
}
.signalDropOut {
  animation-name: signalDropOut;
  animation-timing-function: ease-in;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes signalDropOut {
  0% {
    opacity: 1;
    filter: brightness(1);
  }

  50% {
    transform: scale(1.05) translateY(-10%);
    filter: brightness(1.5);
  }

  100% {
    opacity: 0;
    transform: scale(0.8) translateY(20%);
    filter: brightness(0.3);
  }
}
.approveBounce {
  animation-name: approveBounce;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes approveBounce {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

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

  100% {
    transform: scale(1);
  }
}
.whisperFloatIn {
  animation: whisperFloatIn 1.4s ease-out both;
  transform-origin: center;
}
@keyframes whisperFloatIn {
  0% {
    transform: translateY(30%) scale(0.95);
    opacity: 0;
    filter: blur(6px);
  }

  70% {
    filter: blur(1px);
  }

  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
    filter: none;
  }
}
.aetherGlowRise {
  animation: aetherGlowRise 1.5s ease-out both;
  transform-origin: bottom center;
}
@keyframes aetherGlowRise {
  0% {
    transform: translateY(80%) scale(0.8);
    opacity: 0;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  }

  50% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    opacity: 1;
  }

  100% {
    transform: translateY(0%) scale(1);
    box-shadow: none;
  }
}
.glintReveal {
  animation-name: glintReveal;
  animation-timing-function: ease-out;
  position: relative;
  overflow: hidden;
}
.glintReveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  transform: skewX(-30deg);
  animation: glintSweep 1s ease-out forwards;
}
@keyframes glintSweep {
  to {
    left: 125%;
  }
}
.enchantFloatDrop {
  animation: enchantFloatDrop 1.6s ease-in-out both;
  transform-origin: center;
}
@keyframes enchantFloatDrop {
  0% {
    transform: translateY(-100%) scale(1.2);
    opacity: 0;
    filter: brightness(1.5) blur(3px);
  }

  70% {
    transform: translateY(5%) scale(1.05);
    filter: blur(1px);
  }

  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
    filter: none;
  }
}
/**
 * Module: Mask Wipe Animations
 * Filename: ca__MaskWipe.css
 */
.mask-wipeInLeft {
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
  mask-image: linear-gradient(to right, black 50%, transparent 50%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation-name: mask-wipeInLeft;
}
@keyframes mask-wipeInLeft {
  0% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.mask-wipeInRight {
  -webkit-mask-image: linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(to right, transparent 50%, black 50%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation-name: mask-wipeInLeft;
}
@keyframes mask-wipeInRight {
  0% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.mask-wipeInTop {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  animation-name: mask-wipeInTop;
}
@keyframes mask-wipeInTop {
  0% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.mask-wipeInBottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
  mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  animation-name: mask-wipeInBottom;
}
@keyframes mask-wipeInBottom {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}
.mask-wipeOutLeft {
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
  mask-image: linear-gradient(to right, black 50%, transparent 50%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation-name: mask-wipeOutLeft;
}
@keyframes mask-wipeOutLeft {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }
}
.mask-wipeOutRight {
  -webkit-mask-image: linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(to right, transparent 50%, black 50%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation-name: mask-wipeOutRight;
}
@keyframes mask-wipeOutRight {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
.mask-wipeOutTop {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  animation-name: mask-wipeOutTop;
}
@keyframes mask-wipeOutTop {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 0 -100%;
    mask-position: 0 -100%;
  }
}
.mask-wipeOutBottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
  mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  animation-name: mask-wipeOutBottom;
}
@keyframes mask-wipeOutBottom {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}
.mask-shutterLinesIn {
  animation-name: mask-shutterLinesIn;
  -webkit-mask-image: repeating-linear-gradient(to right, black 0,black 30%, transparent 30%, transparent 60%);
  mask-image: repeating-linear-gradient(to right, black 0,black 30%, transparent 30%, transparent 60%);
  -webkit-mask-image: repeating-linear-gradient(to right, black 0 30%, transparent 30% 60%);
  mask-image: repeating-linear-gradient(to right, black 0 30%, transparent 30% 60%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-shutterLinesIn {
  0% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.mask-stripesWideIn {
  animation-name: mask-stripesWideIn;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 40%, transparent 40%, transparent 60%);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 40%, transparent 40%, transparent 60%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 40%, transparent 40% 60%);
  mask-image: repeating-linear-gradient(to bottom, black 0 40%, transparent 40% 60%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesWideIn {
  0% {
    -webkit-mask-position: 0 -100%;
    mask-position: 0 -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
/**
 * Module: Stripe Masking Animation
 * Filename: ca__maskingStripe.css
 */
.maskHorizontalBarsIn {
  animation-name: mask-horizontalBarsIn;
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0,transparent 10%, black 10%, black 20%);
  mask-image: repeating-linear-gradient(to bottom, transparent 0,transparent 10%, black 10%, black 20%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 10%, black 10% 20%);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 10%, black 10% 20%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-horizontalBarsIn {
  0% {
    -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0,transparent 10%, black 10%, black 20%);
    mask-image: repeating-linear-gradient(to bottom, transparent 0,transparent 10%, black 10%, black 20%);
    -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 10%, black 10% 20%);
    mask-image: repeating-linear-gradient(to bottom, transparent 0 10%, black 10% 20%);
    -webkit-mask-position: 0 -100%;
    mask-position: 0 -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesIn {
  animation-name: mask-stripesIn;
  -webkit-mask-image: repeating-linear-gradient(45deg, transparent 0,transparent 10%, black 10%, black 20%);
  mask-image: repeating-linear-gradient(45deg, transparent 0,transparent 10%, black 10%, black 20%);
  -webkit-mask-image: repeating-linear-gradient(45deg, transparent 0 10%, black 10% 20%);
  mask-image: repeating-linear-gradient(45deg, transparent 0 10%, black 10% 20%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesIn {
  0% {
    -webkit-mask-position: 0 -100%;
    mask-position: 0 -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskZigzagRevealIn {
  animation-name: mask-zigzagRevealIn;
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0,black 10px, transparent 10px, transparent 20px);
  mask-image: repeating-linear-gradient(135deg, black 0,black 10px, transparent 10px, transparent 20px);
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0 10px, transparent 10px 20px);
  mask-image: repeating-linear-gradient(135deg, black 0 10px, transparent 10px 20px);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-zigzagRevealIn {
  0% {
    -webkit-mask-position: -100% -100%;
    mask-position: -100% -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskCheckerboardIn {
  animation: mask-checkerboardIn 1s ease-out forwards;
  -webkit-mask-image:
    repeating-linear-gradient(0deg, transparent 0,transparent 25%, black 25%, black 50%),
    repeating-linear-gradient(90deg, transparent 0,transparent 25%, black 25%, black 50%);
  mask-image:
    repeating-linear-gradient(0deg, transparent 0,transparent 25%, black 25%, black 50%),
    repeating-linear-gradient(90deg, transparent 0,transparent 25%, black 25%, black 50%);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, transparent 0 25%, black 25% 50%),
    repeating-linear-gradient(90deg, transparent 0 25%, black 25% 50%);
  mask-image:
    repeating-linear-gradient(0deg, transparent 0 25%, black 25% 50%),
    repeating-linear-gradient(90deg, transparent 0 25%, black 25% 50%);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
@keyframes mask-checkerboardIn {
  0% {
    -webkit-mask-position: -100% -100%;
    mask-position: -100% -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskDiamondIn {
  animation: mask-diamondIn 1s ease-out forwards;
  -webkit-mask-image: repeating-linear-gradient(45deg, transparent 0,transparent 10%, black 10%, black 20%);
  mask-image: repeating-linear-gradient(45deg, transparent 0,transparent 10%, black 10%, black 20%);
  -webkit-mask-image: repeating-linear-gradient(45deg, transparent 0 10%, black 10% 20%);
  mask-image: repeating-linear-gradient(45deg, transparent 0 10%, black 10% 20%);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
@keyframes mask-diamondIn {
  0% {
    mask-position: -100% 100%;
    -webkit-mask-position: -100% 100%;
  }

  100% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
}
.maskLinesSlideIn {
  animation-name: mask-linesSlideIn;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 2px, transparent 2px, transparent 10px);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 2px, transparent 2px, transparent 10px);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 2px, transparent 2px 10px);
  mask-image: repeating-linear-gradient(to bottom, black 0 2px, transparent 2px 10px);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-linesSlideIn {
  0% {
    -webkit-mask-position: 0 -100%;
    mask-position: 0 -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskRainRevealIn {
  animation-name: mask-rainRevealIn;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 1px, transparent 1px, transparent 5px);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 1px, transparent 1px, transparent 5px);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 1px, transparent 1px 5px);
  mask-image: repeating-linear-gradient(to bottom, black 0 1px, transparent 1px 5px);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-rainRevealIn {
  0% {
    -webkit-mask-position: 0 -100%;
    mask-position: 0 -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesThinIn {
  animation-name: mask-stripesThinIn;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 4%, transparent 4%, transparent 8%);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 4%, transparent 4%, transparent 8%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 4%, transparent 4% 8%);
  mask-image: repeating-linear-gradient(to bottom, black 0 4%, transparent 4% 8%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesThinIn {
  0% {
    -webkit-mask-position: 0 -100%;
    mask-position: 0 -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesThinOut {
  animation-name: mask-stripesThinOut;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 4%, transparent 4%, transparent 8%);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 4%, transparent 4%, transparent 8%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 4%, transparent 4% 8%);
  mask-image: repeating-linear-gradient(to bottom, black 0 4%, transparent 4% 8%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesThinOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}
.maskThreadLinesIn {
  animation-name: mask-threadLinesIn;
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0,black 2px, transparent 2px, transparent 6px);
  mask-image: repeating-linear-gradient(135deg, black 0,black 2px, transparent 2px, transparent 6px);
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0 2px, transparent 2px 6px);
  mask-image: repeating-linear-gradient(135deg, black 0 2px, transparent 2px 6px);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-threadLinesIn {
  0% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStairStepIn {
  animation-name: mask-stairStepIn;
  -webkit-mask-image: repeating-linear-gradient(45deg, transparent 0,transparent 15%, black 15%, black 30%);
  mask-image: repeating-linear-gradient(45deg, transparent 0,transparent 15%, black 15%, black 30%);
  -webkit-mask-image: repeating-linear-gradient(45deg, transparent 0 15%, black 15% 30%);
  mask-image: repeating-linear-gradient(45deg, transparent 0 15%, black 15% 30%);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stairStepIn {
  0% {
    -webkit-mask-position: -150% 150%;
    mask-position: -150% 150%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesHorizontalReverseOut {
  animation-name: mask-stripesHorizontalReverseOut;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(to bottom, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesHorizontalReverseOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}
.maskStripesVerticalIn {
  animation-name: mask-stripesVerticalIn;
  -webkit-mask-image: repeating-linear-gradient(to right, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(to right, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(to right, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(to right, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesVerticalIn {
  0% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesVerticalOut {
  animation-name: mask-stripesVerticalOut;
  -webkit-mask-image: repeating-linear-gradient(to right, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(to right, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(to right, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(to right, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesVerticalOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
.maskStripesHorizontalReverseIn {
  animation-name: mask-stripesHorizontalReverseIn;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(to bottom, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesHorizontalReverseIn {
  0% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesDiagonalLeftIn {
  animation-name: mask-stripesDiagonalLeftIn;
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(135deg, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(135deg, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesDiagonalLeftIn {
  0% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesDiagonalUpIn {
  animation-name: mask-stripesDiagonalUpIn;
  -webkit-mask-image: repeating-linear-gradient(45deg, black 0,black 8%, transparent 8%, transparent 16%);
  mask-image: repeating-linear-gradient(45deg, black 0,black 8%, transparent 8%, transparent 16%);
  -webkit-mask-image: repeating-linear-gradient(45deg, black 0 8%, transparent 8% 16%);
  mask-image: repeating-linear-gradient(45deg, black 0 8%, transparent 8% 16%);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesDiagonalUpIn {
  0% {
    -webkit-mask-position: -100% -100%;
    mask-position: -100% -100%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesJitterIn {
  animation-name: mask-stripesJitterIn;
  -webkit-mask-image: repeating-linear-gradient(120deg, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(120deg, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(120deg, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(120deg, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 150% 150%;
  mask-size: 150% 150%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesJitterIn {
  0% {
    -webkit-mask-position: -50% -50%;
    mask-position: -50% -50%;
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.maskStripesVerticalOut {
  animation-name: mask-stripesVerticalOut;
  -webkit-mask-image: repeating-linear-gradient(to right, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(to right, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(to right, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(to right, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesVerticalOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
.maskStripesDiagonalLeftOut {
  animation-name: mask-stripesDiagonalLeftOut;
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(135deg, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(135deg, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(135deg, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesDiagonalLeftOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
.maskStripesDiagonalUpOut {
  animation-name: mask-stripesDiagonalUpOut;
  -webkit-mask-image: repeating-linear-gradient(45deg, black 0,black 8%, transparent 8%, transparent 16%);
  mask-image: repeating-linear-gradient(45deg, black 0,black 8%, transparent 8%, transparent 16%);
  -webkit-mask-image: repeating-linear-gradient(45deg, black 0 8%, transparent 8% 16%);
  mask-image: repeating-linear-gradient(45deg, black 0 8%, transparent 8% 16%);
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesDiagonalUpOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
}
.maskStripesWideOut {
  animation-name: mask-stripesWideOut;
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0,black 40%, transparent 40%, transparent 60%);
  mask-image: repeating-linear-gradient(to bottom, black 0,black 40%, transparent 40%, transparent 60%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 40%, transparent 40% 60%);
  mask-image: repeating-linear-gradient(to bottom, black 0 40%, transparent 40% 60%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesWideOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}
.maskStripesJitterOut {
  animation-name: mask-stripesJitterOut;
  -webkit-mask-image: repeating-linear-gradient(120deg, black 0,black 10%, transparent 10%, transparent 20%);
  mask-image: repeating-linear-gradient(120deg, black 0,black 10%, transparent 10%, transparent 20%);
  -webkit-mask-image: repeating-linear-gradient(120deg, black 0 10%, transparent 10% 20%);
  mask-image: repeating-linear-gradient(120deg, black 0 10%, transparent 10% 20%);
  -webkit-mask-size: 150% 150%;
  mask-size: 150% 150%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes mask-stripesJitterOut {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
}
/**
 * Module: Moon 
 * Filename: ca__Moon.css
 */
.moonEclipseIn {
  animation: moonEclipseIn 1.6s ease-out both;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes moonEclipseIn {
  0% {
    opacity: 0;
    transform: scale(1.3) rotate(10deg);
    filter: brightness(0) blur(12px);
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: none;
    clip-path: circle(100% at 50% 50%);
  }
}
.moonEclipseOut {
  animation: moonEclipseOut 1.4s ease-in both;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes moonEclipseOut {
  0% {
    opacity: 1;
    transform: scale(1);
    clip-path: circle(100% at 50% 50%);
    filter: none;
  }

  100% {
    opacity: 0;
    transform: scale(1.3) rotate(-10deg);
    clip-path: circle(0% at 50% 50%);
    filter: brightness(0) blur(10px);
  }
}
.moonSlideInCrescent {
  animation: moonSlideInCrescent 1.4s ease-out both;
  clip-path: ellipse(0% 100% at 0% 50%);
  will-change: transform, opacity;
}
@keyframes moonSlideInCrescent {
  0% {
    opacity: 0;
    transform: translateX(-30%);
    clip-path: ellipse(0% 100% at 0% 50%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
    clip-path: ellipse(100% 100% at 50% 50%);
  }
}
.moonSliceReveal {
  animation: moonSliceReveal 1.2s ease-out both;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  will-change: transform, opacity;
}
@keyframes moonSliceReveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
    transform: scale(1.8);
    filter: blur(4px);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}
.crescentOrbitRevealLeft {
  animation: crescentOrbitRevealLeft 1.6s ease-out both;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes crescentOrbitRevealLeft {
  0% {
    transform: translateX(-100%) rotate(-45deg) scale(0.8);
    opacity: 0;
    clip-path: ellipse(0% 100% at 0% 50%);
  }

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

  100% {
    transform: translateX(0%) rotate(0deg) scale(1);
    clip-path: ellipse(100% 100% at 50% 50%);
  }
}
.crescentOrbitRevealRight {
  animation: crescentOrbitRevealRight 1.6s ease-out both;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes crescentOrbitRevealRight {
  0% {
    transform: translateX(100%) rotate(45deg) scale(0.8);
    opacity: 0;
    clip-path: ellipse(0% 100% at 100% 50%);
  }

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

  100% {
    transform: translateX(0%) rotate(0deg) scale(1);
    clip-path: ellipse(100% 100% at 50% 50%);
  }
}
.moonSliceUp {
  animation: moonSliceUp 1.4s ease-out both;
  clip-path: inset(100% 0 0 0);
  will-change: transform, opacity;
}
@keyframes moonSliceUp {
  0% {
    clip-path: inset(100% 0 0 0);
    transform: translateY(20%);
    opacity: 0;
    filter: blur(5px);
  }

  100% {
    clip-path: inset(0% 0 0 0);
    transform: translateY(0%);
    opacity: 1;
    filter: none;
  }
}
.moonPhaseReveal {
  animation: moonPhaseReveal 1.6s ease-out both;
  clip-path: circle(0% at 50% 50%);
  will-change: transform, opacity;
}
@keyframes moonPhaseReveal {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    transform: scale(0.9);
    filter: brightness(0.2) blur(8px);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}
.lunarVeilIn {
  animation: lunarVeilIn 1.5s ease-out both;
  clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
  will-change: transform, opacity;
}
@keyframes lunarVeilIn {
  0% {
    clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
    opacity: 0;
    transform: scale(1.05);
    filter: blur(5px);
  }

  100% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}
.moonRippleGlow {
  animation: moonRippleGlow 2.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes moonRippleGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
  }
}
.moonDustFloat {
  animation: moonDustFloat 2.2s ease-out both;
  will-change: transform, opacity;
}
@keyframes moonDustFloat {
  0% {
    opacity: 0;
    transform: translateY(20%) scale(1.1);
    filter: blur(8px) grayscale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0%) scale(1);
    filter: none;
  }
}
.moonTiltRise {
  animation: moonTiltRise 1.7s ease-out both;
  transform-origin: bottom left;
  will-change: transform, opacity;
}
@keyframes moonTiltRise {
  0% {
    transform: translateY(60%) rotate(-15deg);
    opacity: 0;
    filter: brightness(0.4) blur(5px);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}
.moonCyclePulse {
  animation: moonCyclePulse 3.5s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes moonCyclePulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}
/**
 * Module: Moon Fade
 * Filename: ca__MoonFade.css
 */
.moonFade {
  animation-name: moonFade;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes moonFade {
  0% {
    opacity: 0;
    filter: brightness(0.3) blur(4px);
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}
.moonFadeUp {
  animation-name: moonFadeUp;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes moonFadeUp {
  0% {
    transform: translateY(20%) scale(0.95);
    opacity: 0;
    filter: brightness(0.4) blur(6px);
  }

  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
    filter: none;
  }
}
.moonFadeDown {
  animation-name: moonFadeDown;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes moonFadeDown {
  0% {
    transform: translateY(-20%) scale(1.05);
    opacity: 0;
    filter: brightness(0.4) blur(6px);
  }

  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
    filter: none;
  }
}
.moonFadeLeft {
  animation: moonFadeLeft 2s ease-out both;
  will-change: transform, opacity;
}
@keyframes moonFadeLeft {
  0% {
    transform: translateX(-30%) scale(0.95);
    opacity: 0;
    filter: brightness(0.4) blur(5px);
  }

  100% {
    transform: translateX(0%) scale(1);
    opacity: 1;
    filter: none;
  }
}
.moonFadeRight {
  animation: moonFadeRight 2s ease-out both;
  will-change: transform, opacity;
}
@keyframes moonFadeRight {
  0% {
    transform: translateX(30%) scale(0.95);
    opacity: 0;
    filter: brightness(0.4) blur(5px);
  }

  100% {
    transform: translateX(0%) scale(1);
    opacity: 1;
    filter: none;
  }
}
.moonFadeScaleUp {
  animation: moonFadeScaleUp 2.1s ease-out both;
  will-change: transform, opacity;
}
@keyframes moonFadeScaleUp {
  0% {
    transform: scale(0.85);
    opacity: 0;
    filter: brightness(0.3) blur(6px);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }
}
.moonFadeSlow {
  animation: moonFadeSlow 3.5s ease-out both;
  will-change: transform, opacity;
}
@keyframes moonFadeSlow {
  0% {
    transform: scale(0.9);
    opacity: 0;
    filter: brightness(0.25) blur(8px);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }
}
.moonFadeStrong {
  animation: moonFadeStrong 1.5s ease-out both;
  will-change: transform, opacity;
}
@keyframes moonFadeStrong {
  0% {
    transform: scale(1.1) rotate(-2deg);
    opacity: 0;
    filter: brightness(0.2) blur(12px);
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}
.moonFadeOut {
  animation-name: moonFadeOut;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes moonFadeOut {
  0% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    filter: brightness(0.3) blur(4px);
    transform: scale(0.95);
  }
}
.moonFadeOutUp {
  animation: moonFadeOutUp 1.6s ease-in both;
  will-change: transform, opacity;
}
@keyframes moonFadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0%) scale(1);
    filter: none;
  }

  100% {
    opacity: 0;
    transform: translateY(-30%) scale(0.9);
    filter: brightness(0.4) blur(8px);
  }
}
.moonFadeOutDown {
  animation: moonFadeOutDown 1.6s ease-in both;
  will-change: transform, opacity;
}
@keyframes moonFadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0%) scale(1);
    filter: none;
  }

  100% {
    opacity: 0;
    transform: translateY(30%) scale(0.9);
    filter: brightness(0.4) blur(8px);
  }
}
.moonFadeOutLeft {
  animation: moonFadeOutLeft 1.5s ease-in both;
  will-change: transform, opacity;
}
@keyframes moonFadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0%) scale(1);
    filter: none;
  }

  100% {
    opacity: 0;
    transform: translateX(-30%) scale(0.9);
    filter: brightness(0.4) blur(6px);
  }
}
.moonFadeOutRight {
  animation: moonFadeOutRight 1.5s ease-in both;
  will-change: transform, opacity;
}
@keyframes moonFadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0%) scale(1);
    filter: none;
  }

  100% {
    opacity: 0;
    transform: translateX(30%) scale(0.9);
    filter: brightness(0.4) blur(6px);
  }
}
.moonFadeOutScale {
  animation: moonFadeOutScale 1.7s ease-in both;
  will-change: transform, opacity;
}
@keyframes moonFadeOutScale {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }

  100% {
    transform: scale(0.85);
    opacity: 0;
    filter: brightness(0.2) blur(10px);
  }
}
/**
 * Module: Move From
 * Filename: ca__MoveFrom.css
 */
.moveFromLeft {
  animation-name: moveFromLeft;
  animation-timing-function: ease-out;
}
@keyframes moveFromLeft {
  from {
    transform: translateX(-200%);
  }
}
.moveFromRight {
  animation-name: moveFromRight;
  animation-timing-function: ease-out;
}
@keyframes moveFromRight {
  from {
    transform: translateX(200%);
  }
}
.moveFromTop {
  animation-name: moveFromTop;
  animation-timing-function: ease-out;
}
@keyframes moveFromTop {
  from {
    transform: translateY(-200%);
  }
}
.moveFromBottom {
  animation-name: moveFromBottom;
  animation-timing-function: ease-out;
}
@keyframes moveFromBottom {
  from {
    transform: translateY(200%);
  }
}
/**
 * Module: Move To
 * Filename: ca__MoveTo.css
 */
.moveToLeft {
  animation-name: moveToLeft;
  animation-timing-function: ease-out;
}
@keyframes moveToLeft {
  to {
    transform: translateX(200%);
  }
}
.moveToRight {
  animation-name: moveToRight;
  animation-timing-function: ease-out;
}
@keyframes moveToRight {
  to {
    transform: translateX(-200%);
  }
}
.moveToTop {
  animation-name: moveToTop;
  animation-timing-function: ease-out;
}
@keyframes moveToTop {
  to {
    transform: translateY(-200%);
  }
}
.moveToBottom {
  animation-name: moveToBottom;
  animation-timing-function: ease-out;
}
@keyframes moveToBottom {
  to {
    transform: translateY(200%);
  }
}
/**
 * Module: Nature
 * Filename: ca__Nature.css
 */
.petalDrop {
  animation-name: petalDrop;
  animation-timing-function: ease-out;
  transform-origin: top center;
  will-change: transform, opacity;
}
@keyframes petalDrop {
  0% {
    transform: translateY(-100%) rotateZ(15deg);
    opacity: 0;
  }

  40% {
    transform: translateY(30%) rotateZ(-10deg);
    opacity: 1;
  }

  70% {
    transform: translateY(90%) rotateZ(5deg);
  }

  100% {
    transform: translateY(120%) rotateZ(0deg);
    opacity: 0;
  }
}
.petalLiftOut {
  animation-name: petalLiftOut;
  animation-timing-function: ease-in;
  transform-origin: bottom center;
  will-change: transform, opacity;
}
@keyframes petalLiftOut {
  0% {
    transform: translateY(0%) rotateZ(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%) rotateZ(-20deg);
    opacity: 0;
  }
}
.leafFloatIn {
  animation-name: leafFloatIn;
  animation-timing-function: ease-out;
  transform-origin: top left;
  will-change: transform, opacity;
}
@keyframes leafFloatIn {
  0% {
    transform: translateX(-60%) rotate(-45deg) scale(0.8);
    opacity: 0;
  }

  50% {
    transform: translateX(10%) rotate(20deg) scale(1.05);
    opacity: 1;
  }

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

  100% {
    transform: translateX(80%) rotate(45deg) scale(0.6);
    opacity: 0;
  }
}
/**
 * Module: Perspective
 * Filename: ca__Perspective.css
 */
.perspectiveToTop {
  animation-name: perspectiveToTop;
  transform: perspective(500px);
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes perspectiveToTop {
  0% {
    transform: perspective(500px) rotateX(0deg) translateY(0) translateZ(0);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: perspective(500px) rotateX(90deg) translateY(-100px) translateZ(-150px);
    opacity: 0;
  }
}
.perspectiveToBottom {
  animation-name: perspectiveToBottom;
  transform: perspective(500px);
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes perspectiveToBottom {
  0% {
    transform: perspective(500px) rotateX(0deg) translateY(0) translateZ(0);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: perspective(500px) rotateX(-90deg) translateY(100px) translateZ(-150px);
    opacity: 0;
  }
}
.bounceInFromBottom {
  animation-name: bounceInFromBottom;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Can be customized for different bounce feels */
}
@keyframes bounceInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(100%); /* Starts far below */
  }

  60% {
    opacity: 1;
    transform: translateY(-20%); /* Bounces up higher than final position */
  }

  80% {
    transform: translateY(5%); /* Bounces down slightly */
  }

  100% {
    transform: translateY(0); /* Settles at final position */
    opacity: 1;
  }
}
/**
 * Module: Playful
 * Filename: ca__Playful.css
 */
.snapGridEntry {
  animation-name: snapGridEntry;
  animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1);
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes snapGridEntry {
  0% {
    transform: scale(0.5) rotate(-20deg);
    opacity: 0;
  }

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

  100% {
    transform: scale(0.3) rotate(15deg);
    opacity: 0;
  }
}
.bounceInWaddle {
  animation-name: bounceInWaddle;
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  will-change: transform, opacity;
}
@keyframes bounceInWaddle {
  0% {
    transform: translateY(100%) rotate(-25deg);
    opacity: 0;
  }

  40% {
    transform: translateY(-10%) rotate(15deg);
    opacity: 1;
  }

  70% {
    transform: translateY(3%) rotate(-8deg);
  }

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

  30% {
    transform: rotate(10deg);
  }

  100% {
    transform: translateY(120%) rotate(-20deg);
    opacity: 0;
  }
}
/**
 * Module: Pull release
 * Filename: ca__PullRelease.css
 */
.pullRelease {
  animation-name: pullRelease;
}
@keyframes pullRelease {
  15% {
    transform: scale(1.8);
  }
}
.pushRelease {
  animation-name: pushRelease;
}
@keyframes pushRelease {
  15% {
    transform: scale(0.5);
  }
}
/**
 * Module: Push Release From
 * Filename: ca__PushReleaseFrom.css
 */
.pushReleaseFrom {
  animation-name: pushReleaseFrom;
}
@keyframes pushReleaseFrom {
  0% {
    transform: scale(3, 3);
    opacity: 0;
  }

  30% {
    transform: scale(0.5, 0.5);
  }
}
.pushReleaseFromLeft {
  animation-name: pushReleaseFromLeft;
}
@keyframes pushReleaseFromLeft {
  0% {
    transform: translateX(-100%);
  }

  30% {
    transform: translateX(100px);
  }
}
.pushReleaseFromRight {
  animation-name: pushReleaseFromRight;
}
@keyframes pushReleaseFromRight {
  0% {
    transform: translateX(100%);
  }

  30% {
    transform: translateX(-100px);
  }
}
.pushReleaseFromTop {
  animation-name: pushReleaseFromTop;
}
@keyframes pushReleaseFromTop {
  0% {
    transform: translateY(-100%);
  }

  30% {
    transform: translateY(100px);
  }
}
.pushReleaseFromBottom {
  animation-name: pushReleaseFromBottom;
}
@keyframes pushReleaseFromBottom {
  0% {
    transform: translateY(100%);
  }

  30% {
    transform: translateY(-100px);
  }
}
/**
 * Module: Push Release To
 * Filename: ca__PushReleaseTo.css
 */
.pushReleaseTo {
  animation-name: pushReleaseTo;
}
@keyframes pushReleaseTo {
  30% {
    transform: scale(0.5, 0.5);
  }

  100% {
    transform: scale(5, 5);
    opacity: 0;
  }
}
.pushReleaseToLeft {
  animation-name: pushReleaseToLeft;
}
@keyframes pushReleaseToLeft {
  30% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
.pushReleaseToRight {
  animation-name: pushReleaseToRight;
}
@keyframes pushReleaseToRight {
  30% {
    transform: translateX(-100px);
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
.pushReleaseToTop {
  animation-name: pushReleaseToTop;
}
@keyframes pushReleaseToTop {
  30% {
    transform: translateY(100px);
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.pushReleaseToBottom {
  animation-name: pushReleaseToBottom;
}
@keyframes pushReleaseToBottom {
  30% {
    transform: translateY(-100px);
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
/**
 * Module: Quake & Quiver Series
 * Filename: ca__quake.css
 */
.jiggle {
  animation: jiggle var(--jiggle-duration, 0.8s) ease-in-out both;
}
@keyframes jiggle {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }

  20% {
    transform: translateX(var(--jiggle-intensity, 2px)) rotate(var(--jiggle-rotate, 1deg));
  }

  40% {
    transform: translateX(calc(var(--jiggle-intensity, 2px) * -1)) rotate(calc(var(--jiggle-rotate, 1deg) * -1));
  }

  60% {
    transform: translateX(calc(var(--jiggle-intensity, 2px) * 0.5)) rotate(calc(var(--jiggle-rotate, 1deg) * 0.5));
  }

  80% {
    transform: translateX(calc(var(--jiggle-intensity, 2px) * -0.5)) rotate(calc(var(--jiggle-rotate, 1deg) * -0.5));
  }
}
.quiver {
  animation: quiver var(--quiver-duration, 0.3s) ease-in-out infinite both;
}
@keyframes quiver {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(var(--quiver-intensity, 1px), 0);
  }

  50% {
    transform: translate(0, var(--quiver-intensity, 1px));
  }

  75% {
    transform: translate(calc(var(--quiver-intensity, 1px) * -1), 0);
  }
}
.tremor {
  animation: tremor var(--tremor-duration, 0.6s) ease-in-out both;
}
@keyframes tremor {
  0%,
  100% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(var(--tremor-intensity, 4px), var(--tremor-intensity, 4px));
  }

  40% {
    transform: translate(calc(var(--tremor-intensity, 4px) * -1), var(--tremor-intensity, 4px));
  }

  60% {
    transform: translate(var(--tremor-intensity, 4px), calc(var(--tremor-intensity, 4px) * -1));
  }

  80% {
    transform: translate(calc(var(--tremor-intensity, 4px) * -1), calc(var(--tremor-intensity, 4px) * -1));
  }
}
.rumble {
  animation: rumble var(--rumble-duration, 0.4s) ease-in-out both;
}
@keyframes rumble {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }

  10% {
    transform: translate(var(--rumble-intensity, 6px), var(--rumble-intensity, 6px)) rotate(var(--rumble-rotate, 2deg));
  }

  30% {
    transform: translate(calc(var(--rumble-intensity, 6px) * -1), var(--rumble-intensity, 6px))
      rotate(calc(var(--rumble-rotate, 2deg) * -1));
  }

  50% {
    transform: translate(var(--rumble-intensity, 6px), calc(var(--rumble-intensity, 6px) * -1))
      rotate(var(--rumble-rotate, 2deg));
  }

  70% {
    transform: translate(calc(var(--rumble-intensity, 6px) * -1), calc(var(--rumble-intensity, 6px) * -1))
      rotate(calc(var(--rumble-rotate, 2deg) * -1));
  }
}
.wiggle {
  transform-origin: center center;
  animation: wiggle var(--wiggle-duration, 1s) ease-in-out both;
}
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(var(--wiggle-angle, 4deg));
  }

  50% {
    transform: rotate(calc(var(--wiggle-angle, 4deg) * -1));
  }

  75% {
    transform: rotate(var(--wiggle-angle, 4deg));
  }
}
.rattle {
  animation: rattle var(--rattle-duration, 0.2s) ease-in-out both;
}
@keyframes rattle {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(var(--rattle-intensity, 3px));
  }

  40%,
  80% {
    transform: translateX(calc(var(--rattle-intensity, 3px) * -1));
  }
}
.buzz {
  animation: buzz var(--buzz-duration, 0.1s) linear both infinite;
}
@keyframes buzz {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(var(--buzz-intensity, 1px), var(--buzz-intensity, 1px));
  }

  50% {
    transform: translate(calc(var(--buzz-intensity, 1px) * -1), var(--buzz-intensity, 1px));
  }

  75% {
    transform: translate(var(--buzz-intensity, 1px), calc(var(--buzz-intensity, 1px) * -1));
  }
}
.jitter {
  animation: jitter var(--jitter-duration, 0.5s) ease-in-out both;
}
@keyframes jitter {
  0% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(calc(var(--jitter-intensity, 2px) * -1), var(--jitter-intensity, 2px));
  }

  20% {
    transform: translate(var(--jitter-intensity, 2px), calc(var(--jitter-intensity, 2px) * -1));
  }

  30% {
    transform: translate(calc(var(--jitter-intensity, 2px) * -1), calc(var(--jitter-intensity, 2px) * -1));
  }

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

  50% {
    transform: translate(0, 0);
  }

  60% {
    transform: translate(calc(var(--jitter-intensity, 2px) * -1), var(--jitter-intensity, 2px));
  }

  70% {
    transform: translate(var(--jitter-intensity, 2px), calc(var(--jitter-intensity, 2px) * -1));
  }

  80% {
    transform: translate(calc(var(--jitter-intensity, 2px) * -1), calc(var(--jitter-intensity, 2px) * -1));
  }

  90% {
    transform: translate(var(--jitter-intensity, 2px), var(--jitter-intensity, 2px));
  }

  100% {
    transform: translate(0, 0);
  }
}
.electricity {
  animation-name: electricity;
  animation-iteration-count: infinite;
}
@keyframes electricity {
  0%,
  37%,
  67%,
  85%,
  93% {
    transform: translateY(30px);
  }

  4%,
  64%,
  88% {
    transform: translateY(10px);
  }

  8%,
  24%,
  32%,
  44% {
    transform: translateY(5px);
  }

  12%,
  52%,
  60%,
  20% {
    transform: translateY(10px);
  }

  16%,
  40% {
    transform: translateY(5px);
  }

  28%,
  56% {
    transform: translateY(10px);
  }

  48%,
  72%,
  80%,
  96% {
    transform: translateY(30px);
  }

  76%,
  100% {
    transform: translateY(40px);
  }
}
/**
 * Module: Roll From
 * Filename: ca__RollFrom.css
 */
.rollFromLeft {
  animation-name: rollFromLeft;
}
@keyframes rollFromLeft {
  from {
    transform: translateX(-100%) perspective(600px) rotateY(180deg);
    opacity: 0;
  }

  to {
    transform: translateX(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }
}
.rollFromRight {
  animation-name: rollFromRight;
}
@keyframes rollFromRight {
  from {
    transform: translateX(100%) perspective(600px) rotateY(-180deg);
    opacity: 0;
  }

  to {
    transform: translateX(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }
}
.rollFromTop {
  animation-name: rollFromTop;
}
@keyframes rollFromTop {
  from {
    transform: translateY(-100%) perspective(600px) rotateY(180deg);
    opacity: 0;
  }

  to {
    transform: translateY(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }
}
.rollFromBottom {
  animation-name: rollFromBottom;
}
@keyframes rollFromBottom {
  from {
    transform: translateY(100%) perspective(600px) rotateY(-180deg);
    opacity: 0;
  }

  to {
    transform: translateY(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }
}
/**
 * Module: Roll To
 * Filename: ca__RollTo.css
 */
.rollToLeft {
  animation-name: rollToLeft;
}
@keyframes rollToLeft {
  from {
    transform: translateX(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  to {
    transform: translateX(-100%) perspective(600px) rotateY(180deg);
    opacity: 0;
  }
}
.rollToRight {
  animation-name: rollToRight;
}
@keyframes rollToRight {
  from {
    transform: translateX(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  to {
    transform: translateX(100%) perspective(600px) rotateY(-180deg);
    opacity: 0;
  }
}
.rollToTop {
  animation-name: rollToTop;
}
@keyframes rollToTop {
  from {
    transform: translateY(0) perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  to {
    transform: translateY(-100%) perspective(600px) rotateX(180deg);
    opacity: 0;
  }
}
.rollToBottom {
  animation-name: rollToBottom;
}
@keyframes rollToBottom {
  to {
    transform: translateY(0) perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  to {
    transform: translateY(100%) perspective(600px) rotateX(-180deg);
    opacity: 0;
  }
}
/**
 * Module: Rotate In
 * Filename: ca__RotateIn.css
 */
.rotateInLeft {
  animation-name: rotateInLeft;
}
@keyframes rotateInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%) rotate(0deg);
  }

  to {
    transform: translateX(0) rotate(360deg);
  }
}
.rotateInRight {
  animation-name: rotateInRight;
}
@keyframes rotateInRight {
  from {
    opacity: 0;
    transform: translateX(100%) rotate(0deg);
  }

  to {
    transform: translateX(0) rotate(-360deg);
  }
}
.rotateInTop {
  animation-name: rotateInTop;
}
@keyframes rotateInTop {
  from {
    opacity: 0;
    transform: translateY(-400%) rotate(0deg);
  }

  to {
    transform: translateX(0) rotate(360deg);
  }
}
.rotateInBottom {
  animation-name: rotateInBottom;
}
@keyframes rotateInBottom {
  from {
    opacity: 0;
    transform: translateY(400%) rotate(0deg);
  }

  to {
    transform: translateX(0) rotate(360deg);
  }
}
/**
 * Module: Rotate Out
 * Filename: ca__RotateOut.css
 */
.rotateOutLeft {
  animation-name: rotateOutLeft;
}
@keyframes rotateOutLeft {
  from {
    transform: translateX(0) rotate(360deg);
  }

  to {
    transform: translateX(-800px) rotate(0deg);
    opacity: 0;
  }
}
.rotateOutRight {
  animation-name: rotateOutRight;
}
@keyframes rotateOutRight {
  from {
    transform: translateX(0) rotate(-360deg);
  }

  to {
    transform: translateX(800px) rotate(0deg);
    opacity: 0;
  }
}
.rotateOutTop {
  animation-name: rotateOutTop;
}
@keyframes rotateOutTop {
  from {
    transform: translateX(0) rotate(360deg);
  }

  to {
    transform: translateY(-800px) rotate(0deg);
    opacity: 0;
  }
}
.rotateOutBottom {
  animation-name: rotateOutBottom;
}
@keyframes rotateOutBottom {
  from {
    transform: translateX(0) rotate(360deg);
  }

  to {
    transform: translateY(800px) rotate(0deg);
    opacity: 0;
  }
}
/**
 * Module: Rotation
 * Filename: ca__Rotation.css
 */
.rotate {
  animation-name: rotate;
  animation-timing-function: ease-in-out;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.rotateX {
  animation-name: rotateX;
}
@keyframes rotateX {
  from {
    transform: perspective(600px) rotateX(0deg);
  }

  to {
    transform: perspective(600px) rotateX(90deg);
  }
}
.rotateXIn {
  animation-name: rotateXIn;
}
@keyframes rotateXIn {
  0% {
    transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
    opacity: 0;
  }

  5% {
    transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg);
  }
}
.rotateXOut {
  animation-name: rotateXOut;
}
@keyframes rotateXOut {
  95% {
    transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg);
  }

  100% {
    transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
    opacity: 0;
  }
}
.rotateY {
  animation-name: rotateY;
}
@keyframes rotateY {
  from {
    transform: perspective(600px) rotateY(0deg);
  }

  to {
    transform: perspective(600px) rotateY(90deg);
  }
}
.rotateYIn {
  animation-name: rotateYIn;
}
@keyframes rotateYIn {
  0% {
    transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
    opacity: 0;
  }

  5% {
    transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg);
  }
}
.rotateYOut {
  animation-name: rotateYOut;
}
@keyframes rotateYOut {
  95% {
    transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg);
  }

  100% {
    transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
    opacity: 0;
  }
}
.scifiFlickerIn {
  animation: flickerIn 1.5s steps(10, end) forwards;
  opacity: 0;
  transform: scale(0.8) translateY(-20px);
}
@keyframes flickerIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-20px) rotateX(10deg);
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.2);
  }

  10% {
    opacity: 0.2;
    transform: scale(1.05) translateY(5px) rotateX(-5deg);
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
  }

  20% {
    opacity: 0;
    transform: scale(0.9) translateY(-10px) rotateX(0deg);
    text-shadow: none;
  }

  30% {
    opacity: 0.6;
    transform: scale(1.02) translateY(0px) rotateX(2deg);
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.4);
  }

  40% {
    opacity: 0.1;
    transform: scale(0.95) translateY(-5px) rotateX(0deg);
    text-shadow: none;
  }

  50% {
    opacity: 0.8;
    transform: scale(1.01) translateY(0px) rotateX(-1deg);
    text-shadow: 0 0 12px rgba(0, 255, 204, 0.6);
  }

  60% {
    opacity: 0.3;
    transform: scale(0.98) translateY(-2px) rotateX(1deg);
    text-shadow: none;
  }

  70% {
    opacity: 0.9;
    transform: scale(1) translateY(0px) rotateX(0deg);
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.7);
  }

  80% {
    opacity: 0.5;
    transform: scale(0.99) translateY(0px) rotateX(0deg);
    text-shadow: none;
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0px) rotateX(0deg);
    text-shadow:
      0 0 20px rgba(0, 255, 204, 0.8),
      0 0 30px rgba(0, 255, 204, 0.5);
  }
}
.digitalScanlineReveal {
  animation: scanlineReveal 3s steps(15, end) forwards;
  opacity: 0;
  transform: translateY(10px);
  text-shadow: none;
}
@keyframes scanlineReveal {
  0% {
    opacity: 0;
    transform: translateY(15px);
    text-shadow:
      0 -2px 0 #005544,
      0 2px 0 #00ffaa; /* Initial scanline effect */
  }

  10% {
    opacity: 0.2;
    transform: translateY(-5px);
    text-shadow:
      0 -1px 0 #006655,
      0 1px 0 #00cc88;
  }

  20% {
    opacity: 0.1;
    transform: translateY(8px);
    text-shadow:
      0 -3px 0 #004433,
      0 3px 0 #00ee99;
  }

  30% {
    opacity: 0.5;
    transform: translateY(-2px);
    text-shadow:
      0 -1px 0 #007766,
      0 1px 0 #00dd99;
  }

  40% {
    opacity: 0.3;
    transform: translateY(5px);
    text-shadow:
      0 -2px 0 #005544,
      0 2px 0 #00ffaa;
  }

  50% {
    opacity: 0.7;
    transform: translateY(0px);
    text-shadow:
      0 -1px 0 #008877,
      0 1px 0 #00eeaa;
  }

  60% {
    opacity: 0.4;
    transform: translateY(3px);
    text-shadow:
      0 -1px 0 #006655,
      0 1px 0 #00cc88;
  }

  70% {
    opacity: 0.8;
    transform: translateY(0px);
    text-shadow:
      0 0 5px rgba(0, 255, 170, 0.5),
      0 0 10px rgba(0, 255, 170, 0.3);
  }

  80% {
    opacity: 0.6;
    transform: translateY(1px);
    text-shadow: 0 0 3px rgba(0, 255, 170, 0.4);
  }

  90% {
    opacity: 0.95;
    transform: translateY(0px);
    text-shadow:
      0 0 10px rgba(0, 255, 170, 0.7),
      0 0 20px rgba(0, 255, 170, 0.4);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
    text-shadow:
      0 0 15px rgba(0, 255, 170, 0.8),
      0 0 25px rgba(0, 255, 170, 0.6); /* Final subtle glow */
  }
}
.scifiDigitalReveal {
  animation: digitalReveal 3s ease-out forwards;
  opacity: 0;
  filter: blur(10px);
  clip-path: inset(0 100% 0 0);
  text-shadow: 0 0 5px rgba(0, 255, 204, 0.4);
}
@keyframes digitalReveal {
  0% {
    opacity: 0;
    filter: blur(10px);
    clip-path: inset(0 100% 0 0); /* Fully clipped from right */
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.4);
  }

  10% {
    opacity: 0.2;
    filter: blur(8px);
    clip-path: inset(0 80% 0 0); /* Partially revealed */
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
  }

  30% {
    opacity: 0.6;
    filter: blur(4px);
    clip-path: inset(0 50% 0 0); /* Half revealed */
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.8);
  }

  50% {
    opacity: 0.9;
    filter: blur(2px);
    clip-path: inset(0 10% 0 0); /* Almost fully revealed */
    text-shadow: 0 0 20px rgba(0, 255, 204, 0.9);
  }

  70% {
    opacity: 1;
    filter: blur(0px);
    clip-path: inset(0 0% 0 0); /* Fully revealed */
    text-shadow:
      0 0 25px rgba(0, 255, 204, 1),
      0 0 35px rgba(0, 255, 204, 0.7);
  }

  80% {
    filter: blur(1px);
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.6);
  }

  90% {
    filter: blur(0px);
    text-shadow:
      0 0 25px rgba(0, 255, 204, 1),
      0 0 35px rgba(0, 255, 204, 0.7);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    clip-path: inset(0 0% 0 0); /* Final state, fully visible */
    text-shadow:
      0 0 20px rgba(0, 255, 204, 0.8),
      0 0 30px rgba(0, 255, 204, 0.5);
  }
}
/**
 * Module: Shake
 * Filename: ca__Shake.css
 */
.horizontalShake {
  animation-name: horizontalShake;
  animation-iteration-count: infinite;
}
@keyframes horizontalShake {
  3%,
  12%,
  21%,
  30%,
  39%,
  48%,
  57%,
  65%,
  74%,
  83%,
  92% {
    transform: translateX(5px);
  }

  6%,
  15%,
  24%,
  33%,
  42%,
  51%,
  60%,
  68%,
  77%,
  86%,
  95% {
    transform: translateX(3px);
  }

  9%,
  18%,
  27%,
  36%,
  45%,
  54%,
  63%,
  71%,
  80%,
  89%,
  98% {
    transform: translateX(-5px);
  }
}
.verticalShake {
  animation-name: verticalShake;
  animation-iteration-count: infinite;
}
@keyframes verticalShake {
  3%,
  12%,
  21%,
  30%,
  39%,
  48%,
  57%,
  65%,
  74%,
  83%,
  92% {
    transform: translateY(5px);
  }

  6%,
  15%,
  24%,
  33%,
  42%,
  51%,
  60%,
  68%,
  77%,
  86%,
  95% {
    transform: translateY(3px);
  }

  9%,
  18%,
  27%,
  36%,
  45%,
  54%,
  63%,
  71%,
  80%,
  89%,
  98% {
    transform: translateY(-5px);
  }
}
.madMax {
  animation-name: madMax;
  animation-iteration-count: infinite;
}
@keyframes madMax {
  3%,
  12%,
  21%,
  30%,
  39%,
  48%,
  57%,
  65%,
  74%,
  83%,
  92% {
    transform: translateY(5px) scale(1.1);
  }

  6%,
  15%,
  24%,
  33%,
  42%,
  51%,
  60%,
  68%,
  77%,
  86%,
  95% {
    transform: translateY(3px) scale(0.8);
  }

  9%,
  18%,
  27%,
  36%,
  45%,
  54%,
  63%,
  71%,
  80%,
  89%,
  98% {
    transform: translateY(-5px) scale(1.1);
  }
}
.coolHorizontalShake {
  animation-name: coolHorizontalShake;
  animation-iteration-count: infinite;
}
@keyframes coolHorizontalShake {
  3%,
  21%,
  39%,
  57%,
  74%,
  92% {
    transform: translateX(5px);
  }

  6%,
  24%,
  42%,
  60%,
  77%,
  95% {
    transform: translateX(3px);
  }

  9%,
  27%,
  45%,
  63%,
  80%,
  98% {
    transform: translateX(-5px);
  }
}
.coolVerticalShake {
  animation-name: coolVerticalShake;
  animation-iteration-count: infinite;
}
@keyframes coolVerticalShake {
  3%,
  21%,
  39%,
  57%,
  74%,
  92% {
    transform: translateY(5px);
  }

  6%,
  24%,
  42%,
  60%,
  77%,
  95% {
    transform: translateY(3px);
  }

  9%,
  27%,
  45%,
  63%,
  80%,
  98% {
    transform: translateY(-5px);
  }
}
.quietMad {
  animation-name: quietMad;
  animation-iteration-count: infinite;
}
@keyframes quietMad {
  3%,
  21%,
  39%,
  57%,
  74%,
  92% {
    transform: translateY(5px) scale(1.1);
  }

  6%,
  24%,
  42%,
  60%,
  77%,
  95% {
    transform: translateY(3px) scale(0.8);
  }

  9%,
  27%,
  45%,
  63%,
  80%,
  98% {
    transform: translateY(-5px) scale(1.1);
  }
}
.vibration {
  animation: vibration 0.1s linear infinite;
}
@keyframes vibration {
  50% {
    transform: skewY(1deg) skewX(-1deg) scale(1.06);
  }
}
/**
 * Module: Shock In
 * Filename: ca__ShockIn.css
 */
.shockZoom {
  animation-name: shockZoom;
}
@keyframes shockZoom {
  0% {
    transform: matrix(5, 0, 0, 5, 0, 0);
  }

  35% {
    transform: matrix(2, 0, 0, 2, 0, 0);
  }

  43% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
.shockInLeft {
  animation-name: shockInLeft;
}
@keyframes shockInLeft {
  0% {
    transform: matrix(1, 0, 0, 1, -800, 0);
  }

  35% {
    transform: matrix(1, 0, 0, 1, 50, 0);
  }

  43% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
.shockInRight {
  animation-name: shockInRight;
}
@keyframes shockInRight {
  0% {
    transform: matrix(1, 0, 0, 1, 800, 0);
  }

  35% {
    transform: matrix(1, 0, 0, 1, -50, 0);
  }

  43% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
.shockInTop {
  animation-name: shockInTop;
}
@keyframes shockInTop {
  0% {
    transform: matrix(1, 0, 0, 1, 0, -400);
  }

  35% {
    transform: matrix(1, 0, 0, 1, 0, 50);
  }

  43% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
.shockInBottom {
  animation-name: shockInBottom;
}
@keyframes shockInBottom {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 400);
  }

  35% {
    transform: matrix(1, 0, 0, 1, 0, -50);
  }

  43% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
/**
 * Module: Skew
 * Filename: ca__Skew.css
 */
.skewLeft {
  animation-name: skewLeft;
}
@keyframes skewLeft {
  70% {
    transform: skewX(40deg);
  }
}
.skewRight {
  animation-name: skewRight;
}
@keyframes skewRight {
  70% {
    transform: skewX(-40deg);
  }
}
.skewInLeft {
  animation-name: skewInLeft;
}
@keyframes skewInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%) skewX(-40deg);
  }

  70% {
    transform: skewX(-30deg);
  }
}
.skewInRight {
  animation-name: skewInRight;
}
@keyframes skewInRight {
  0% {
    opacity: 0;
    transform: translateX(100%) skewX(40deg);
  }

  70% {
    transform: skewX(30deg);
  }
}
.skewOutLeft {
  animation-name: skewOutLeft;
}
@keyframes skewOutLeft {
  20% {
    transform: skewX(40deg);
  }

  100% {
    transform: translateX(-100%) skewX(40deg);
    opacity: 0;
  }
}
.skewOutRight {
  animation-name: skewOutRight;
}
@keyframes skewOutRight {
  20% {
    transform: skewX(-40deg);
  }

  100% {
    transform: translateX(100%) skewX(-40deg);
    opacity: 0;
  }
}
/**
 * Module: Spin From
 * Filename: ca__SpinFrom.css
 */
.spinFromLeft {
  animation-name: spinFromLeft;
}
@keyframes spinFromLeft {
  from,
  to {
    transform-origin: left bottom;
  }

  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
.spinFromRight {
  animation-name: spinFromRight;
}
@keyframes spinFromRight {
  from,
  to {
    transform-origin: right bottom;
  }

  to {
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.spinFromTop {
  animation-name: spinFromTop;
}
@keyframes spinFromTop {
  from,
  to {
    transform-origin: left bottom;
  }

  to {
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.spinFromBottom {
  animation-name: spinFromBottom;
}
@keyframes spinFromBottom {
  from,
  to {
    transform-origin: right bottom;
  }

  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
/**
 * Module: Spin To
 * Filename: ca__SpinTo.css
 */
.spinToLeft {
  animation-name: spinToLeft;
}
@keyframes spinToLeft {
  from,
  to {
    transform-origin: left bottom;
  }

  from {
    transform: rotate(90deg);
    opacity: 0;
  }
}
.spinToRight {
  animation-name: spinToRight;
}
@keyframes spinToRight {
  from,
  to {
    transform-origin: right bottom;
  }

  from {
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.spinToTop {
  animation-name: spinToTop;
}
@keyframes spinToTop {
  from,
  to {
    transform-origin: left bottom;
  }

  from {
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.spinToBottom {
  animation-name: spinToBottom;
}
@keyframes spinToBottom {
  from,
  to {
    transform-origin: right bottom;
  }

  from {
    transform: rotate(90deg);
    opacity: 0;
  }
}
/**
 * Module: Spotlights
 * Filename: ca__Spotlights.css
 */
.unfoldAndRise {
  animation-name: unfoldAndRise;
  perspective: 1000px;
  perspective-origin: center bottom;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: bottom center;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes unfoldAndRise {
  0% {
    transform: rotateX(90deg) translateY(50px) scale(0.8);
    opacity: 0;
  }

  40% {
    transform: rotateX(0deg) translateY(0) scale(1);
    opacity: 1;
  }

  60% {
    transform: rotateX(-5deg) translateY(-10px);
    opacity: 1;
  }

  80% {
    transform: rotateX(0deg) translateY(0);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
.hu__hu__ {
  animation: hu__hu__ infinite 2s ease-in-out;
}
@keyframes hu__hu__ {
  50% {
    transform: translateY(30px);
  }
}
.peekpeek {
  animation-name: peekpeek;
}
@keyframes peekpeek {
  25% {
    transform: rotateX(30deg) translateY(10px) rotate(-13deg);
  }

  50% {
    transform: translateY(-22px) rotate(3deg) scale(1.1);
  }
}
.pepe {
  animation-name: pepe;
}
@keyframes pepe {
  0%,
  33%,
  66%,
  100% {
    transform: rotate(4deg);
  }

  16%,
  50%,
  83% {
    transform: rotate(-4deg);
  }
}
.lightning {
  animation-name: lightning;
}
@keyframes lightning {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.joltZoom {
  animation-name: joltZoom;
}
@keyframes joltZoom {
  10% {
    font-size: 140%;
  }

  40% {
    font-size: 80%;
  }

  100% {
    font-size: 100%;
  }
}
.jigglypop {
  animation-name: jigglypop;
}
@keyframes jigglypop {
  0%,
  100% {
    transform: rotate(0deg);
  }

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

  30% {
    transform: rotate(5deg);
  }

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

  60% {
    transform: rotate(3deg);
  }

  75% {
    transform: rotate(-1deg);
  }
}
.wooble {
  animation-name: wooble;
  transform-origin: center;
}
@keyframes wooble {
  0%,
  100% {
    transform: skewX(0deg);
  }

  20% {
    transform: skewX(-10deg);
  }

  40% {
    transform: skewX(8deg);
  }

  60% {
    transform: skewX(-6deg);
  }

  80% {
    transform: skewX(4deg);
  }
}
.colorFlicker {
  animation: flicker 1s infinite;
}
@keyframes flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 1;
  }

  20%,
  22%,
  24%,
  55% {
    opacity: 0.3;
  }
}
/**
 * Module: Swing
 * Filename: ca_Swing.css
 */
.swing {
  animation-name: swing;
  animation-timing-function: ease-in-out;
  transform-origin: top center;
}
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(5deg);
  }

  80% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.swingIn {
  animation-name: swingIn;
  animation-timing-function: ease-out;
  transform-origin: top center;
}
@keyframes swingIn {
  0% {
    transform: rotate(45deg);
    opacity: 0;
  }

  40% {
    transform: rotate(-20deg);
    opacity: 1;
  }

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

  80% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.swingOut {
  animation-name: swingOut;
  animation-timing-function: ease-in;
  transform-origin: top center;
}
@keyframes swingOut {
  0% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(-55deg);
    opacity: 0;
  }
}
.swingUp {
  animation-name: swingUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  transform-origin: bottom center;
}
@keyframes swingUp {
  0% {
    transform: translateY(100%) rotateX(45deg);
    opacity: 0;
  }

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

  100% {
    transform: translateY(0%) rotateX(0deg);
  }
}
.swingZoom {
  animation-name: swingZoom;
  transform-origin: center;
}
@keyframes swingZoom {
  0% {
    transform: scale(0.8) rotate(-10deg);
    opacity: 0;
  }

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

  60% {
    transform: scale(1) rotate(-5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
.swingPop {
  animation-name: swingPop;
  transform-origin: center bottom;
}
@keyframes swingPop {
  0% {
    transform: scale(0.5) rotate(-20deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.1) rotate(10deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
.swingSkew {
  animation-name: swingSkew;
  transform-origin: top left;
}
@keyframes swingSkew {
  0% {
    transform: skewX(0deg);
  }

  30% {
    transform: skewX(15deg);
  }

  60% {
    transform: skewX(-10deg);
  }

  100% {
    transform: skewX(0deg);
  }
}
.swingInFromRight {
  animation-name: swingInFromRight;
  transform-origin: bottom center;
}
@keyframes swingInFromRight {
  from {
    transform: rotate(45deg);
    opacity: 0;
  }

  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.swingInFromLeft {
  animation-name: swingInFromLeft;
  transform-origin: bottom center;
}
@keyframes swingInFromLeft {
  from {
    transform: rotate(-45deg);
    opacity: 0;
  }

  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.swingInFromTop {
  animation-name: swingInFromTop;
  transform-origin: top center;
}
@keyframes swingInFromTop {
  from {
    transform: rotateX(90deg);
    transform-origin: top center;
    opacity: 0;
  }

  to {
    transform: rotateX(0deg);
    transform-origin: top center;
    opacity: 1;
  }
}
.swingInFromBottom {
  animation-name: swingInFromBottom;
  transform-origin: bottom center;
}
@keyframes swingInFromBottom {
  from {
    transform: rotateX(-90deg);
    transform-origin: bottom center;
    opacity: 0;
  }

  to {
    transform: rotateX(0deg);
    transform-origin: bottom center;
    opacity: 1;
  }
}
.swingOutToRight {
  animation-name: swingOutToRight;
  transform-origin: bottom center;
}
@keyframes swingOutToRight {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }

  to {
    transform: rotate(45deg);
    opacity: 0;
  }
}
.swingOutToLeft {
  animation-name: swingOutToLeft;
  transform-origin: bottom center;
}
@keyframes swingOutToLeft {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }

  to {
    transform: rotate(-45deg);
    opacity: 0;
  }
}
.swingOutToTop {
  animation-name: swingOutToTop;
  transform-origin: top center;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}
@keyframes swingOutToTop {
  from {
    transform: rotateX(0deg);
    transform-origin: top center;
    opacity: 1;
  }

  to {
    transform: rotateX(90deg);
    transform-origin: top center;
    opacity: 0;
  }
}
.swingOutToBottom {
  animation-name: swingOutToBottom;
  transform-origin: bottom center;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}
@keyframes swingOutToBottom {
  from {
    transform: rotateX(0deg);
    transform-origin: bottom center;
    opacity: 1;
  }

  to {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
.swingInFromRight {
  animation-name: swingInFromRight;
  transform-origin: bottom;
}
@keyframes swingInFromRight {
  40% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
  }
}
.swingInFromLeft {
  animation-name: swingInFromLeft;
  transform-origin: bottom;
}
@keyframes swingInFromLeft {
  40% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
  }
}
.swingDrop {
  animation-name: swingDrop;
  transform-origin: top center;
}
@keyframes swingDrop {
  0% {
    transform: translateY(-100%) rotate(20deg);
    opacity: 0;
  }

  40% {
    transform: translateY(10%) rotate(-15deg);
    opacity: 1;
  }

  70% {
    transform: translateY(0%) rotate(5deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropSoft {
  animation-name: swingDropSoft;
  transform-origin: top center;
}
@keyframes swingDropSoft {
  0% {
    transform: translateY(-100%) rotate(15deg);
    opacity: 0;
  }

  50% {
    transform: translateY(5%) rotate(-10deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-2%) rotate(5deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropHard {
  animation-name: swingDropHard;
  transform-origin: top center;
}
@keyframes swingDropHard {
  0% {
    transform: translateY(-120%) rotate(35deg);
    opacity: 0;
  }

  40% {
    transform: translateY(20%) rotate(-25deg);
    opacity: 1;
  }

  70% {
    transform: translateY(0%) rotate(10deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropBounce {
  animation-name: swingDropBounce;
  transform-origin: top center;
}
@keyframes swingDropBounce {
  0% {
    transform: translateY(-100%) rotate(15deg);
    opacity: 0;
  }

  50% {
    transform: translateY(10%) rotate(-10deg);
    opacity: 1;
  }

  70% {
    transform: translateY(-5%) rotate(5deg);
  }

  85% {
    transform: translateY(3%) rotate(-2deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropTwist {
  animation-name: swingDropTwist;
  transform-origin: top center;
}
@keyframes swingDropTwist {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 0;
  }

  25% {
    transform: translateY(30%) rotate(25deg);
    opacity: 1;
  }

  50% {
    transform: translateY(10%) rotate(-20deg);
  }

  75% {
    transform: translateY(5%) rotate(10deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropElastic {
  animation-name: swingDropElastic;
  animation-timing-function: cubic-bezier(0.25, 1.5, 0.5, 1);
  transform-origin: top center;
}
@keyframes swingDropElastic {
  0% {
    transform: translateY(-120%) rotate(25deg);
    opacity: 0;
  }

  30% {
    transform: translateY(15%) rotate(-20deg);
    opacity: 1;
  }

  55% {
    transform: translateY(-8%) rotate(10deg);
  }

  75% {
    transform: translateY(4%) rotate(-5deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropChain {
  animation-name: swingDropChain;
  transform-origin: top center;
}
@keyframes swingDropChain {
  0% {
    transform: translateY(-100%) rotate(35deg);
    opacity: 0;
  }

  30% {
    transform: translateY(5%) rotate(-25deg);
    opacity: 1;
  }

  50% {
    transform: rotate(15deg);
  }

  70% {
    transform: rotate(-8deg);
  }

  90% {
    transform: rotate(4deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.swingDropHover {
  animation-name: swingDropHover;
  transform-origin: top center;
}
@keyframes swingDropHover {
  0% {
    transform: translateY(-80%) rotate(20deg);
    opacity: 0;
  }

  60% {
    transform: translateY(0%) rotate(-10deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-3%) rotate(5deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropKite {
  animation-name: swingDropKite;
  transform-origin: top right;
}
@keyframes swingDropKite {
  0% {
    transform: translate(-30%, -100%) rotate(20deg);
    opacity: 0;
  }

  40% {
    transform: translate(10%, 20%) rotate(-15deg);
    opacity: 1;
  }

  70% {
    transform: translate(-5%, -5%) rotate(5deg);
  }

  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
.swingDropSnap {
  animation-name: swingDropSnap;
  animation-timing-function: cubic-bezier(0.25, 0.85, 0.5, 1.25);
  transform-origin: top center;
}
@keyframes swingDropSnap {
  0% {
    transform: translateY(-90%) rotate(10deg);
    opacity: 0;
  }

  60% {
    transform: translateY(5%) rotate(-5deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.swingDropMagnet {
  animation-name: swingDropMagnet;
  transform-origin: top center;
}
@keyframes swingDropMagnet {
  0% {
    transform: translateY(-120%) rotate(15deg);
    opacity: 0;
  }

  50% {
    transform: translateY(10%) rotate(-8deg);
    opacity: 1;
  }

  75% {
    transform: translateY(-4%) rotate(4deg);
  }

  90% {
    transform: translateY(1%) rotate(-2deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
/**
 * Module: Swing In
 * Filename: ca__SwingIn.css
 */
.swing {
  transform-origin: top center;
  animation: swing var(--swing-duration, 1s) ease-in-out infinite;
}
@keyframes swing {
  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(5deg);
  }

  80% {
    transform: rotate(-5deg);
  }
}
.swingInLeft {
  animation-name: swingInLeft;
}
@keyframes swingInLeft {
  0% {
    transform: matrix(3, 0, 0, 3, -800, 0);
    animation-timing-function: ease-out;
  }

  50% {
    transform: matrix(1.3, 0, 0, 1.3, 20, 0);
  }
}
.swingInRight {
  animation-name: swingInRight;
}
@keyframes swingInRight {
  0% {
    transform: matrix(3, 0, 0, 3, 800, 0);
    animation-timing-function: ease-out;
  }

  50% {
    transform: matrix(1.3, 0, 0, 1.3, -20, 0);
  }
}
.swingInTop {
  animation-name: swingInTop;
}
@keyframes swingInTop {
  0% {
    transform: matrix(3, 0, 0, 3, 0, -800);
    animation-timing-function: ease-out;
  }

  50% {
    transform: matrix(1.3, 0, 0, 1.3, 0, 20);
  }
}
.swingInBottom {
  animation-name: swingInBottom;
}
@keyframes swingInBottom {
  0% {
    transform: matrix(3, 0, 0, 3, 0, 800);
    animation-timing-function: ease-out;
  }

  50% {
    transform: matrix(1.3, 0, 0, 1.3, 0, -20);
  }
}
/**
 * Module: Text Animation
 * Filename: ca__text.css
 */
.effect3d {
  animation-name: effect3d;
}
@keyframes effect3d {
  to {
    text-shadow:
      0 1px 0 #ccc,
      0 2px 0 #c9c9c9,
      0 3px 0 #bbb,
      0 4px 0 #b9b9b9,
      0 5px 0 #aaa,
      0 6px 1px rgba(0, 0, 0, 0.1),
      0 0 5px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.3),
      0 3px 5px rgba(0, 0, 0, 0.2),
      0 5px 10px rgba(0, 0, 0, 0.25),
      0 10px 10px rgba(0, 0, 0, 0.2),
      0 20px 20px rgba(0, 0, 0, 0.15);
  }
}
.spring {
  animation-name: springy;
}
@keyframes springy {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.4, 0.6);
  }

  50% {
    transform: scale(0.8, 1.3);
  }

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

  100% {
    transform: scale(1);
  }
}
.neonGlow {
  animation: neonGlow 1.5s ease-in-out infinite;
}
@keyframes neonGlow {
  0%,
  100% {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #f0f,
      0 0 20px #f0f;
  }

  50% {
    text-shadow:
      0 0 10px #fff,
      0 0 20px #0ff,
      0 0 30px #0ff;
  }
}
.colorPulse {
  animation: colorPulse 2s ease-in-out infinite;
}
@keyframes colorPulse {
  0%,
  100% {
    color: #fff;
  }

  50% {
    color: #ff4081;
  }
}
.trackExpand {
  animation-name: trackExpand;
}
@keyframes trackExpand {
  0% {
    transform: translateX(0);
    letter-spacing: 0;
  }

  100% {
    transform: translateX(5px);
    letter-spacing: 0.5em;
  }
}
.trackCollapse {
  animation-name: trackCollapse;
}
@keyframes trackCollapse {
  0% {
    transform: translateX(5px);
    letter-spacing: 0.5em;
  }

  100% {
    transform: translateX(0);
    letter-spacing: 0;
  }
}
.gradientText {
  background: linear-gradient(90deg, #ff0080, #7928ca);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 3s linear infinite;
  background-size: 200%;
}
@keyframes gradientText {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
  }
}
.rainbowText {
  animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
  0% {
    color: red;
  }

  20% {
    color: orange;
  }

  40% {
    color: yellow;
  }

  60% {
    color: green;
  }

  80% {
    color: blue;
  }

  100% {
    color: violet;
  }
}
: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;
}
/**
 * Module: WOW
 * Filename: ca__wow.css
 */
.blurTrailIn {
  animation-name: blurTrailIn;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
  filter: blur(8px);
}
@keyframes blurTrailIn {
  0% {
    transform: translateY(60%) scale(1.2);
    filter: blur(12px);
    opacity: 0;
  }

  80% {
    filter: blur(3px);
  }

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

  100% {
    transform: translateY(-60%) scale(0.95);
    filter: blur(10px);
    opacity: 0;
  }
}
.layerPeelIn {
  animation-name: layerPeelIn;
  animation-timing-function: ease-out;
  transform-origin: top left;
  will-change: transform, opacity;
  perspective: 800px;
}
@keyframes layerPeelIn {
  0% {
    transform: rotateX(-90deg) translateY(-100%);
    opacity: 0;
  }

  60% {
    transform: rotateX(20deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(0deg) translateY(0%);
  }
}
.layerPeelOut {
  animation-name: layerPeelOut;
  animation-timing-function: ease-in;
  transform-origin: bottom right;
  will-change: transform, opacity;
  perspective: 800px;
}
@keyframes layerPeelOut {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(90deg) translateY(100%);
    opacity: 0;
  }
}
.squishPop {
  animation-name: squishPop;
  animation-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1.2);
  animation-direction: normal;
  will-change: transform, opacity;
}
@keyframes squishPop {
  0% {
    transform: scale(0.2, 1.6);
    opacity: 0;
  }

  60% {
    transform: scale(1.3, 0.7);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
  }
}
.gravityPullIn {
  animation-name: gravityPullIn;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes gravityPullIn {
  0% {
    transform: scale(2) translateY(-100%) rotate(-10deg);
    opacity: 0;
  }

  80% {
    transform: scale(1.05) translateY(0%) rotate(2deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
.slinkyStretch {
  animation-name: slinkyStretch;
  animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1);
  will-change: transform, opacity;
}
@keyframes slinkyStretch {
  0% {
    transform: scaleY(0.2);
    opacity: 0;
  }

  50% {
    transform: scaleY(1.3);
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
  }
}
.wobbleEntry {
  animation-name: wobbleEntry;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes wobbleEntry {
  0% {
    transform: rotate(-30deg) scale(0.5);
    opacity: 0;
  }

  40% {
    transform: rotate(15deg) scale(1.05);
    opacity: 1;
  }

  70% {
    transform: rotate(-8deg);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}
.peelDropIn {
  animation-name: peelDropIn;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
  transform-origin: top left;
  perspective: 800px;
}
@keyframes peelDropIn {
  0% {
    transform: rotateX(-80deg) rotateZ(-10deg) translateY(-100%);
    opacity: 0;
  }

  80% {
    transform: rotateX(15deg) rotateZ(3deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(0) rotateZ(0) translateY(0);
  }
}
.vibeInPop {
  animation-name: vibeInPop;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
  transform-origin: center;
}
@keyframes vibeInPop {
  0% {
    transform: scale(0.4) rotate(-15deg);
    filter: brightness(1.8);
    opacity: 0;
  }

  40% {
    transform: scale(1.05) rotate(5deg);
    filter: brightness(1);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
.flickerPop {
  animation-name: flickerPop;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}
@keyframes flickerPop {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: brightness(0);
  }

  25% {
    opacity: 1;
    filter: brightness(2);
  }

  30% {
    filter: brightness(0.4);
  }

  50% {
    filter: brightness(1);
  }

  100% {
    transform: scale(1);
    filter: none;
  }
}
.inertiaSlideIn {
  animation-name: inertiaSlideIn;
  animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1.2);
  will-change: transform, opacity;
  transform-origin: left center;
}
@keyframes inertiaSlideIn {
  0% {
    transform: translateX(-120%) scaleX(1.4);
    opacity: 0;
  }

  60% {
    transform: translateX(10%) scaleX(0.95);
    opacity: 1;
  }

  100% {
    transform: translateX(0%) scaleX(1);
  }
}
.dropSpinIn {
  animation-name: dropSpinIn;
  animation-timing-function: ease-out;
  transform-origin: top center;
  will-change: transform, opacity;
}
@keyframes dropSpinIn {
  0% {
    transform: rotateZ(-180deg) translateY(-200%);
    opacity: 0;
  }

  60% {
    transform: rotateZ(20deg) translateY(10%);
    opacity: 1;
  }

  100% {
    transform: rotateZ(0deg) translateY(0%);
  }
}
.breezeLift {
  animation-name: breezeLift;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  transform-origin: center;
}
@keyframes breezeLift {
  0% {
    transform: translateY(40%) rotate(-3deg);
    opacity: 0;
  }

  50% {
    transform: translateY(-5%) rotate(2deg);
  }

  100% {
    transform: translateY(0%) rotate(0deg);
    opacity: 1;
  }
}
.featherFloat {
  animation-name: featherFloat;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes featherFloat {
  0% {
    transform: translateY(-120%) rotate(0deg);
    opacity: 0;
  }

  40% {
    transform: translateY(10%) rotate(10deg);
    opacity: 1;
  }

  80% {
    transform: translateY(0%) rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.powerUpPop {
  animation-name: powerUpPop;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes powerUpPop {
  0% {
    transform: scale(0.3);
    filter: hue-rotate(180deg) brightness(2);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
    filter: hue-rotate(90deg);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    filter: none;
  }
}
.levelUnlock {
  animation-name: levelUnlock;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  transform-origin: center;
}
@keyframes levelUnlock {
  0% {
    transform: scale(0.8) rotateX(90deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotateX(-30deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotateX(0deg);
  }
}
.softPulseIdle {
  animation-name: softPulseIdle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center;
}
@keyframes softPulseIdle {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.95;
  }
}
.shimmerWaveIdle {
  animation-name: shimmerWaveIdle;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@keyframes shimmerWaveIdle {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}
.gearSnapIn {
  animation-name: gearSnapIn;
  animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1);
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes gearSnapIn {
  0% {
    transform: scale(0.6) rotate(-90deg);
    opacity: 0;
  }

  40% {
    transform: scale(1.1) rotate(30deg);
    opacity: 1;
  }

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

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

  60% {
    transform: scale(0.95) rotate(-5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
.blushSlideIn {
  animation-name: blushSlideIn;
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  will-change: transform, opacity;
}
@keyframes blushSlideIn {
  0% {
    transform: translateY(100%) scale(0.9) rotate(-6deg);
    opacity: 0;
  }

  70% {
    transform: translateY(-4%) scale(1.05) rotate(3deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0%) scale(1) rotate(0deg);
  }
}
.stampSmash {
  animation-name: stampSmash;
  animation-timing-function: cubic-bezier(0.25, 1.8, 0.4, 1);
  will-change: transform, opacity;
  transform-origin: center;
}
@keyframes stampSmash {
  0% {
    transform: scale(2.4) rotate(15deg);
    opacity: 0;
  }

  60% {
    transform: scale(0.85) rotate(-8deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
.comboLevelRise {
  animation-name: comboLevelRise;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
  transform-origin: bottom center;
}
@keyframes comboLevelRise {
  0% {
    transform: translateY(40%) scale(0.8) rotateX(40deg);
    opacity: 0;
  }

  60% {
    transform: translateY(-8%) scale(1.1) rotateX(-10deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0%) scale(1) rotateX(0deg);
  }
}
.wiggleReactive {
  animation-name: wiggleReactive;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center;
}
@keyframes wiggleReactive {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(4deg);
  }

  50% {
    transform: rotate(-4deg);
  }

  75% {
    transform: rotate(2deg);
  }
}
.pulseGlow {
  animation-name: pulseGlow;
  animation-timing-function: ease-in-out;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
}
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.cosmicReveal {
  animation-name: cosmicReveal;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
  filter: blur(6px) brightness(2);
}
@keyframes cosmicReveal {
  0% {
    transform: scale(1.8);
    filter: blur(10px) brightness(4);
    opacity: 0;
  }

  70% {
    filter: blur(1px);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    filter: none;
  }
}
.scribbleGlowIn {
  animation-name: scribbleGlowIn;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
  filter: blur(5px);
}
@keyframes scribbleGlowIn {
  0% {
    transform: scale(1.4) rotate(-5deg);
    opacity: 0;
    filter: blur(8px);
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
    filter: none;
  }
}
.panelUnfold {
  animation-name: panelUnfold;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
  transform-origin: top center;
}
@keyframes panelUnfold {
  0% {
    transform: scaleY(0.2) rotateX(-90deg);
    opacity: 0;
  }

  60% {
    transform: scaleY(1.05) rotateX(10deg);
    opacity: 1;
  }

  100% {
    transform: scaleY(1) rotateX(0);
  }
}
/**
 * Module: Zoom In
 * Filename: ca__ZoomIn.css
 */
.zoomIn {
  animation-name: zoomIn;
}
@keyframes zoomIn {
  from {
    transform: scale(10);
    opacity: 0;
  }
}
.bounceZoomIn {
  animation-name: bounceZoomIn;
}
@keyframes bounceZoomIn {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }

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

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

  90% {
    transform: scale(1.1);
  }
}
.zoomInLeft {
  animation-name: zoomInLeft;
}
@keyframes zoomInLeft {
  from {
    transform: scale(10) translateX(-50%);
    opacity: 0;
  }
}
.zoomInRight {
  animation-name: zoomInRight;
}
@keyframes zoomInRight {
  from {
    transform: scale(10) translateX(50%);
    opacity: 0;
  }
}
.zoomInTop {
  animation-name: zoomInTop;
}
@keyframes zoomInTop {
  from {
    transform: scale(10) translateY(-50%);
    opacity: 0;
  }
}
.zoomInBottom {
  animation-name: zoomInBottom;
}
@keyframes zoomInBottom {
  from {
    transform: scale(10) translateY(50%);
    opacity: 0;
  }
}
.snapZoom {
  animation: snapZoom var(--duration, 1s) cubic-bezier(0.4, 1.8, 0.6, 1) both;
}
@keyframes snapZoom {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

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

  100% {
    transform: scale(1);
  }
}
/**
 * Module: Zoom Out
 * Filename: ca__ZoomOut.css
 */
.zoomOut {
  animation-name: zoomOut;
}
@keyframes zoomOut {
  to {
    transform: scale(10);
    opacity: 0;
  }
}
.zoomOutLeft {
  animation-name: zoomOutLeft;
}
@keyframes zoomOutLeft {
  to {
    transform: scale(10) translateX(-50%);
    opacity: 0;
  }
}
.zoomOutRight {
  animation-name: zoomOutRight;
}
@keyframes zoomOutRight {
  to {
    transform: scale(10) translateX(50%);
    opacity: 0;
  }
}
.zoomOutTop {
  animation-name: zoomOutTop;
}
@keyframes zoomOutTop {
  to {
    transform: scale(10) translateY(-50%);
    opacity: 0;
  }
}
.zoomOutBottom {
  animation-name: zoomOutBottom;
}
@keyframes zoomOutBottom {
  to {
    transform: scale(10) translateY(50%);
    opacity: 0;
  }
}
.zoomOutRotateUp {
  animation-name: zoomOutRotateUp;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}
@keyframes zoomOutRotateUp {
  0% {
    transform: perspective(700px) rotateX(0deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: perspective(700px) rotateX(80deg) scale(0.3) translateY(-80px);
    opacity: 0;
  }
}
.zoomPingExit {
  animation-name: zoomPingExit;
  animation-timing-function: ease-in-out;
}
@keyframes zoomPingExit {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.zoomToTarget {
  animation: zoomToTarget 1.1s ease-out forwards;
  transform-origin: center center;
}
@keyframes zoomToTarget {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }

  60% {
    transform: scale(1.2) translate(0, -10px);
  }

  100% {
    transform: scale(0.8) translate(10px, 20px);
    opacity: 0;
  }
}
/**
 * Module: Blob
 * Filename: ca__blob.css
 */
.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%;
  }
}
.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%;
  }
}
.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%;
  }
}
.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%;
  }
}
.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%;
  }
}
.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;
  }
}
.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);
  }
}
.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%;
  }
}
.orbitalSpin {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #ff66ff, #9900ff);
  border-radius: 50%;
  animation: orbitalSpin 5s linear infinite;
  position: relative;
  transform-origin: 100px center;
}
@keyframes orbitalSpin {
  0% {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }

  100% {
    transform: rotate(350deg) translateX(100px) rotate(-350deg);
  }
}
.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;
  }
}
.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: Elastic Animation
 * Filename: ca__elastic.css
 */
.elasticArise {
  animation: elasticArise 2s;
  animation-timing-function: 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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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 */
}
.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);
  }
}
.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);
  }
}
.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);
  }
}
.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 */
}
.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);
  }
}
.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 */
}
.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);
  }
}
.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;
  }
}
.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: Step Animation
 * Filename: ca__step.css
 */
.stepTypeIn {
  animation: stepTypeIn 1.2s steps(10, end) forwards;
  white-space: nowrap;
  overflow: hidden;
  will-change: opacity, transform;
}
@keyframes stepTypeIn {
  0% {
    transform: translateY(10px);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  80% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.stepSlideInX {
  animation: stepSlideInX 0.8s steps(6, end) forwards;
  transform: translateX(-50px);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes stepSlideInX {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.stepSlideOutX {
  animation: stepSlideOutX 0.8s steps(6, end) forwards;
  will-change: transform, opacity;
}
@keyframes stepSlideOutX {
  to {
    transform: translateX(50px);
    opacity: 0;
  }
}
.stepZoomIn {
  animation: stepZoomIn 0.9s steps(7, end) forwards;
  transform: scale(2);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes stepZoomIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.stepZoomOut {
  animation: stepZoomOut 0.9s steps(7, end) forwards;
  will-change: transform, opacity;
}
@keyframes stepZoomOut {
  to {
    transform: scale(2);
    opacity: 0;
  }
}
.stepFadeUp {
  animation: stepFadeUp 1s steps(5, end) forwards;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
@keyframes stepFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stepFadeDown {
  animation: stepFadeDown 1s steps(5, end) forwards;
  will-change: opacity, transform;
}
@keyframes stepFadeDown {
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}
.stepGlitchIn {
  animation: stepGlitchIn 1.1s steps(8, end) forwards;
  opacity: 0;
  transform: skewX(-15deg) scale(1.3);
  filter: blur(2px) brightness(1.5);
  will-change: transform, opacity, filter;
}
@keyframes stepGlitchIn {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
.stepGlitchOut {
  animation: stepGlitchOut 1.1s steps(8, end) forwards;
  will-change: transform, opacity, filter;
}
@keyframes stepGlitchOut {
  to {
    opacity: 0;
    transform: skewX(-15deg) scale(1.3);
    filter: blur(2px) brightness(1.5);
  }
}
.slideInSteps {
  animation-name: slideInSteps;
  animation-duration: 2s;
  animation-timing-function: steps(5, end);
  transform: translateX(0);
}
@keyframes slideInSteps {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(200px);
  }
}
.stepRotateIn {
  animation: stepRotateIn 0.9s steps(8, end) forwards;
  transform: rotate(-90deg);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes stepRotateIn {
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.stepRotateOut {
  animation: stepRotateOut 0.9s steps(8, end) forwards;
  will-change: transform, opacity;
}
@keyframes stepRotateOut {
  to {
    transform: rotate(90deg);
    opacity: 0;
  }
}
.stepJumpIn {
  animation: stepJumpIn 1s steps(5, end) forwards;
  transform: translateY(100%);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes stepJumpIn {
  80% {
    transform: translateY(-10%);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
  }
}
.stepJumpOut {
  display: inline-block;
  animation: stepJumpOut 1s steps(5, end) forwards;
  will-change: transform, opacity;
}
@keyframes stepJumpOut {
  20% {
    transform: translateY(-10%);
    opacity: 0.9;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
.stepScalePopIn {
  animation: stepScalePopIn 0.7s steps(4, end) forwards;
  transform: scale(0.4);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes stepScalePopIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.stepScalePopOut {
  animation: stepScalePopOut 0.7s steps(4, end) forwards;
  will-change: transform, opacity;
}
@keyframes stepScalePopOut {
  to {
    transform: scale(0.4);
    opacity: 0;
  }
}
.stepBlurReveal {
  animation: stepBlurReveal 1s steps(6, end) forwards;
  filter: blur(8px);
  opacity: 0.2;
  will-change: filter, opacity;
}
@keyframes stepBlurReveal {
  to {
    filter: blur(0);
    opacity: 1;
  }
}
.stepBlurOut {
  animation: stepBlurOut 1s steps(6, end) forwards;
  will-change: filter, opacity;
}
@keyframes stepBlurOut {
  to {
    filter: blur(8px);
    opacity: 0.2;
  }
}
/**
 * Module: Orbit Reveal Animations
 * Filename: cs__orbitReveal.css
 */
.orbitRevealLeft {
  animation: orbitRevealLeft 1.2s ease-out forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitRevealLeft {
  0% {
    transform: rotateY(-90deg) translateX(-300px) translateZ(-200px);
    opacity: 0;
  }

  100% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
}
.orbitExitLeft {
  animation: orbitExitLeft 1s ease-in forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitExitLeft {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }

  100% {
    transform: rotateY(-90deg) translateX(-300px) translateZ(-200px);
    opacity: 0;
  }
}
.orbitRevealRight {
  animation: orbitRevealRight 1.2s ease-out forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitRevealRight {
  0% {
    transform: rotateY(90deg) translateX(300px) translateZ(-200px);
    opacity: 0;
  }

  100% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
}
.orbitExitRight {
  animation: orbitExitRight 1s ease-in forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitExitRight {
  0% {
    transform: rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }

  100% {
    transform: rotateY(90deg) translateX(300px) translateZ(-200px);
    opacity: 0;
  }
}
.orbitRevealTop {
  animation: orbitRevealTop 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitRevealTop {
  0% {
    transform: rotateZ(-90deg) rotateY(90deg) translateZ(300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitRevealBottom {
  animation: orbitRevealBottom 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitRevealBottom {
  0% {
    transform: rotateZ(90deg) rotateY(-90deg) translateZ(-300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitReveal3 {
  animation: orbitReveal3 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitReveal3 {
  0% {
    transform: rotateZ(-90deg) rotateY(90deg) translateX(300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitReveal4 {
  animation: orbitReveal4 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitReveal4 {
  0% {
    transform: rotateZ(90deg) rotateY(-90deg) translateX(-300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitRevealDiagonalLeft {
  animation: orbitRevealDiagonalLeft 1.2s ease-out forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitRevealDiagonalLeft {
  0% {
    transform: rotateX(-45deg) rotateY(-45deg) translate(-300px, -300px) translateZ(-200px);
    opacity: 0;
  }

  100% {
    transform: rotateX(0) rotateY(0) translate(0, 0) translateZ(0);
    opacity: 1;
  }
}
.orbitExitDiagonalLeft {
  animation: orbitExitDiagonalLeft 1s ease-in forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitExitDiagonalLeft {
  0% {
    transform: rotateX(0) rotateY(0) translate(0, 0) translateZ(0);
    opacity: 1;
  }

  100% {
    transform: rotateX(-45deg) rotateY(-45deg) translate(-300px, -300px) translateZ(-200px);
    opacity: 0;
  }
}
.orbitRevealDiagonalRight {
  animation: orbitRevealDiagonalRight 1.2s ease-out forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitRevealDiagonalRight {
  0% {
    transform: rotateX(45deg) rotateY(45deg) translate(300px, 300px) translateZ(-200px);
    opacity: 0;
  }

  100% {
    transform: rotateX(0) rotateY(0) translate(0, 0) translateZ(0);
    opacity: 1;
  }
}
.orbitExitDiagonalRight {
  animation: orbitExitDiagonalRight 1s ease-in forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes orbitExitDiagonalRight {
  0% {
    transform: rotateX(0) rotateY(0) translate(0, 0) translateZ(0);
    opacity: 1;
  }

  100% {
    transform: rotateX(45deg) rotateY(45deg) translate(300px, 300px) translateZ(-200px);
    opacity: 0;
  }
}
.orbitRevealFromTopRight {
  animation: orbitRevealFromTopRight 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitRevealFromTopRight {
  0% {
    transform: rotateZ(-90deg) rotateY(90deg) translateZ(300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitRevealFromTopLeft {
  animation: orbitRevealFromTopLeft 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitRevealFromTopLeft {
  0% {
    transform: rotateZ(90deg) rotateY(-90deg) translateZ(300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitRevealFromBottomLeft {
  animation: orbitRevealFromBottomLeft 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitRevealFromBottomLeft {
  0% {
    transform: rotateZ(-90deg) rotateY(-90deg) translateZ(300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitRevealFromBottomRight {
  animation: orbitRevealFromBottomRight 1.5s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitRevealFromBottomRight {
  0% {
    transform: rotateZ(90deg) rotateY(90deg) translateZ(300px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
.orbitSwingFromTopRight {
  animation: orbitSwingFromTopRight 2s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitSwingFromTopRight {
  0% {
    transform: rotateX(-90deg) rotateY(90deg) translateX(500px);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg) rotateY(0deg) translateX(0);
    opacity: 1;
  }
}
.orbitSwingFromTopLeft {
  animation: orbitSwingFromTopLeft 2s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitSwingFromTopLeft {
  0% {
    transform: rotateX(90deg) rotateY(90deg) translateX(-500px);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg) rotateY(0deg) translateX(0);
    opacity: 1;
  }
}
.orbitSwingFromBottomLeft {
  animation: orbitSwingFromBottomLeft 2s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitSwingFromBottomLeft {
  0% {
    transform: rotateX(-90deg) rotateY(90deg) translateX(-500px);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg) rotateY(0deg) translateX(0);
    opacity: 1;
  }
}
.orbitSwingFromBottomRight {
  animation: orbitSwingFromBottomRight 2s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitSwingFromBottomRight {
  0% {
    transform: rotateX(90deg) rotateY(90deg) translateX(500px);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg) rotateY(0deg) translateX(0);
    opacity: 1;
  }
}
.orbitSpiralIn {
  animation: orbitSpiralIn 1.4s cubic-bezier(0.5, 1.5, 0.4, 1) forwards;
  transform-style: preserve-3d;
}
@keyframes orbitSpiralIn {
  0% {
    transform: rotateY(720deg) rotateX(180deg) scale(0) translateZ(-600px);
    opacity: 0;
  }

  100% {
    transform: rotateY(0) rotateX(0) scale(1) translateZ(0);
    opacity: 1;
  }
}
.orbitPopTwistIn {
  animation-name: orbitPopTwistIn;
  transform-style: preserve-3d;
}
@keyframes orbitPopTwistIn {
  0% {
    transform: scale(0.4) rotateX(-180deg) rotateY(-180deg) translateZ(-300px);
    opacity: 0;
  }

  100% {
    transform: scale(1) rotateX(0) rotateY(0) translateZ(0);
    opacity: 1;
  }
}
.orbitSwingFlipIn {
  animation: orbitSwingFlipIn 1.3s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitSwingFlipIn {
  0% {
    transform: rotateY(-120deg) translateX(-200px) scale(0.8);
    opacity: 0;
  }

  100% {
    transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
  }
}
.orbitSwingFlipOut {
  animation-name: orbitSwingFlipOut;
  transform-style: preserve-3d;
}
@keyframes orbitSwingFlipOut {
  0% {
    transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: rotateY(120deg) translateX(200px) scale(0.8);
    opacity: 0;
  }
}
.orbitSwirlReveal {
  animation-name: orbitSwirlReveal;
  transform-style: preserve-3d;
}
@keyframes orbitSwirlReveal {
  0% {
    transform: rotateZ(-360deg) scale(0) translateZ(-400px);
    opacity: 0;
  }

  100% {
    transform: rotateZ(0deg) scale(1) translateZ(0);
    opacity: 1;
  }
}
.orbitSwirlExit {
  animation-name: orbitSwirlExit;
  transform-style: preserve-3d;
}
@keyframes orbitSwirlExit {
  0% {
    transform: rotateZ(0deg) scale(1) translateZ(0);
    opacity: 1;
  }

  100% {
    transform: rotateZ(360deg) scale(0) translateZ(-400px);
    opacity: 0;
  }
}
.orbitRollIn3D {
  animation-name: orbitRollIn3D;
  transform-style: preserve-3d;
}
@keyframes orbitRollIn3D {
  0% {
    transform: rotateX(-360deg) translateY(-200px) scale(0.7);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg) translateY(0) scale(1);
    opacity: 1;
  }
}
.orbitRollOut3D {
  animation-name: orbitRollOut3D;
  transform-style: preserve-3d;
}
@keyframes orbitRollOut3D {
  0% {
    transform: rotateX(0deg) translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: rotateX(360deg) translateY(-200px) scale(0.7);
    opacity: 0;
  }
}
.orbitTiltReveal {
  animation-name: orbitTiltReveal;
  transform-style: preserve-3d;
}
@keyframes orbitTiltReveal {
  0% {
    transform: translateX(-150px) rotateZ(-15deg) rotateY(45deg) scale(0.85);
    opacity: 0;
  }

  100% {
    transform: translateX(0) rotateZ(0) rotateY(0) scale(1);
    opacity: 1;
  }
}
.orbitTiltExit {
  animation-name: orbitTiltExit;
  transform-style: preserve-3d;
}
@keyframes orbitTiltExit {
  0% {
    transform: translateX(0) rotateZ(0) rotateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateX(-150px) rotateZ(-15deg) rotateY(45deg) scale(0.85);
    opacity: 0;
  }
}
.orbitHelixRise {
  animation: orbitHelixRise 1.6s ease-out forwards;
  transform-style: preserve-3d;
}
@keyframes orbitHelixRise {
  0% {
    transform: rotateY(360deg) rotateZ(180deg) translateY(200px) scale(0.4);
    opacity: 0;
  }

  100% {
    transform: rotateY(0deg) rotateZ(0deg) translateY(0) scale(1);
    opacity: 1;
  }
}
.orbitHelixFall {
  animation: orbitHelixFall 1.4s ease-in forwards;
  transform-style: preserve-3d;
}
@keyframes orbitHelixFall {
  0% {
    transform: rotateY(0deg) rotateZ(0deg) translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: rotateY(-360deg) rotateZ(-180deg) translateY(200px) scale(0.4);
    opacity: 0;
  }
}