/* ══ Rotating Text — vanilla JS component ══════════════════════
   Equivalente al componente React RotatingText de React Bits
   Sin dependencias externas.
═══════════════════════════════════════════════════════════════ */

.rotating-text {
  display: inline-flex;
  flex-wrap: wrap;
  white-space: pre-wrap;
  position: relative;
  vertical-align: bottom;
}

/* Accessible: screen readers see only this */
.rt-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rt-inner {
  display: inline-flex;
  flex-wrap: wrap;
}

/* Each word clips its characters — the "slot machine" effect */
.rt-word {
  display: inline-flex;
  overflow: hidden;
  padding-bottom: .15em; /* room for descenders */
}

/* Character base state: hidden below */
.rt-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

/* Slide IN from below */
.rt-char.is-entering {
  animation: rt-slide-in var(--rt-dur, .55s) cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--delay, 0s);
}

/* Slide OUT to above */
.rt-char.is-exiting {
  animation: rt-slide-out var(--rt-dur, .42s) cubic-bezier(.55, 0, 1, .45) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes rt-slide-in {
  from { transform: translateY(110%); opacity: 0;  }
  to   { transform: translateY(0);    opacity: 1;  }
}
@keyframes rt-slide-out {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-115%); opacity: 0; }
}

.rt-space { white-space: pre; }

/* Gradient text compatibility:
   background-clip:text on a parent doesn't clip through nested
   inline-block children. Reset the wrapper and re-apply the
   gradient on each character so the effect works correctly. */

.grad.rotating-text,
.gradient-text.rotating-text {
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: inherit;
}

/* .grad uses --gradient-warm (purple→violet) */
.grad .rt-char {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* .gradient-text uses --gradient (blue→purple) */
.gradient-text .rt-char {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}