/* interior.css -- Phase 2 shared interior-page treatment.
   Append-layer convention (mirrors home.css): scaffold -> shared-layout ->
   per-hero blocks appended by later tasks. Reuses tokens.css/style.css palette
   vars. All motion is reduced-motion gated. */

/* ---- shared layout (Layer A) ---- */
.interior-wrap { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.page-eyebrow {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3, #8a8275); margin-bottom: 0.75rem;
}
.interior-prose h1 { font-family: var(--display, 'EB Garamond', Georgia, serif); line-height: 1.1; }
.interior-prose .lede { font-size: 1.18rem; color: var(--ink-2, #4a4438); font-style: italic; }

/* scroll-assemble: heading slides/fades in; reduced-motion shows end-state */
.interior-prose .assemble { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.interior-prose .assemble.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .interior-prose .assemble { opacity: 1; transform: none; transition: none; }
}

/* count-up numbers (Track Record stat grid etc.) */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---- bespoke hero: Architecture (dark) ---- */
.ihero { padding: 4rem 1.25rem 3rem; }
.ihero[data-palette="observatory"] { background: var(--obs-bg, #0f1318); color: var(--obs-ink, #e8e3d4); }
.ihero-inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.ihero-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--obs-gold, #c9a15a); }
.ihero-title { font-family: var(--display, 'EB Garamond', Georgia, serif); font-size: 2.4rem; margin: 0.4rem 0; }
.ihero-lede { color: var(--obs-ink-2, #b9b2a0); font-style: italic; max-width: 34rem; margin: 0 auto 1.5rem; }
.ihero-mesh { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.ihero-mesh .mesh-node circle { animation: hero-breathe 3.6s ease-in-out infinite; }
.ihero-mesh .mesh-node circle:nth-child(odd) { animation-delay: 1.2s; }
.ihero-mesh .mesh-wire path { animation: hero-flow 4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .ihero-mesh .mesh-node circle, .ihero-mesh .mesh-wire path { animation: none; }
}
/* hero-breathe + hero-flow: reuse home.css definitions if shared; else define here once. */
@keyframes hero-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hero-flow { to { stroke-dashoffset: -20; } }

/* ---- bespoke hero: Capabilities (dark, engine-targets) ---- */
.ihero-targets-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 1rem auto 0; }
.ihero-targets-svg .mesh-node circle, .ihero-targets-svg circle.mesh-node { animation: hero-breathe 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ihero-targets-svg [class*="mesh-node"] { animation: none; } }

/* ---- bespoke hero: Track Record (dark, count-up scoreboard) ---- */
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1.5rem; max-width: 40rem; margin: 1.5rem auto 0; }
.score-cell { display: flex; flex-direction: column; align-items: center; }
.score-cell .stat-num { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 2.2rem; color: var(--obs-gold, #c9a15a); }
.score-lab { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--obs-ink-2, #b9b2a0); }
.ihero-note { font-size: 0.78rem; color: var(--obs-ink-2, #b9b2a0); margin-top: 1.25rem; }

/* ---- bespoke hero: Operator (light, quiet editorial) ---- */
.ihero-operator { background: var(--bg, #EEEEE8); padding: 4rem 1.25rem 2.5rem; }
.ihero-eyebrow.op { color: var(--accent, #8F5A3C); }
.ihero-title.op { color: var(--ink, #1B1714); }
.ihero-pull { font-family: var(--display, 'EB Garamond', Georgia, serif); font-style: italic; font-size: 1.5rem; line-height: 1.3; color: var(--ink-2, #4a4438); max-width: 34rem; margin: 1rem auto 0; }

/* ---- Task 6: polish (responsive + a11y) ---- */
@media (max-width: 560px) {
  .ihero { padding: 2.5rem 1rem 2rem; }
  .ihero-title { font-size: 1.8rem; }
  .score-grid { gap: 1rem; }
  .interior-wrap { padding: 1.75rem 1rem 3rem; }
}
/* belt-and-suspenders: kill ALL hero motion under reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ihero [class*="mesh"], .ihero svg * { animation: none !important; }
  .interior-prose .assemble { opacity: 1 !important; transform: none !important; }
}