/* Word x Word Animate - Global Styles */

.wxw-animate {
  display: inline;
  font-size: clamp(20px, 4vw, 40px);
}

.wxw-animate .wxw-word {
  display: inline-block;
  opacity: 0;
  margin-right: 0.25em;
}

/* Starting transforms per direction */
.wxw-animate.wxw-dir-bottom .wxw-word {
  transform: translateY(1em);
}

.wxw-animate.wxw-dir-top .wxw-word {
  transform: translateY(-1em);
}

.wxw-animate.wxw-dir-left .wxw-word {
  transform: translateX(-1em);
}

.wxw-animate.wxw-dir-right .wxw-word {
  transform: translateX(1em);
}

/* Animation base */
.wxw-animate.in .wxw-word {
  animation-duration: var(--wxw-duration, 700ms);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--wxw-start-delay, 0ms) + var(--i) * var(--wxw-gap, 200ms));
}

/* Direction-specific keyframes */
.wxw-animate.wxw-dir-bottom.in .wxw-word {
  animation-name: wxwWordFromBottom;
}

.wxw-animate.wxw-dir-top.in .wxw-word {
  animation-name: wxwWordFromTop;
}

.wxw-animate.wxw-dir-left.in .wxw-word {
  animation-name: wxwWordFromLeft;
}

.wxw-animate.wxw-dir-right.in .wxw-word {
  animation-name: wxwWordFromRight;
}

@keyframes wxwWordFromBottom {
  0%   { transform: translateY(1em); opacity: 0; }
  60%  { transform: translateY(-0.05em); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes wxwWordFromTop {
  0%   { transform: translateY(-1em); opacity: 0; }
  60%  { transform: translateY(0.05em); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes wxwWordFromLeft {
  0%   { transform: translateX(-1em); opacity: 0; }
  60%  { transform: translateX(0.05em); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes wxwWordFromRight {
  0%   { transform: translateX(1em); opacity: 0; }
  60%  { transform: translateX(-0.05em); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wxw-animate .wxw-word,
  .wxw-animate.in .wxw-word {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}