/* Word Rotation Effect */
.word-rotate-wrapper {
  display: inline-block;
  position: relative;
  text-align: center;
  min-width: 120px; /* Minimum width to fit all words */
  height: auto;
  vertical-align: baseline; /* Align with surrounding text */
}

.word-rotate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  white-space: nowrap; /* Keep words on one line */
  font-weight: 600; /* Semi-bold for better legibility */
  letter-spacing: 0.5px; /* Improved letter spacing for professionalism */
  animation: rotateWord 8s linear infinite 0s;
  visibility: hidden; /* Hide but keep layout impact */
  display: inline-block;
  transform-origin: center;
  text-align: center; /* Center each word */
}

/* Apply professional color scheme from design guidelines */
.word-rotate:nth-child(2) {
  animation-delay: 2s;
  background: linear-gradient(to right, #4A90E2, #F5F6F7); /* Gradient from blue to porcelain */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
}

.word-rotate:nth-child(3) {
  animation-delay: 4s;
  background: linear-gradient(to right, #DADDE1, #F5F6F7); /* Gradient from platinum to porcelain */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
}

.word-rotate:nth-child(4) {
  animation-delay: 6s;
  background: linear-gradient(to right, #0E2A47, #4A90E2); /* Gradient from ink-navy to blue */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
}

@keyframes rotateWord {
  0% {
    opacity: 0;
    transform: translateY(8px); /* Subtle movement for professional appearance */
    visibility: visible;
    filter: blur(2px); /* Subtle blur effect on entry */
  }
  5% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    filter: blur(0); /* Clear text when fully visible */
  }
  20% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    filter: blur(0); /* Maintain clarity */
  }
  22% {
    opacity: 0.9; /* Subtle flicker effect */
  }
  25%, 100% {
    opacity: 0;
    transform: translateY(-8px); /* Subtle exit animation */
    visibility: visible;
    filter: blur(2px); /* Subtle blur effect on exit */
  }
}

/* First word is static and visible by default with its own color */
.word-rotate.business {
  position: relative;
  opacity: 1;
  visibility: visible;
  background: linear-gradient(to right, #4A90E2 20%, #F5F6F7 80%); /* Blue gradient */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
}