/* The About page's own rules — the host side of the integration and this
   project's file. The section's own stylesheets, about.css and about.v2.css, are the
   animation's (docs/about/ explains them); this loads after them. */

/* While the sequence plays the stage is full-bleed and mostly dark, and the
   header's ink would sit on it unreadable. It steps aside and comes back with
   the copy. `about-playing` is set on the root by src/ui/about-page.js from
   the section's phase; the bar's opacity transition is hud.css's own. */
html.about-playing .hud-bar { opacity: 0; pointer-events: none; }

/* The section carries the name in its own topline; this page has it in the
   header instead, so the topline row collapses. The mobile rule in about.css
   leaves 74px above the stage for that topline, which the header now takes,
   so the section goes back to a full viewport. */
.about-topline { display: none; }
.about-section { min-height: 100svh; }

/* The fallback portrait, hidden from the FIRST PAINT. Without this the
   stylesheet's finished-state default shows it until the module runs, and the
   module's hide is a 420 ms fade: half a second of the portrait at the start,
   measured on the live page (17 Sep). `about-js` is put on the root by
   src/about-early.js before the stylesheets; it comes off if the module fails
   (its own catch) or never starts (the script's 5 s net), and then the
   fallback shows as designed. No transition: the hide has to be instant. */
html.about-js .about-section:not(.is-ready) .about-fallback { opacity: 0; transition: none; }
/* …and the stage already in its playing state at that first paint — the
   sequence's own dark, undocked — rather than the finished card for the
   frames before the module writes the same values inline. Off with the class. */
html.about-js .about-section:not(.is-ready) { --dock: 0; --about-bg: rgb(16, 16, 16); }