/*
 * components/css/surfaces/M8c-01-homepage.css  (S80 DARK cinematic rebuild)
 * Homepage (/) surface on the dark single-accent foundation. Loaded AFTER the
 * foundation cascade + the composed primitive stylesheets. Consumes the S80 dark
 * tokens (--ground/--surface-*/--text*/--lime/--glow-lime*) + structural tokens
 * (--fs-*/--space-*/--dur-*). Zero :root re-declaration (foundation-tokens.css
 * is the sole declaration site, holding both the dark foundation + legacy cream).
 *
 * Register: landonorris.com — ONE accent (lime) on a warm dark field; richness
 * from value + scale + scroll-driven motion + lime glow, NOT a palette of hues.
 * Lime is scarce + travelling, and blooms on the alive moments (hero word, the
 * signal climb, the single binding reveal, the CTA). Differentiation elsewhere is
 * value / weight / scale / motion. Type descent is clamp()-bounded (no overflow
 * 375–1600). D-S80-DARK-CINEMATIC-FOUNDATION.
 */

/* ── Box-sizing reset (homepage scope) ──────────────────────────────────────── */
.m8c-01-homepage,
.m8c-01-homepage *,
.m8c-01-homepage *::before,
.m8c-01-homepage *::after { box-sizing: border-box; }

/* ── Root surface (dark) ────────────────────────────────────────────────────── */
.m8c-01-homepage {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  position: relative;
  overflow-x: hidden;
  font-family: "Inter", system-ui, sans-serif;
}

/* Living substrate — fixed reactive sensor field behind all content
 * (js/substrate.js). Content layers above it; the body --ground shows through
 * the cleared canvas. The nav keeps its own higher sticky z-index. */
.home-substrate {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%; /* canvas is a replaced element — inset:0 alone keeps intrinsic 150px height */
  z-index: 0;
  pointer-events: none;
}
.home-hero, .home-ticker, .beat, .site-footer { position: relative; z-index: 1; }

/* Lime accent on display words = lime TEXT (17:1 on dark), never a fill/slab.
 * The hero word + the framework climax bloom; smaller section accents stay flat
 * to keep lime scarce. (Foundation .mark is left untouched for cream surfaces +
 * the cascade-wiring probe; the homepage uses .accent.) */
.m8c-01-homepage .accent { color: var(--lime); }
.home-hero__title .accent { text-shadow: var(--glow-lime); }

/* ── HERO (beat 1) — spacious, one screen ───────────────────────────────────── */
.home-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--space-gutter) var(--space-2xl);
  overflow: hidden;
}
.home-hero__inner { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.home-hero__eyebrow {
  color: var(--lime);
  font-weight: 700;
  margin: 0 0 var(--space-md);
}
.home-hero__title {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
}
.home-hero__lead {
  margin: var(--space-md) 0 0;
  max-width: 34ch;
  color: var(--text-2);
}
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

.home-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--text-3);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-label);
}
.home-hero__scroll-glyph { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .home-hero__scroll-glyph { animation: home-scroll-nudge 1.8s var(--ease-in-out) infinite; }
}
@keyframes home-scroll-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* Thin framework-layer ticker (honest: layer names only) */
.home-ticker {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-xs) 0;
  overflow: hidden;
}
.home-ticker__row {
  display: flex;
  gap: var(--space-2xl);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
  padding-left: var(--space-2xl);
}
.home-ticker__item { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.home-ticker__item::before { content: "◆"; color: var(--lime); font-size: 0.7em; }

/* ── SIGNAL (beat 2) — the alive moment ─────────────────────────────────────── */
.beat--signal .beat__split {
  display: grid;
  grid-template-columns: 1fr auto minmax(0, 440px);
  gap: var(--space-lg);
  align-items: center;
}
.beat--signal .beat__copy { max-width: 44ch; }
.beat--signal .beat__copy .beat__lead { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--text-2); }

/* §01 connective tissue — claim -> reactive field -> computed card, one moment */
.signal-bridge { position: relative; display: flex; align-items: center; }
.signal-bridge__line { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--lime)); }
.signal-bridge__dot { position: absolute; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: var(--glow-lime-soft); }

@media (max-width: 880px) {
  .beat--signal .beat__split { grid-template-columns: 1fr; gap: var(--space-xl); }
  .beat--signal .signal-bridge { display: none; }
  .signal { margin-inline: auto; }
}

