/* The hero stays behind the incoming surface without replacing native scrolling. */
.hero-handoff {
  --hero-wave-height: clamp(64px,9vw,144px);
  --hero-wave-clearance: calc(var(--hero-wave-height) + 8px);
  position: relative;
  isolation: isolate;
  background: var(--color-brand);
}

.hero-handoff .hero.hero-dark {
  z-index: 1;
  margin-bottom: 0;
  padding-bottom: calc(var(--hero-padding-block) + 64px + var(--hero-wave-clearance));
}

.handoff-surface {
  position: relative;
  z-index: 2;
  display: flow-root;
  margin-top: -64px;
  padding-top: clamp(72px,8vw,112px);
  background: var(--color-white);
  border-radius: 0;
}

@media (min-width:801px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .hero-handoff[data-handoff-motion] .hero.hero-dark {
    position: sticky;
    top: var(--handoff-top);
  }

  .hero-handoff .handoff-surface {
    min-height: var(--handoff-surface-min,calc(100svh - var(--header-fallback-height) + 64px));
  }

  .hero-handoff[data-handoff-motion] .hero.hero-dark:focus-within {
    position: relative;
    top: 0;
  }
}

@media (max-width:800px),(hover:none),(pointer:coarse) {
  .hero-handoff .hero.hero-dark {
    padding-bottom: calc(var(--hero-padding-block) + 24px + var(--hero-wave-clearance));
  }

  .handoff-surface {
    margin-top: -24px;
    padding-top: 48px;
  }
}

@media (max-width:800px) {
  .hero-handoff {
    --hero-wave-height: clamp(58px,16vw,92px);
  }
}

@media print {
  .hero-handoff[data-handoff-motion] .hero.hero-dark {
    position: relative;
    top: auto;
  }

  .hero-handoff .hero.hero-dark {
    padding-bottom: var(--hero-padding-block);
  }

  .handoff-surface {
    margin-top: 0;
    padding-top: 40px;
    border-radius: 0;
  }
}