/* Cache-safe live caption effects. The fill is clipped to glyphs, not a panel. */
#hero h3 {
  background: linear-gradient(110deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.92) 26%, rgba(244,185,66,.95) 49%, rgba(255,255,255,.92) 68%, rgba(255,255,255,.42) 100%);
  background-size: 235% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#hero .carousel-item.caption-is-visible h3 {
  animation: hero-title-in .9s cubic-bezier(.2,.75,.2,1) .18s both, caption-light-sweep 3.8s 1.05s ease-in-out infinite, caption-breathe 2.8s 1.05s ease-in-out infinite;
}
#hero .carousel-item.caption-is-visible h3::after { animation: hero-line-in .75s .8s both, caption-line-float 2.2s 1.55s ease-in-out infinite; }

@keyframes caption-light-sweep {
  0%, 18% { background-position: 100% 50%; }
  52%, 70% { background-position: 0% 50%; }
  100% { background-position: -100% 50%; }
}
@keyframes caption-breathe {
  0%, 100% { filter: drop-shadow(0 4px 3px rgba(4,20,34,.25)); }
  50% { filter: drop-shadow(0 8px 10px rgba(244,185,66,.3)); }
}
@keyframes caption-line-float {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(16px) scaleX(.78); }
}
@media (prefers-reduced-motion: reduce) {
  #hero .carousel-item.caption-is-visible h3,
  #hero .carousel-item.caption-is-visible h3::after { animation: none !important; }
}