/**
 * Hierarchical Word Swap Animation
 * Fixed parts stay still, only variable parts animate
 */

.word-fixed {
  display: inline;
  font-weight: 600;
  color: #ff1493;
  transition: none;
}

.word-swap-end {
  display: inline-block;
  position: relative;
  font-weight: 600;
  color: #ff1493;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Fade animation for word changes */
.word-swap-end.fading,
.word-swap-means.fading {
  opacity: 0;
  transform: translateY(-3px);
}

.word-swap-end.appearing,
.word-swap-means.appearing {
  animation: wordAppear 0.5s ease forwards;
}

@keyframes wordAppear {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Color adjustments for different views */
body.bodylight .word-fixed,
body.bodylight .word-swap-end {
  color: #ff1493;
}

body.bodyindex .word-fixed,
body.bodyindex .word-swap-end {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}