/* Time-based typography entrance, independent of the canvas/scroll playhead.
   Base glyphs stay off-white; the brief light accent never replaces their fill. */
#hero-title { transform-origin: left center; }
.hero-line { display: block; overflow: clip; padding: .08em .06em .15em; margin: -.08em -.06em -.15em; }
.hero-word { display: inline-block; }
.hero-keyword { text-shadow: none; }
.hero-cta-entrance { display: inline-block; margin-top: 26px; }
.hero-copy .hero-cta-entrance .button { margin-top: 0; position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .hero-word {
    animation: hero-line-enter .88s cubic-bezier(.22,.61,.36,1) both;
  }
  .hero-line:first-child .hero-word:nth-child(2) { animation-delay: .10s; }
  .hero-line:nth-child(2) .hero-word { animation-delay: .30s; }
  .hero-line:nth-child(2) .hero-word:nth-child(2) { animation-delay: .42s; }
  .hero-word.hero-keyword {
    animation-name: hero-line-enter, hero-word-light;
    animation-duration: .88s, .95s;
    animation-timing-function: cubic-bezier(.22,.61,.36,1), ease-in-out;
  }
  .hero-line:first-child .hero-word.hero-keyword { animation-delay: .10s, .85s; }
  .hero-line:nth-child(2) .hero-word.hero-keyword { animation-delay: .42s, 1.12s; }
  .hero-copy > p {
    animation: hero-support-enter .65s cubic-bezier(.22,.61,.36,1) 1.05s both;
  }
  .hero-copy > p.secondary { animation-delay: 1.18s; }
  .hero-cta-entrance {
    animation: hero-support-enter .55s cubic-bezier(.22,.61,.36,1) 1.48s both;
  }
  .hero-cta-entrance:focus-within { animation: none; }
  .hero-cta-entrance .button::after {
    content: '';
    position: absolute;
    bottom: 9px;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(248,250,252,.65), transparent);
    pointer-events: none;
    transform-origin: left center;
    animation: hero-cta-light .8s ease-out 1.65s both;
  }
}

@keyframes hero-line-enter {
  0% { opacity: 0; transform: translateY(105%); filter: blur(2px); }
  45% { opacity: .92; filter: blur(.3px); }
  100% { opacity: 1; transform: translateY(0); filter: none; }
}
@keyframes hero-support-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-word-light {
  0%, 100% { text-shadow: 0 0 0 rgba(37,99,255,0); }
  48% { text-shadow: 0 0 12px rgba(37,99,255,.28), 1px 0 2px rgba(37,99,255,.18); }
}
@keyframes hero-cta-light {
  0% { transform: scaleX(0); opacity: 0; }
  35% { opacity: .55; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (max-width: 767px) {
  .hero-cta-entrance { margin-top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  #hero-title { transform: none !important; }
  .hero-line, .hero-word, .hero-keyword, .hero-copy > p, .hero-cta-entrance {
    animation: none; opacity: 1; transform: none; filter: none; text-shadow: none;
  }
  .hero-cta-entrance .button::after { content: none; }
}

/* Center the hero content as a single column. */
.hero .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  height: 100%;
  padding-top: 0;
  text-align: center;
}
.hero .hero-copy { padding-top: 24px; }
.hero .hero-copy .secondary { margin-inline: auto; }
.hero #hero-title { transform-origin: center center; }