/* ── PROOF (beat 3) ─────────────────────────────────────────────────────────── */
.beat--proof { padding-block: var(--space-xl) 0; }
.beat--proof .beat__eyebrow { margin-bottom: var(--space-2xl); }

/* ── FRAMEWORK (beat 4) — five layers, one binds (the single lime climax) ──────
 * The .strata model vocabulary was FORGED into the canonical FiveAxisModel
 * primitive at S80 Phase 1 (components/primitives/FiveAxisModel/FiveAxisModel.css)
 * so the homepage and /framework consume ONE model, never per-surface copies.
 * index.html loads that primitive BEFORE this surface, so the static homepage
 * rail renders byte-for-byte as before; the surface-scoped scroll dramaturgy
 * below (bind-bloom) layers on top of the primitive's base, unchanged. */

/* ── JUDGMENT (supporting beat) ─────────────────────────────────────────────── */
.beat--judgment .beat__lead { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.judgment-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.judgment-strip__item { border-top: 2px solid var(--hairline-strong); padding-top: var(--space-sm); }
.judgment-strip__dim { font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text); }
.judgment-strip__desc { margin: var(--space-2xs) 0 0; color: var(--text-3); font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) { .judgment-strip { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ── THESIS band (the 4% hook — one big lime moment) ────────────────────────── */
.thesis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
}
.thesis__numeral {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(4rem, 2rem + 12vw, 11rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: var(--tracking-display);
  color: var(--lime);
  text-shadow: var(--glow-lime);
}
.thesis__numeral sup { font-size: 0.4em; color: var(--text-3); text-shadow: none; }
.thesis__copy { max-width: 42ch; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--text-2); }
.thesis__copy strong { color: var(--text); font-weight: 700; }
.thesis__tag { display: block; font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); margin-bottom: var(--space-2xs); }
@media (max-width: 720px) { .thesis { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ── CTA escalation (beat 5) ────────────────────────────────────────────────── */
.beat--cta { text-align: center; }
.beat--cta .beat__inner { display: flex; flex-direction: column; align-items: center; }
.beat--cta .beat__title { max-width: 16ch; }
.beat--cta .beat__lead { max-width: 48ch; margin-inline: auto; font-size: var(--fs-subhead); color: var(--text-2); }
.cta-escalation__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.cta-escalation__meta { margin-top: var(--space-xl); display: flex; gap: var(--space-2xl); justify-content: center; flex-wrap: wrap; font-family: "JetBrains Mono", monospace; }
.cta-escalation__metric-value { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 700; color: var(--text); }
.cta-escalation__metric-label { font-size: var(--fs-mono-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); font-weight: 700; margin-top: var(--space-3xs); }
.cta-escalation__metric-sub { font-family: "Inter", system-ui, sans-serif; font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* Sample scenario card */
.sample-card {
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  max-width: 640px;
  margin: var(--space-2xl) auto 0;
  text-align: left;
}
.sample-card__head { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--hairline); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: var(--tracking-label); color: var(--text-3); }
.sample-card__layer { color: var(--lime); font-weight: 700; }
.sample-card__body { padding: var(--space-md); }
.sample-card__q { font-size: var(--fs-body); line-height: 1.5; margin: 0 0 var(--space-md); color: var(--text); }
.sample-card__opt { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--hairline); margin-bottom: var(--space-2xs); font-size: 14px; color: var(--text-2); }
.sample-card__opt-letter { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 12px; color: var(--text-3); }
.sample-card__opt--key { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, transparent); color: var(--text); }
.sample-card__opt--key .sample-card__opt-letter { color: var(--lime); }

/* ── S80 10% · scroll dramaturgy (off-main-thread via scroll-timeline;
 *    reduced-motion static — the @media no-preference wrapper means none of
 *    these apply under reduce, so resting state is the design). ──────────────── */
@keyframes stat-drift   { from { transform: translateY(1.25rem); } to { transform: translateY(-1.25rem); } }
@keyframes bind-bloom   { from { box-shadow: var(--glow-lime-soft); } to { box-shadow: var(--glow-lime-peak); } }
@keyframes bridge-travel{ from { transform: translateX(0); opacity: 0.4; } to { transform: translateX(66px); opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vignette__stat { animation: stat-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .strata__row--bind .strata__bind-chip { animation: bind-bloom linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
    .signal-bridge__dot { animation: bridge-travel linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
  }
}

/* ── D22 · reduced-motion umbrella (surface scope) ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .m8c-01-homepage,
  .m8c-01-homepage * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}