/* Hero: the first viewport. Tokens only. Variants on data-variant, height on data-height, alignment on data-align.
   Sheet over stage: photo and video put the picture behind a scrimmed text column on desktop and above a rising
   sheet on phones. The authored moment is the headline's line reveal (hero.js); everything else is quiet. */
.hero {
  --hero-top: var(--header-h, 72px);            /* the shell's sticky header; 72 px until it sets --header-h */
  --hero-shade: var(--ink);                     /* scrim: the dark end of the palette */
  --hero-on: var(--surface);                    /* text on the scrim: the light end */
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ground); color: var(--ink);
}
/* In dark mode --ink is the light end, so the scrim must come from --ground instead; light-dark() follows the
   color-scheme tokens.css sets. Browsers without it keep the --ink scrim (still readable, just milkier in dark). */
@supports (color: light-dark(red, red)) {
  .hero { --hero-shade: light-dark(var(--ink), var(--ground)); --hero-on: light-dark(var(--surface), var(--ink)); }
}
.hero-body { position: relative; z-index: 1; width: 100%; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 680px; }
.hero[data-align="center"] .hero-copy { align-items: center; text-align: center; margin-inline: auto; }
.hero-h { max-width: 16ch; --i: 0; }
.hero-lead { margin-top: 20px; max-width: 52ch; --i: 1; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; --i: 2; }
.hero[data-align="center"] .hero-actions { justify-content: center; }
.hero-proof { margin-top: 20px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); --i: 3; }

/* stage: the picture, the placeholder, the video and its control */
.hero-stage { position: relative; overflow: hidden; display: grid; background: var(--placeholder); }
.hero-media { width: 100%; height: 100%; object-fit: cover; }
.hero-ph span { position: relative; z-index: 1; padding: 0 16px; text-align: center; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.hero[data-playing] .hero-video { opacity: 1; }
.hero-toggle {
  position: absolute; right: var(--pad); bottom: 24px; z-index: 2; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--hero-on);
  background: color-mix(in srgb, var(--hero-shade) 58%, transparent); transition: background-color var(--d) ease;
}
.hero-toggle:focus-visible { outline-color: var(--hero-on); }

/* the reveal: lines wipe up inside their own mask, 80 ms apart; lead, actions and proof follow with k-in */
.hero-line { display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.hero-line > span { display: block; animation: hero-line .9s calc(var(--l) * 80ms) var(--ease) backwards; }
.hero[data-reveal="run"] .hero-copy > :not(.hero-h) { animation: k-in var(--d-enter) calc(var(--hero-lines, 2) * 80ms + 200ms + var(--i) * 70ms) var(--ease) backwards; }
@keyframes hero-line { from { transform: translateY(120%); } }
/* until mount() has measured the lines, hold the copy back; if the script never comes, it fades in at 1 s */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero:not([data-reveal]) .hero-copy > * { opacity: 0; animation: k-fade .3s 1s ease forwards; }
}

