.rotating-title {
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  position: relative;
  text-align: center;
}
.rotating-title:after {
  background: linear-gradient(
    to right,
    transparent,
    var(--color-ember),
    transparent
  );
  content: '';
  display: block;
  height: 3px;
  margin: 0.75rem auto 0;
  width: 5rem;
}
.rotating-title-slot {
  display: inline-block;
  position: relative;
}
.rotating-title-item {
  display: inline-block;
  white-space: nowrap;
  will-change: opacity, transform;
}
.animate-fade {
  animation: fadeInOut 10s ease-in-out forwards;
}
.animate-rise {
  animation: riseInOut 10s ease forwards;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes riseInOut {
  0% {
    opacity: 0.5;
    transform: translateY(0.6em);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}