/* A generous landing-page stage with a readable introduction and aligned edges.
   Shared typography and translucent navigation live in ../shared/site-shell.css. */
:root {
  color-scheme: dark;
  --black: #000;
  --white: #fff;
  --blue: #087fba;
  --blue-light: #63bdea;
  --text-body: #c9cccf;
  --line: #24313a;
  --font-ui: var(--site-font);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--white); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
::selection { background: var(--blue); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: #087fba33; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 5px; }
[hidden] { display: none !important; }

.homepage {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 152px;
  isolation: isolate;
}
.homepage > * { min-width: 0; }
.hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: calc(100% - 2 * var(--site-gutter, 24px));
  max-width: var(--site-width, 1440px);
  margin-inline: auto;
  isolation: isolate;
}
.intro {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-top: 0;
  scroll-margin-top: 0;
}
.hero-stage:focus, .intro:focus { outline: none; }
.copy-lead {
  width: 100%;
  margin: 0 auto 32px;
  color: var(--white);
  font-size: clamp(48px, 4.6vw, 72px);
  font-weight: 450;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;
}
.copy-lead span { display: inline; white-space: normal; }
.intro-copy { width: 100%; max-width: 900px; margin-inline: auto; font-size: 19px; }
.intro p {
  margin: 0;
  color: var(--text-body);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}
.intro p + p { margin-top: 20px; }
.keep-word { white-space: nowrap; }
.copy-block { transform-origin: left center; }

/* The original canvas includes an 840px extension for the old text overlay.
   Cropping that extension keeps the complete 1672px workcell and its geometry. */
.scene {
  /* factory-v21 is the selected design baseline: preserve its full frame
     and broad feathering. See shared/baselines/factory-v21.json. */
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 1672 / 882;
  margin-top: 44px;
  overflow: hidden;
  pointer-events: none;
}
.scene canvas, .scene-fallback {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150.239234%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: right bottom;
}
.scene canvas { opacity: 0; transition: opacity 650ms ease; }
.scene.ready canvas { opacity: 1; }
.scene.ready .scene-fallback { visibility: hidden; }
/* Feather the whole scene, including live motion and its static fallback.
   Eased stops keep the subject crisp while the cropped perimeter melts into black. */
.scene::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #000 0%, rgb(0 0 0 / 92%) 2%, rgb(0 0 0 / 65%) 5%,
      rgb(0 0 0 / 28%) 9%, rgb(0 0 0 / 8%) 13%, transparent 18%,
      transparent 82%, rgb(0 0 0 / 8%) 87%, rgb(0 0 0 / 28%) 91%,
      rgb(0 0 0 / 65%) 95%, rgb(0 0 0 / 92%) 98%, #000 100%),
    linear-gradient(180deg,
      #000 0%, rgb(0 0 0 / 75%) 2%, rgb(0 0 0 / 22%) 5%,
      transparent 10%, transparent 70%, rgb(0 0 0 / 8%) 77%,
      rgb(0 0 0 / 25%) 84%, rgb(0 0 0 / 60%) 91%,
      rgb(0 0 0 / 90%) 97%, #000 100%);
}
.reading-shade { display: none; }
.home-explore { margin: 28px auto 0; text-align: center; }
.research-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--white); font-size: 15px; }
.research-link span { color: var(--blue-light); transition: transform 200ms var(--ease); }
.research-link:hover span, .research-link:focus-visible span { transform: translate(3px,-3px); }
.research-link:hover { text-decoration: underline; text-underline-offset: 5px; }

.motion-toggle { display: inline-flex; flex: 0 0 auto; justify-content: center; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 4px; background: none; color: #a7bac8; font-size: 12px; transition: border-color 180ms ease, color 180ms ease; }
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--white); border-color: #354956; }
.motion-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[data-playing="false"] .pause-icon { display: none; }
.motion-toggle[data-playing="false"] .play-icon { display: block; }
.skip-link { position: fixed; left: 20px; top: -100px; background: #fff; color: #000; padding: 14px 20px; z-index: 110; }
.skip-link:focus { top: 16px; }

/* Preserve the existing single illumination pass. */
@media (prefers-reduced-motion: no-preference) {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .copy-lead span, .intro .copy-block {
      --copy-ink: var(--white);
      background-image: linear-gradient(110deg, var(--copy-ink) 35%, #80cdf3 44%, #effaff 50%, #80cdf3 56%, var(--copy-ink) 65%);
      background-repeat: no-repeat;
      background-size: 300% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: code-illuminate 2600ms cubic-bezier(.25,.6,.35,1) 120ms both;
    }
    .copy-lead span:last-child { animation-delay: 300ms; }
    .intro .copy-block { --copy-ink: var(--text-body); animation-delay: 460ms; }
    .intro .copy-block + .copy-block { animation-delay: 680ms; }
    @keyframes code-illuminate { from { background-position: 100% 0; } to { background-position: 0% 0; } }
  }
  .copy-settled .copy-lead span, .copy-settled .intro .copy-block { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}
.intro ::selection { background: var(--blue); color: var(--white); -webkit-text-fill-color: var(--white); }
@media (forced-colors: active) {
  .copy-lead, .copy-lead span, .intro .copy-block { animation: none; background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}
@media (max-width: 820px) {
  .homepage { padding-top: 140px; }
  .copy-lead { font-size: clamp(36px, 6.25vw, 48px); }
  .intro-copy { font-size: 18px; }
  .scene { margin-top: 32px; }
}
@media (max-width: 600px) {
  .homepage { padding-top: 124px; }
  .intro { padding-top: 0; }
  .copy-lead { font-size: clamp(32px, 8.8vw, 40px); margin-bottom: 24px; line-height: 1.08; }
  .intro-copy { font-size: 17px; }
  .keep-word { white-space: normal; }
  .scene { margin-top: 28px; }
  .home-explore { margin-top: 20px; }
  .motion-label { display: none; }
}
@media (max-width: 360px) {
  .hero-stage { width: calc(100% - 24px); }
  .intro { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}