/* Rotating second line of the homepage headline:
   "BY AND FOR WOMEN — in wellness / who build / who lead / entrepreneurs"

   The words are stacked in a single grid cell, so the line is always as wide as
   the longest word and nothing reflows as they change. That matters here: the
   heading is auto-sized to fit its container, and a changing width would make
   the whole hero jump on every rotation. */

.nour-rotate {
  display: inline-grid;
  vertical-align: baseline;
}

.nour-rotate-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.14em);
  transition: opacity 0.38s ease, transform 0.38s ease;
  /* Keeps the stacked words from being selectable or copied as one blob. */
  pointer-events: none;
}

.nour-rotate-word.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Before the script runs, and if it never does, the final word shows. That way
   the headline reads correctly with JavaScript disabled. */
.nour-rotate:not(.is-running) .nour-rotate-word:last-child {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nour-rotate-word {
    transition: none;
  }
}