.hero-role-rotator {
  display: inline-grid;
  position: relative;
  isolation: isolate;
  vertical-align: bottom;
  max-width: 100%;
  overflow: hidden;
  font-family: 'Onest', 'Inter', Arial, sans-serif;
  font-size: inherit;
  line-height: 1.4;
}

.hero-role-word {
  grid-area: 1 / 1;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
  z-index: 2;
}

.hero-role-word.is-active {
  opacity: 1;
  transform: translateY(0);
}

.hero-role-word.is-leaving {
  opacity: 0;
  transform: translateY(-110%);
}

.hero-role-rotator.is-ready .hero-role-word {
  transition:
    transform 520ms cubic-bezier(0.7, 0, 0.2, 1),
    opacity 520ms cubic-bezier(0.7, 0, 0.2, 1);
}

.hero-role-marker {
  position: absolute;
  left: 0;
  bottom: 0.1em;
  height: 0.55em;
  width: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  stroke: none;
  fill: var(--accent, #c3f459);
  transform-origin: left center;
}

.hero-role-rotator.is-ready .hero-role-marker {
  opacity: 1;
}

.hero-role-rotator.is-running .hero-role-marker.is-drawing {
  animation: hero-role-marker-draw 680ms cubic-bezier(0.65, 0.05, 0.35, 1) 420ms both;
}

@keyframes hero-role-marker-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

.hero-role-rotator.is-paused .hero-role-word,
.hero-role-rotator.is-reduced-motion .hero-role-word {
  transition: none;
}

@media (max-width: 360px) {
  .hero-role-rotator { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-role-rotator .hero-role-word { transition: none; }
  .hero-role-rotator .hero-role-marker { animation: none; }
}

@media print {
  .hero-role-rotator .hero-role-word { transition: none; }
  .hero-role-rotator .hero-role-marker { animation: none; }
}