/* styles/sections/word-flip.css
 * A headline line that cycles through words (js/bens-bites-hero.js moves .is-active and
 * .is-leaving). The words share one inline-grid cell, so the line never changes width; the
 * full sentence is in a sibling .sr-only span. Under reduced motion the script writes the
 * words out as one static line. */
@layer sections {
  .sre-flip {
    display: inline-grid;
    justify-items: center;
    perspective: 600px;
  }

  .sre-flip-word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: rotateX(-90deg);
    backface-visibility: hidden;
    transition: transform 0.45s ease, opacity 0.45s ease;
  }

  .sre-flip-word.is-active {
    opacity: 1;
    transform: rotateX(0deg);
  }

  .sre-flip-word.is-leaving {
    opacity: 0;
    transform: rotateX(90deg);
  }
}