/* ==========================================================================
   Word Rotator
   Rotates a word/phrase in place, "barrel" style: the current word sits
   front-and-center while the word before it and the word after it peek in
   above and below, tilted away and dimmed, like they're riding around the
   surface of a rotating drum. On each rotation, everything advances one
   step around that drum.
   ========================================================================== */

/* NOTE ON SPECIFICITY + !important: this widget gets dropped into an
   existing theme's markup (Elementor headings in particular carry a lot
   of their own CSS, often targeting spans inside headings with selectors
   like ".elementor-widget-heading .elementor-heading-title span"). Such a
   selector out-specifies a plain single class -- and when a rule like
   that ALSO uses !important (common in aggressive theme resets), a
   same-specificity !important on our side is not enough to win; CSS
   still breaks !important-vs-!important ties by specificity. So every
   selector below repeats the class three times (".word-rotator.word-
   rotator.word-rotator"), a standard technique that inflates our
   specificity to beat realistic theme selectors, without needing to know
   what the host page's exact CSS looks like. Every property here is
   essential to the component actually working -- if the theme's CSS wins
   any one of them, the result ranges from a subtle baseline
   misalignment to the word not animating at all. */

.word-rotator.word-rotator.word-rotator {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  vertical-align: bottom !important;
  white-space: nowrap !important;
  /* Height/line-height are intentionally NOT set here -- JS measures the
     actual natural line height for the current font/line-height context
     (whatever the theme applies), sizes the box generously enough for the
     peeking words above/below, and locks all of this as exact pixel
     values via inline style (also with !important priority), which
     already wins over any stylesheet rule regardless of that rule's
     specificity. A hardcoded guess here is what previously made the
     rotating word float above the surrounding text's baseline. */

  /* Width is set once in JS to the widest word in the list and never
     changes after that, so a centered (or justified) line never shifts
     as shorter/longer words rotate through. Left-aligned so every word
     starts flush against whatever text precedes it -- shorter words
     leave their extra space trailing on the right instead of opening a
     gap on the left. */
  text-align: left !important;
  /* Gives the tilted peek words actual 3D depth instead of just squashing
     flat -- JS sets this to a value proportional to the font size so the
     effect reads consistently whether the heading is small or huge. */
  perspective: 200px !important;
}

.word-rotator__item.word-rotator__item.word-rotator__item {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  /* Bottom offset (not top) for the same reason as the height sizing
     below: JS pins every item's resting "bottom" to the same calculated
     point so the current word's baseline lands exactly where it's meant
     to, regardless of how much extra headroom the container reserves
     above/below it for the peek words. */
  bottom: 0 !important;
  white-space: nowrap !important;
  /* Deliberately NOT inherited from the container. The container's own
     height/line-height is intentionally taller than any single word
     needs (room for the peeking words) -- inheriting that same value
     here would force THIS word to render inside a line-height taller
     than it needs, which centers it with extra space above and below
     and is exactly what pushes it up off the baseline. Using the font's
     own "normal" value here keeps each word's internal leading small and
     consistent. Tripled specificity + !important defends this the same
     way as everywhere else: a broad host-page selector could otherwise
     match this span directly (it's a plain <span>) and substitute its
     own line-height. */
  line-height: normal !important;
  transform-origin: 50% 50% !important;
  /* Hides the mirrored "back" of the glyph as it rotates past 90 degrees
     -- without this, a word mid-transition can flash a distorted,
     backwards-looking version of itself for a frame. */
  backface-visibility: hidden !important;
  transition:
    transform var(--word-rotator-duration, 0.45s) ease,
    opacity var(--word-rotator-duration, 0.45s) ease;
}

/* The word currently front-and-center: full size, fully opaque, no tilt. */
.word-rotator__item--current.word-rotator__item--current.word-rotator__item--current {
  transform: translateY(0) rotateX(0deg) scale(1) !important;
  opacity: 1 !important;
  z-index: 3 !important;
}

/* The word just before the current one: peeking in above, tilted back and
   dimmed, like it's curving away over the top of the drum. Most of it is
   deliberately cropped by the container's overflow:hidden -- only a
   sliver near the current word is meant to show. */
.word-rotator__item--prev.word-rotator__item--prev.word-rotator__item--prev {
  transform: translateY(-60%) rotateX(50deg) scale(0.85) !important;
  opacity: 0.3 !important;
  z-index: 1 !important;
}

/* The word coming up next: peeking in below, tilted the opposite way,
   same dimming. */
.word-rotator__item--next.word-rotator__item--next.word-rotator__item--next {
  transform: translateY(60%) rotateX(-50deg) scale(0.85) !important;
  opacity: 0.3 !important;
  z-index: 1 !important;
}

/* Starting point for a brand-new "next" word right after a rotation --
   further below and tilted further away, fully transparent -- which then
   animates up into the --next resting position above. */
.word-rotator__item--enter-far.word-rotator__item--enter-far.word-rotator__item--enter-far {
  transform: translateY(150%) rotateX(-85deg) scale(0.6) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

/* End point for the old "prev" word right after a rotation -- continues
   rotating further away and fading out fully before it's removed. */
.word-rotator__item--exit-far.word-rotator__item--exit-far.word-rotator__item--exit-far {
  transform: translateY(-150%) rotateX(85deg) scale(0.6) !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

/* Respect users who prefer reduced motion: plain crossfade, no 3D
   movement or tilt (and no peeking words -- prev/next are hidden
   outright rather than left dimly visible with no way to un-dim). */
@media (prefers-reduced-motion: reduce) {
  .word-rotator__item.word-rotator__item.word-rotator__item {
    transition: opacity var(--word-rotator-duration, 0.45s) ease;
    transform: none !important;
  }

  .word-rotator__item--prev.word-rotator__item--prev.word-rotator__item--prev,
  .word-rotator__item--next.word-rotator__item--next.word-rotator__item--next,
  .word-rotator__item--enter-far.word-rotator__item--enter-far.word-rotator__item--enter-far,
  .word-rotator__item--exit-far.word-rotator__item--exit-far.word-rotator__item--exit-far {
    opacity: 0 !important;
  }
}