/* Homepage heading only; typography and responsive sizing come from home.css. */
#hero-title .hero-headline-static {
  display: block;
  color: #f5f8fc;
}

#hero-title .hero-headline-rotation {
  display: grid;
  overflow: hidden;
  color: var(--blue);
  /* Every phrase sizes the same grid cell, reserving the tallest wrapped text
     even when transparent. Its height stays constant throughout the rotation. */
  min-height: 2lh;
}

#hero-title .hero-headline-phrase {
  grid-area: 1 / 1;
  min-width: 0;
  color: inherit;
  overflow-wrap: break-word;
  opacity: 0;
}

#hero-title .hero-headline-phrase:first-child {
  opacity: 1;
}

/* A stable accessible heading avoids announcing automatic changes repeatedly.
   With reduced motion (or no animation support), the first phrase stays visible. */
@media (prefers-reduced-motion: no-preference) {
  #hero-title .hero-headline-phrase {
    animation: hero-headline-rotate 11.2s ease-in-out infinite;
  }
  #hero-title .hero-headline-phrase:nth-child(2) { animation-delay: -8.4s; }
  #hero-title .hero-headline-phrase:nth-child(3) { animation-delay: -5.6s; }
  #hero-title .hero-headline-phrase:nth-child(4) { animation-delay: -2.8s; }

  @keyframes hero-headline-rotate {
    0%, 20% { opacity: 1; transform: translateY(0); }
    22.5% { opacity: 0; transform: translateY(-.3em); }
    22.51%, 97.5% { opacity: 0; transform: translateY(.3em); }
    100% { opacity: 1; transform: translateY(0); }
  }
}