/* <wm-tagline> — minimal rotating tagline under the hero headline. A CSS
   grid with every item sharing the same cell (grid-area:1/1) sizes the
   viewport to the tallest/widest label automatically, so the fixed box
   never reshuffles layout as shorter/longer words rotate through. See
   ./README.md */
/* Padding matches .mxd-hero-06__headline's own (hero.css) — <wm-tagline> is
   that element's sibling, not a descendant, so it doesn't inherit it and
   needs the same inset repeated here to stay visually aligned under it. */
wm-tagline {
  display: block;
  margin-top: 1.2rem;
  padding: 0 3rem;
  transform: translateY(-80px);
}
@media (min-width: 768px) {
  wm-tagline {
    margin-top: 1.6rem;
    padding: 0 6rem;
  }
}
@media (min-width: 1600px) {
  wm-tagline {
    padding: 0 10rem;
  }
}

.wm-tagline__viewport {
  display: grid;
  overflow: hidden;
}

.wm-tagline__item {
  grid-area: 1 / 1;
  font: normal 500 2.2rem/1.4 var(--_font-default);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .wm-tagline__item {
    font-size: 2.6rem;
  }
}
@media (min-width: 1200px) {
  .wm-tagline__item {
    font-size: 3rem;
  }
}

.wm-tagline__item[data-state="active"] {
  opacity: 1;
  transform: translateY(0);
}
.wm-tagline__item[data-state="prev"] {
  opacity: 0;
  transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .wm-tagline__item {
    transition: none;
  }
}