/* Converted from src/components/site/home/RotatingWords.module.css (CSS Module): local classes are prefixed "home-rotating-words__". */
/* Elementor animated headline, "rotate" style with the "slide" animation (horizontal):
   the leaving word slides out to the right while the next one slides in from the left, and the
   wrapper eases to the width of the new word (set from JS, `transition: width .5s`). The wrapper
   does not clip: like the original, the leaving word travels past the card's right edge (the
   surrounding section clips the horizontal overflow). */
.home-rotating-words__wrapper {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  text-align: start;
  white-space: nowrap;
  transition: width 0.5s;
}

.home-rotating-words__word {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  opacity: 0;
}

.home-rotating-words__active {
  position: relative;
  opacity: 1;
}

.home-rotating-words__entering {
  animation: home-rotating-words__word-in 0.6s;
}

.home-rotating-words__leaving {
  animation: home-rotating-words__word-out 0.6s;
}

@keyframes home-rotating-words__word-in {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-rotating-words__word-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  60% {
    opacity: 0;
    transform: translateX(110%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-rotating-words__wrapper {
    transition: none;
  }

  .home-rotating-words__entering,
  .home-rotating-words__leaving {
    animation: none;
  }
}