/*
 * V16 reading handoff
 *
 * One foreground canvas owns the readable Hero. A second, always-mounted
 * canvas owns the quiet background. The page only crossfades these two layers;
 * it does not split the foreground into independently rendered rails.
 */
:root {
  --site-header-height: 72px;
  --hero-foreground-height: 900px;
  --hero-fade-distance: 500px;
  --hero-reading-hold: 96px;
  --hero-content-overlap: calc(93px + var(--hero-fade-distance) * .15);
  --hero-foreground-opacity: 1;
  --hero-background-opacity: 0;
  --hero-sticky-top: 0px;
}

/* The header and opening share one viewport; short screens can grow naturally. */
.site-header { min-height: var(--site-header-height); }
.intro-hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--site-header-height));
  padding: 64px 0 88px;
  background: #fff;
}

.hero-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(var(--hero-foreground-height) + var(--hero-reading-hold) + var(--hero-fade-distance));
  min-height: var(--hero-foreground-height);
  margin: 0;
  padding: 0;
  background: transparent;
}

.hero-background-shell {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: var(--hero-background-opacity);
  visibility: visible;
  pointer-events: none;
  background: #edf3f6;
  will-change: opacity;
}

.hero-background {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.hero-foreground-shell {
  position: sticky;
  top: var(--hero-sticky-top);
  z-index: 1;
  width: 100%;
  height: var(--hero-foreground-height);
  overflow: hidden;
  opacity: var(--hero-foreground-opacity);
  will-change: opacity;
}

.hero-foreground {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: #edf3f6;
}

.hero-stage + .overview-section {
  position: relative;
  z-index: 2;
  /* The controller measures headline inset so its first pixels enter at 85%
   * of the fade on either layout, rather than overlapping a full viewport. */
  margin-top: calc(-1 * var(--hero-content-overlap));
}

@media (max-width: 960px) {
  :root { --hero-fade-distance: 340px; --hero-reading-hold: 64px; }
  .intro-hero { padding: 48px 0 64px; }
}

@media (max-width: 560px) {
  :root { --site-header-height: 62px; }
  .intro-hero { padding: 36px 0 52px; }
}

@media (prefers-reduced-motion: reduce), print {
  .hero-background-shell,
  .hero-foreground-shell { transition: none !important; }
}