/* ============================================================
   OCTO for Startups — page-level styles.
   Built on colors_and_type.css (shared OCTO design system).

   The page itself is rendered by app.jsx (React). Component styling
   lives inline in that file, ported faithfully from the Claude design
   artifact "Narrative & Identity". This stylesheet holds only the
   document baseline + the keyframes the components reference by name.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: #fff;
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Jump links (Thesis / Process / Proof, etc.) glide instead of snapping,
   and land just below the 64px fixed nav rather than tucked under it. */
html { scroll-behavior: smooth; }
:where(#thesis, #process, #proof, #contact) { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Keyframes referenced from app.jsx inline styles --------------------- */

/* fade-up entrance */
@keyframes octoUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* the light sweep that travels along the active process arrow */
@keyframes octoSweep {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(560%); }
}

/* animated film-grain over the arrow mask */
@keyframes octoGrain {
  0%   { background-position: 0 0; }
  100% { background-position: 150px 90px; }
}

/* slow pulse (reserved for lead/active indicators) */
@keyframes octoLead {
  0%, 100% { opacity: .25; }
  50%      { opacity: .9; }
}

/* Pre-hydration: keep the mount point dark so there's no white flash
   while React + Babel compile and boot. */
#app:empty {
  min-height: 100vh;
  background: var(--bg);
}