.text-animation { container-type: inline-size; width: 100%; min-height: var(--text-box-height, 300px); display: grid; place-items: center; overflow: hidden; text-align: center; font-family: var(--text-font-family, sans-serif); }
.text-animation-item { box-sizing: border-box; grid-area: 1 / 1; width: 100%; min-width: 0; padding: 0; font-size: clamp(var(--text-min, 16px), calc(var(--text-scale, 3.8) * 1cqw), var(--text-max, 44px)); font-weight: var(--text-weight, 800); font-style: var(--text-style, italic); line-height: var(--text-line-height, 1.8); letter-spacing: var(--text-letter-spacing, normal); color: var(--text-color, #348c04); opacity: 0; visibility: hidden; overflow-wrap: anywhere; }
.text-animation-item:first-child { opacity: 1; visibility: visible; }
.text-animation.ready .text-animation-item { opacity: 0; visibility: hidden; }
.text-animation.ready .text-animation-item.is-active { opacity: 1; visibility: visible; }
.text-animation-item i { font-size: var(--small-size, .85em); }
.text-animation-item i i { font-size: 1em; }
.text-animation .char { display: inline-block; white-space: pre; }
.text-animation .is-active .char { opacity: 0; transform: translateX(-150px) scale(.3); animation: textAnimationLeftRight var(--text-enter-duration, .5s) both; animation-delay: var(--delay); }
@keyframes textAnimationLeftRight {
  0% { transform: translateX(-150px) scale(.3); opacity: 0; filter: blur(0); }
  40% { transform: translateX(50px) scale(.7); opacity: 1; color: var(--text-color, #348c04); filter: blur(0); }
  60% { color: var(--text-effect-color, #0f40ba); filter: blur(var(--text-effect-blur, 1px)); }
  80% { transform: translateX(0) scale(2); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; color: var(--text-color, #348c04); filter: blur(0); }
}
.text-animation.ready .text-animation-item.is-leaving { animation: textAnimationFadeOut var(--text-fade-duration, .5s) both; }
@keyframes textAnimationFadeOut { from { opacity: 1; } to { opacity: 0; } }
.text-animation.paused .text-animation-item, .text-animation.paused .char { animation-play-state: paused !important; }
@supports not (font-size: 1cqw) { .text-animation-item { font-size: clamp(var(--text-min, 16px), calc(var(--text-scale, 3.8) * 1vw), var(--text-max, 44px)); } }
@media (prefers-reduced-motion: reduce) {
  .text-animation:not([data-motion="full"]) .is-active .char {
    transform: none;
    animation-name: textAnimationGentleIn;
  }
}
@keyframes textAnimationGentleIn { from { opacity: 0; } to { opacity: 1; } }