/* ═══════════════════════════════════════════════════════════════════════
GeXOn AI — Scroll-scrubbed process chapters
───────────────────────────────────────────────────────────────────────
Loaded AFTER main.min.css / components.min.css, on services.html and
solmirix.html only.
WHY THIS FILE EXISTS, AND WHY IT IS NOT MINIFIED
There is no minifier, build script or package.json anywhere in this
repo. main.css (source) and main.min.css (what pages actually load) are
kept in sync entirely by hand, which means they can silently drift and
nobody can review a diff of a single 68KB line. Rather than extend that
liability, all new CSS lives here as one hand-maintained, readable file.
Assets are served `immutable` for one year (.htaccess:37-40), so
BUMP THE ?v= IN BOTH TAGS WHENEVER YOU EDIT THIS FILE.
Returning visitors will not otherwise revalidate it, even on reload.
RULES MARKED "SHADOWS" override a rule whose source of truth is
main.css. main.min.css is deliberately left byte-identical so that no
other page's year-long cache is invalidated. Apply the same fix to
main.css when convenient so a future re-minify converges; never apply
it to main.min.css alone.
THE ONE ARCHITECTURAL RULE
Base styles are the FINISHED END STATE. The `[data-stage]` attribute —
which only JavaScript can add — is the switch that starts hiding the
future. So "no JS", "reduced motion" and "before the first scroll
frame" all degrade to a complete, readable visual rather than an empty
box. Never write a base rule that hides content pending a JS class.
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
1 · SHADOWED OVERRIDES
Each of these fixes a rule in main.css that would otherwise break the
staged chapters or lose content when JS is off.
═══════════════════════════════════════════════════════════════════════ */
/* SHADOWS main.css:3824 — `.chapter { overflow: hidden }`.
overflow:hidden establishes a scroll container, and a descendant
position:sticky resolves against THAT rather than the viewport. Since
it never scrolls, sticky silently never engages. `clip` clips exactly
the same way without creating a scroll container. */
.chapter {
overflow: clip;
}
/* SHADOWS main.css:2140 — `.doc-demo__field-value { opacity: 0 }`.
The value was revealed only by `.is-filled`, a class JS adds. With JS
disabled every extracted value rendered invisible, so the document
visual showed four empty labelled boxes. Base is now the filled end
state; the [data-stage] rules in §5 hide the not-yet-reached ones. */
.doc-demo__field-value {
opacity: 1;
transform: none;
}
/* SHADOWS main.css:2217 — `.lead-demo__card-badge { opacity: 0 }`.
Same bug: with JS off the lead card showed no score and no assignee. */
.lead-demo__card-badge {
opacity: 1;
transform: none;
}
/* SHADOWS main.css:1968 — `.chat-bubble { opacity: 0 }`.
The worst instance of the pattern: `.chat-app__body` was EMPTY in the
HTML and every bubble was JSON.parse'd out of an adjacent