/* Word carousel card: "Your" sits in the middle of the card; next to it a
   column of words runs the full height and scrolls up one row at a time.
   The word beside "Your" is black, the rest are faded.
   Sizes scale with the card (cqw = % of card width). */

/* Stryker's typeface (URW Egyptienne T OT Light) */
@font-face {
  font-family: "Stryker Egyptienne";
  src: url("../font/urw-egyptienne-t-ot-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.word-carousel {
  --row: 1.16em; /* one line of text */
  --slide: 0.6s cubic-bezier(0.83, 0, 0.17, 1); /* easeInOutQuint: soft start, soft settle */
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--card-color, #ffb501);
  color: #000;
}

/* "Your" + the middle word, centered vertically */
.word-carousel_text {
  position: absolute;
  top: 50%;
  left: 9.5cqw;
  margin: 0;
  transform: translateY(-50%);
  color: #000; /* the site's p style would otherwise make it --black */
  font-family: "Stryker Egyptienne", Rockwell, "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: 10.6cqw;
  line-height: 1.16;
  white-space: nowrap;
}

/* A one-row slot next to "Your"; the word column overflows it up and down
   and the card clips it at the edges */
.word-carousel_column {
  position: relative;
  display: inline-block;
  height: var(--row);
  vertical-align: bottom;
}

.word-carousel_track {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform var(--slide);
}

.word-carousel_track > span {
  display: block;
  height: var(--row);
  opacity: 0.2;
  transition: opacity var(--slide);
}

.word-carousel_track > span.is-active {
  opacity: 1;
}

/* Used for the instant jump back to the start of the loop */
.word-carousel_track.no-transition,
.word-carousel_track.no-transition > span {
  transition: none;
}

/* Full sentence for screen readers; the moving words are hidden from them */
.word-carousel .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: words swap without sliding or fading */
@media (prefers-reduced-motion: reduce) {
  .word-carousel_track,
  .word-carousel_track > span {
    transition: none;
  }
}