/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.97.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.1_webpack@5.97.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.4_sass@1.83.4_webpack@5.97.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/components/animation/styles.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Show animation in admin */
body.wp-admin .klx-animated,
body.block-editor-iframe__body .klx-animated {
  opacity: 1;
}
body.wp-admin .klx-animated.klx-colorFadeIn,
body.block-editor-iframe__body .klx-animated.klx-colorFadeIn {
  color: var(--wp--preset--color--gray-500);
}
body.wp-admin .klx-animated.klx-colorFadeIn .emphasize,
body.block-editor-iframe__body .klx-animated.klx-colorFadeIn .emphasize {
  color: var(--wp--preset--color--gray-900);
}

.klx-animated {
  opacity: 0;
}
.klx-animated.klx-animated-active {
  opacity: 1;
  animation-duration: 800ms;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.59, 0, 0.32, 1);
}
.klx-animated.klx-animated-active.klx-fadeIn {
  animation-name: klx-fadeIn;
}
.klx-animated.klx-animated-active.klx-colorFadeIn {
  --original-color: var(--wp--preset--color--gray-500);
  --transition-color: var(--wp--preset--color--gray-500);
  animation-name: klx-color-fadeIn;
}
.klx-animated.klx-animated-active.klx-colorFadeIn .emphasize {
  --original-color: var(--wp--preset--color--gray-900);
  --transition-color: var(--wp--preset--color--gray-500);
  animation: inherit;
}
.klx-animated.klx-animated-active.klx-fadeInUp {
  animation-name: klx-fadeInUp;
}
.klx-animated.klx-animated-active.klx-delay-100ms {
  animation-delay: 0.1s;
}
.klx-animated.klx-animated-active.klx-delay-200ms {
  animation-delay: 0.2s;
}
.klx-animated.klx-animated-active.klx-delay-300ms {
  animation-delay: 0.3s;
}
.klx-animated.klx-animated-active.klx-delay-400ms {
  animation-delay: 0.4s;
}
.klx-animated.klx-animated-active.klx-delay-500ms {
  animation-delay: 0.5s;
}
.klx-animated.klx-animated-active.klx-delay-600ms {
  animation-delay: 0.6s;
}
.klx-animated.klx-animated-active.klx-delay-700ms {
  animation-delay: 0.7s;
}
.klx-animated.klx-animated-active.klx-delay-800ms {
  animation-delay: 0.8s;
}
.klx-animated.klx-animated-active.klx-delay-900ms {
  animation-delay: 0.9s;
}
.klx-animated.klx-animated-active.klx-delay-1000ms {
  animation-delay: 1s;
}

@keyframes klx-pulse {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes klx-color-fadeIn {
  0% {
    color: var(--wp--preset--color--gray-500);
    opacity: 0.3;
  }
  50% {
    color: var(--transition-color);
    opacity: 1;
  }
  100% {
    color: var(--original-color);
    opacity: 1;
  }
}
@keyframes klx-fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes klx-fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 30%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

/*# sourceMappingURL=animation.css.map*/