/* Knowl site — the plain layer, for reference pages.
 *
 * Reference pages are read, not experienced. They load base.css for the tokens, the type
 * scale and the components, then this on top to switch off everything the marketing pages use to
 * make a first impression: the fixed sky, the starfield, the scroll-driven wash, the section
 * plates and their corner glows.
 *
 * Measured cost of those on a marketing page: median frame 33ms during a scroll, p95 50ms, half
 * the frames over 24ms, with a full-viewport soft-light layer recompositing every frame. None of
 * that earns its keep on a page somebody is scanning for a command name.
 *
 * A page that links this also loads plain.js instead of motion.js, so no animation runtime and
 * no smooth-scroll library arrive either.
 */

/* Sections paint one flat colour each. There is no fixed stage on these pages, so the segment
 * class has to reach the section itself — and the hero lives in .hero-wrap, not a .band. */
body{background:var(--canvas)}
.band,.hero-wrap{background:var(--seg-flat,var(--canvas))}
.band::before,.band::after,.hero-wrap::before,.hero-wrap::after{display:none}

.seg-night{--seg-flat:#04121A}
.seg-void {--seg-flat:#000000}
.seg-rise {--seg-flat:#101A33}
.seg-steel{--seg-flat:#1A3042}
.seg-dawn {--seg-flat:#33362F}
.seg-day  {--seg-flat:#FBFAF7}
.seg-mist {--seg-flat:#C7CDD0}
.seg-jade {--seg-flat:#07171A}
.seg-ash  {--seg-flat:#212429}
.seg-dusk {--seg-flat:#0A141C}

/* Whatever ambient layers the markup still carries are inert here. */
.stars,.sky,.hero-sky,.drift,.stage,.plate{display:none!important}

/* The nav scrim takes the colour of the section under it rather than a live stage value. */
.nav::before{background:linear-gradient(180deg,var(--seg-flat,#04121A) 62%,transparent)}

/* ── reveals, done by the stylesheet ───────────────────────────────────────
 * plain.js only adds .in. Only opacity and transform are animated, both of which composite
 * without layout or paint, so the main thread stays free while you scroll. */
[data-animate],[data-animate-standalone]{opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-animate].in,[data-animate-standalone].in{opacity:1;transform:none}
[data-animate="fade-in"]{transform:none}

[data-animate-chain]>*{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-animate-chain].in>*{opacity:1;transform:none}
[data-animate-chain].in>*:nth-child(2){transition-delay:.07s}
[data-animate-chain].in>*:nth-child(3){transition-delay:.14s}
[data-animate-chain].in>*:nth-child(4){transition-delay:.21s}
[data-animate-chain].in>*:nth-child(5){transition-delay:.28s}
[data-animate-chain].in>*:nth-child(6){transition-delay:.35s}

/* No per-character blur here. A blur filter on every glyph is a compositing layer each, which is
 * precisely the cost this file exists to remove — the heading fades as one piece instead. */
[data-animate="blur-reveal"]{opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-animate="blur-reveal"].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-animate],[data-animate-standalone],[data-animate-chain]>*{
    transition:none;opacity:1;transform:none}
}