/* Hero headline animation: blur-in -> yellow glow sweep -> underline */
/* layout is always the same so replays never shift the text or the sparkle */
.hero-char {
  display: inline-block;
}

.hero-word {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

.hero-anim-ready .hero-char {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.25em);
  animation: hero-char-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) forwards, hero-char-glow 0.69s ease-in-out forwards;
  animation-delay: var(--in-delay, 0s), var(--glow-delay, 99s);
}

@keyframes hero-char-in {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes hero-char-glow {
  0%,
  100% {
    color: inherit;
    text-shadow: inherit;
  }
  50% {
    color: #fde68a;
    text-shadow: 0 0 14px rgba(253, 230, 138, 0.75);
  }
}

/* underline drawn under each subtitle word */
.hero-anim-ready .hero-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(253, 230, 138, 0.2), #d9f99d);
  transform: scaleX(0);
  transform-origin: left center;
  animation: hero-underline 1.38s ease-out forwards;
  animation-delay: var(--ul-delay, 99s);
}

@keyframes hero-underline {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  35%,
  65% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* sparkle at the end of the headline */
.hero-sparkle {
  position: absolute;
  top: -0.45em;
  right: -0.75em;
  font-size: 0.9em;
  line-height: 1;
  color: #fff3b0;
  text-shadow: 0 0 6px #fde047, 0 0 14px rgba(253, 224, 71, 0.9), 0 0 28px rgba(250, 204, 21, 0.7);
  opacity: 0;
  transform: scale(0) rotate(0);
  pointer-events: none;
}

.hero-anim-ready .hero-sparkle {
  animation: hero-sparkle 0.77s ease-out forwards;
  animation-delay: var(--sp-delay, 99s);
}

/* replay (scrolled back to top): yellow glow sweep + sparkle only */
.hero-glow-only .hero-char {
  animation: hero-char-glow 0.69s ease-in-out forwards;
  animation-delay: var(--replay-delay, 0s);
}

.hero-glow-only .hero-sparkle {
  animation: hero-sparkle 0.77s ease-out forwards;
  animation-delay: var(--sp-replay, 99s);
}

@keyframes hero-sparkle {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.4) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim-ready .hero-char,
  .hero-glow-only .hero-char,
  .hero-anim-ready .hero-underline::after,
  .hero-sparkle {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .hero-anim-ready .hero-underline::after,
  .hero-sparkle {
    display: none;
  }
}