/* ─── pages/home.css ─ homepage-only rules. Shared components live in site.css. ── */

/* Homepage runs a narrower column than the other pages */
.page-home { --wrap: 1120px; }
.page-home .stage { padding: 44px 24px 20px; }
.page-home .stage + .wrap > .sec:first-child { padding-top: 72px; }
.page-home .band-solid .split { align-items: start; }

/* ── Hero console ──────────────────────────────────────────────────────────── */
.hero-console { width: 80%; }
.hero-pane { padding: 48px 24px; background: var(--bg-terminal); }
.tl-hero { display: flex; gap: 48px; align-items: center; }
.tl-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tl-tag { font: 700 11px/1 var(--font-mono); letter-spacing: 1.6px; color: var(--hint); }
.tl-h1 {
  margin: 0; max-width: 24ch; text-wrap: pretty; text-transform: uppercase;
  font: 800 48px/1.05 var(--font-mono); letter-spacing: -1px; color: var(--fg-primary);
}
.tl-h1 em { color: var(--brand); }
.tl-body { margin: 0; max-width: 62ch; font: 400 14px/21px var(--font-mono); color: var(--fg-muted); }

.scroll-hint {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 20px 0 0; font: 400 12px/1 var(--font-mono); color: var(--fg-muted);
}
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.scroll-hint-arrow { animation: nudge 1.4s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .scroll-hint-arrow { animation: none; } }

/* ── "Need even more?" under the pricing cards ─────────────────────────────── */
.more { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 40px; text-align: center; }
.more-h {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  background: var(--bg-elevated); border: 1px solid var(--brand-line);
  font: 700 14px/1 var(--font-mono); letter-spacing: 1px; color: var(--fg-primary); text-align: left;
}
.more-h a:hover { color: var(--fg-primary); }
.more p { margin: 0; font: 400 13px/20px var(--font-mono); color: var(--fg-muted); }

@media (max-width:1040px) {
  .hero-console { width: 100%; }
}
@media (max-width:640px) {
  .tl-h1 { font-size: 28px; }
  .tl-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ─── Intro animation ────────────────────────────────────────────────────────
   SEO rules this follows:
   - Text is never changed or removed. Everything is in the HTML from the start;
     only opacity / clip-path change, so crawlers index the same copy.
   - No layout shift: the console "opens" with clip-path, not height/width.
   - The H1 (the LCP element) is visible by ~0.85s, so LCP stays well under 2.5s.
   - Hero is pure CSS (runs without JS). The pricing reveal and the "thinking"
     beat are shared components in site.css (see "Reveal animation").
   Hero timeline (ms): box width 0-160 · box height 160-420 · thinking 420-750 ·
   tag 750 · h1 830 · body 910 · scroll hint 1250. Pricing starts at >= 1300. */

/* Console boots: title bar draws out from the centre, then the box opens down */
@keyframes console-boot {
  0%   { clip-path: inset(-2px 50% calc(100% - 29px) 50%); animation-timing-function: steps(8, end); }
  38%  { clip-path: inset(-2px -2px calc(100% - 29px) -2px); animation-timing-function: steps(11, end); }
  100% { clip-path: inset(-2px -2px -2px -2px); }
}
.hero-console { animation: console-boot 420ms both; }

/* Hero lines step in. 1ms linear = an instant cut (steps(1) can round to the
   hidden state at the very end of a 1ms animation, so avoid it here). */
.tl-tag, .tl-h1, .tl-body, .mascot-stage, .scroll-hint { animation: appear 1ms linear both; }
/* The mascot cuts in with visibility, not opacity: Chrome never records an
   element first painted at opacity 0 as the LCP, so an opacity reveal made a
   late build-up frame the LCP instead of the finished image. */
@keyframes appear-visible { from { visibility: hidden; } to { visibility: visible; } }
.mascot-stage { animation-name: appear-visible; animation-delay: 750ms; }
/* Build-up frames sit over the (always visible) finished mascot, so each needs
   an opaque background: the hero pane's tint over the console base, which
   matches the pane exactly. See site.js "Mascot". */
.hero-pane .mf-frame { background: linear-gradient(var(--bg-terminal), var(--bg-terminal)), var(--bg-base); }
.tl-tag       { animation-delay: 750ms; }
.tl-h1        { animation-delay: 830ms; }
.tl-body      { animation-delay: 910ms; }
.scroll-hint  { animation-delay: 1250ms; }

/* ── Hero "thinking..." beat ── */
.hero-pane { position: relative; }
/* Hero: shows 420-750ms, overlaid top-left of the pane (no layout impact) */
.hero-think { position: absolute; top: 48px; left: 24px; opacity: 0; animation: appear 1ms 420ms linear both, vanish 1ms 750ms linear forwards; }

/* ── "Need even more?" block reveals after the cards (shared reveal in site.css) ── */
.js:not(.reveal-all) .plans-reveal .more > * { opacity: 0; }
.js .plans-reveal.is-in .more > * { animation: appear 1ms linear both; }
.js .plans-reveal.is-in .more > :nth-child(1) { animation-delay: 1300ms; }
.js .plans-reveal.is-in .more > :nth-child(2) { animation-delay: 1380ms; }
.js .plans-reveal.is-in .more > :nth-child(3) { animation-delay: 1460ms; }

/* Reduced motion: no intro, everything visible straight away */
@media (prefers-reduced-motion: reduce) {
  .hero-console, .tl-tag, .tl-h1, .tl-body, .mascot-stage, .scroll-hint,
  .js .plans-reveal .more > * { animation: none !important; opacity: 1 !important; clip-path: none !important; }
}