/* Homepage-only enhancement. The original server-rendered copy stays readable
   without JavaScript, and the existing layout/theme styles remain authoritative. */
.hero--cinematic {
  --zh-hero-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --zh-hero-headline-distance: 140px;
  --zh-hero-subtitle-distance: 120px;
  --zh-hero-headline-duration: 1100ms;
  --zh-hero-subtitle-duration: 900ms;
  --zh-hero-subtitle-delay: 650ms;
}

/* Word boxes move in unison within each phrase, retaining natural wrapping. */
.zh-hero-headline .zh-hero-segment > span {
  display: inline-block;
  white-space: pre-wrap;
  width: min-content;
}

/* Preserve word/space kerning without duplicating the actual headline text. */
.zh-hero-headline .zh-hero-segment > span::after {
  content: " ";
}

.zh-hero-headline .zh-hero-segment--right > span:last-child::after {
  content: none;
}

.zh-hero-segment--left {
  --zh-hero-from: calc(-1 * var(--zh-hero-headline-distance));
}

.zh-hero-segment--right {
  --zh-hero-from: var(--zh-hero-headline-distance);
}

.zh-hero-subtitle {
  --zh-hero-from: var(--zh-hero-subtitle-distance);
}

@media (max-width: 1100px) {
  .hero--cinematic {
    --zh-hero-headline-distance: 28px;
    --zh-hero-subtitle-distance: 28px;
  }
}

@media (max-width: 680px) {
  .hero--cinematic {
    --zh-hero-headline-distance: 14px;
    --zh-hero-subtitle-distance: 14px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .zh-hero-headline .zh-hero-segment > span {
    animation: zh-hero-text-enter var(--zh-hero-headline-duration) var(--zh-hero-ease) backwards;
  }

  .hero--cinematic .zh-hero-subtitle {
    animation: zh-hero-text-enter var(--zh-hero-subtitle-duration) var(--zh-hero-ease)
      var(--zh-hero-subtitle-delay) backwards;
  }

  /* Respect the existing first-visit notice; resume when its own handler closes it. */
  .payment-notice-open .zh-hero-headline .zh-hero-segment > span,
  .payment-notice-open .hero--cinematic .zh-hero-subtitle {
    animation-play-state: paused;
  }
}

@keyframes zh-hero-text-enter {
  from {
    opacity: 0;
    transform: translate3d(var(--zh-hero-from), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media print {
  .zh-hero-headline .zh-hero-segment > span,
  .hero--cinematic .zh-hero-subtitle {
    animation: none !important;
  }
}