/* Hero (S-065): one message. The headline says the two things a visitor looks
   for, converting and staying on the machine; the lead says how; one Download
   button acts on it; the live demo (css/demo.css) shows it. Nothing else.
   Each headline line rises out of its own mask on load, the copy follows, and
   when the hero scrolls away the headline drifts up while the demo settles back.
   Everything is visible without motion; motion only enhances it. */
.hero { position: relative; padding-block: var(--space-7) var(--space-9); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6) var(--space-8); align-items: start; }
.hero-grid > * { min-width: 0; }

.hero h1 {
  grid-column: 1 / -1;
  font-size: clamp(var(--type-display-sm), 9.5vw, calc(var(--type-display) * 0.78));
  line-height: 1.55;
}
body:lang(en) .hero h1 { font-size: clamp(var(--type-display-sm), 9vw, calc(var(--type-display) * 0.8)); line-height: 1.05; }
.h1-line { display: block; overflow: clip; overflow-clip-margin: var(--space-3); }
.h1-line > span { display: block; }
.hero h1 .hl { display: inline-block; padding-inline: var(--space-4); line-height: 1.35; }
body:lang(en) .hero h1 .hl { line-height: 1.05; }

.hero .lead { margin: 0; max-width: 32ch; font-size: var(--fs-lead); color: var(--color-text-primary); }
.hero .actions { margin-block-start: var(--space-6); }
.hero-note {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
}
.hero-note a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}
.hero-note a:hover, .hero-note a:focus-visible { background: var(--color-ink); color: var(--color-paper); }

@media (prefers-reduced-motion: no-preference) {
  .h1-line > span { animation: line-in var(--duration-slow) var(--ease-out) backwards; animation-duration: calc(var(--duration-slow) * 2); }
  .h1-line + .h1-line > span { animation-delay: calc(var(--duration-stagger) * 4); }
  .hero-side { animation: copy-in calc(var(--duration-slow) * 2) var(--ease-out) backwards; animation-delay: calc(var(--duration-stagger) * 8); }
  .hero-stage { animation: stage-in calc(var(--duration-slow) * 2) var(--ease-out) backwards; animation-delay: calc(var(--duration-stagger) * 10); }
}
@keyframes line-in { 0% { translate: 0 110%; } }
@keyframes copy-in { 0% { translate: 0 var(--space-7); } }
@keyframes stage-in { 0% { translate: 0 var(--space-8); scale: 0.92; } }

/* Leaving: as the hero scrolls out, the headline drifts up faster than the page
   and the demo sinks back a little. Scroll driven, so it never waits on a script. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero h1 { animation: hero-out var(--duration-slow) var(--ease-steady) both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .hero .demo, .hero .film { animation: demo-out var(--duration-slow) var(--ease-steady) both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes hero-out { 100% { translate: 0 calc(var(--space-10) * -1); } }
@keyframes demo-out { 100% { scale: 0.9; translate: 0 var(--space-8); } }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .hero-side { grid-column: 1; grid-row: 2; align-self: start; padding-block-start: var(--space-5); }
  .hero-stage { grid-column: 2; grid-row: 2; }
}
@media (max-width: 719px) {
  .hero { padding-block: var(--space-5) var(--space-8); }
  .hero-grid { row-gap: var(--space-5); }
  .hero .actions { margin-block-start: var(--space-5); }
}