/* ============================================================
   06 · COMPONENTS · Rotator
   Slot-machine word rotator used inside the hero headline.
   ============================================================ */

.c-rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  padding: 0.02em 0 0.06em;
  line-height: 1;
}

.c-rotator__word {
  grid-column: 1;
  grid-row: 1;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 0.18em 0.04em;
  border-radius: 12px;
  font-style: italic;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--glow);
  justify-self: start;
}

/* Without JS (builder canvas), show only the first word and stack the
   others off-screen with display:none so they don't overlap. */
.c-rotator > .c-rotator__word ~ .c-rotator__word { display: none; }

/* With JS, the rotator cycles through words via add/remove classes. */
body.bricks-is-frontend .c-rotator > .c-rotator__word ~ .c-rotator__word { display: inline-block; }

body.bricks-is-frontend .c-rotator__word {
  opacity: 0;
  transform: translateY(115%);
  transition:
    opacity 360ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.bricks-is-frontend .c-rotator__word--in {
  opacity: 1;
  transform: translateY(0);
}

body.bricks-is-frontend .c-rotator__word--out {
  opacity: 0;
  transform: translateY(-115%);
  transition:
    opacity 260ms ease,
    transform 560ms cubic-bezier(0.4, 0, 1, 1);
}