/* desktop and tablet */
@media (min-width: 721px) {
  .hero:is([data-variant="photo"], [data-variant="video"]) { padding-top: clamp(96px, 12vw, 160px); padding-bottom: clamp(48px, 6vw, 80px); }
  .hero:is([data-variant="photo"], [data-variant="video"]) .hero-stage { position: absolute; inset: 0; }
  .hero:is([data-variant="photo"], [data-variant="video"]) .hero-ph { place-items: start end; padding: 24px var(--pad); }
  .hero:is([data-variant="photo"], [data-variant="video"]) .hero-copy { color: var(--hero-on); }
  .hero:is([data-variant="photo"], [data-variant="video"]) :is(.hero-lead, .hero-proof) { color: var(--hero-on); }
  .hero:is([data-variant="photo"], [data-variant="video"]) .hero-copy :focus-visible { outline-color: var(--hero-on); }
  /* scrim, all from --hero-shade: a floor everywhere, a lift from the bottom where the copy sits, and a fall-off from
     the left behind a left column (centred copy gets a heavier floor instead). Numbers: plan, "Scrim contrast". */
  .hero-stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top, color-mix(in srgb, var(--hero-shade) 55%, transparent), transparent 62%),
      linear-gradient(to right, color-mix(in srgb, var(--hero-shade) 50%, transparent), color-mix(in srgb, var(--hero-shade) 28%, transparent) 55%, transparent 85%),
      color-mix(in srgb, var(--hero-shade) 36%, transparent);
  }
  .hero[data-align="center"] .hero-stage::after {
    background: linear-gradient(to top, color-mix(in srgb, var(--hero-shade) 55%, transparent), transparent 62%), color-mix(in srgb, var(--hero-shade) 50%, transparent);
  }
  .hero[data-variant="split"] .hero-stage::after { content: none; }

  .hero[data-height="tall"]:is([data-variant="photo"], [data-variant="video"]) { min-height: clamp(560px, 84svh, 900px); }
  .hero[data-height="full"] { min-height: calc(100svh - var(--hero-top)); }

  .hero[data-variant="split"] .hero-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); }
  .hero[data-variant="split"] .hero-stage { position: sticky; top: calc(var(--hero-top) + 24px); align-self: start; border-radius: var(--radius); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--hero-top) - 48px); }
  .hero[data-variant="split"][data-height="full"] .hero-stage { aspect-ratio: auto; height: calc(100svh - var(--hero-top) - 112px); }
  .hero[data-variant="split"][data-height="natural"] .hero-stage { aspect-ratio: 4 / 3; }

  .hero[data-variant="plain"] { padding-top: clamp(64px, 10vw, 144px); padding-bottom: clamp(48px, 7vw, 96px); }
  .hero[data-variant="plain"][data-height="tall"] { min-height: clamp(440px, 66svh, 720px); }
}

/* phones: the stage on top, the copy on a --ground sheet that rises 24 px over it */
@media (max-width: 720px) {
  .hero { justify-content: flex-start; }
  .hero[data-height="full"] { min-height: calc(100svh - var(--hero-top)); }
  .hero:is([data-variant="photo"], [data-variant="video"]) .hero-stage { height: max(240px, 40svh); }
  .hero:is([data-variant="photo"], [data-variant="video"])[data-height="natural"] .hero-stage { height: auto; aspect-ratio: 5 / 4; }
  .hero:is([data-variant="photo"], [data-variant="video"])[data-height="full"] .hero-stage { height: auto; flex: 1 1 auto; min-height: 36svh; }
  .hero:is([data-variant="photo"], [data-variant="video"]) .hero-body { margin-top: calc(-1 * var(--radius-sheet)); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--ground); padding-top: 28px; padding-bottom: 40px; }
  .hero-toggle { bottom: calc(var(--radius-sheet) + 12px); }
  .hero-actions { align-self: stretch; }
  .hero-actions .k-btn { flex: 1 1 auto; }

  .hero[data-variant="split"] .hero-body { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; padding-bottom: 48px; }
  .hero[data-variant="split"] .hero-stage { border-radius: var(--radius); aspect-ratio: 4 / 3; }
  .hero[data-variant="split"][data-height="full"] .hero-body { flex: 1 1 auto; }
  .hero[data-variant="split"][data-height="full"] .hero-stage { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }

  .hero[data-variant="plain"] { padding-top: 56px; padding-bottom: 56px; }
  .hero[data-variant="plain"][data-height="tall"] { min-height: clamp(360px, 60svh, 560px); }
}

@media (hover: hover) and (pointer: fine) {
  .hero-toggle:hover { background: color-mix(in srgb, var(--hero-shade) 78%, transparent); }
}

/* reduced motion: no split, no wipe; the copy fades in, 60 ms apart */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { animation: k-fade .3s calc(var(--i) * 60ms) ease backwards; }
  .hero-video { transition: none; }
}