/* 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: #000; }   /* pure black, the KD loader's own ground (24 Sep, "make BG colour of loading pure dark"; it was rgb(16,16,16)) */

/* The loading bar (24 Sep): a line about the pictures and a 1px track, centred
   on the dark stage while they arrive — the KD loader's meter without its
   count, in the loader's greys, which are what the module paints on a dark
   frame. Shown from the first paint (html.about-js) until the section is
   ready; the module writes --about-loaded on the section, 0 to 1, as each of
   the 69 pictures lands (src/ui/about.js, prepare()). Gone with the reel. */
.about-loading {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: min(320px, 78vw); transform: translate(-50%, -50%);   /* centred (24 Sep, "center align loading"); it was at the foot */
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
html.about-js .about-section:not(.is-ready) .about-loading,
.about-section.is-loading:not(.is-ready) .about-loading { opacity: 1; transition: none; }
.about-notice {
  margin: 0 0 14px; text-align: center;
  font-size: 11px; line-height: 1.55; letter-spacing: .025em; font-weight: 400;
  color: #b8b8bb;
}
.about-loading-track { height: 1px; background: #303033; overflow: hidden; }
.about-loading-track i {
  display: block; height: 100%; background: #efeff1;
  transform: scaleX(var(--about-loaded, 0)); transform-origin: left;
  transition: transform .25s ease;
}

/* html.about-wait — NOT .about-loading, which is the bar's own class below: a
   root class with that name matched the html element and hid the whole page
   for the length of the load (24 Sep, caught by a pixel check).
   While loading the header sits over the dark stage: the name and the link in
   the light ink the site uses over space (styles/layout.css remaps the same
   tokens there), so a visitor can read the name and take the Resume link
   during the wait. Back to the page's ink the moment the section is ready. */
html.about-wait .hud-bar { --ink: #f5f5f7; --ink-soft: #b9bec9; }

/* A phone, two rules (24 Sep night; src/ui/about-page.js explains both).
   The height: --about-vh is the small viewport in pixels, measured once on a
   touch device, in place of svh — Brave on iPhone resizes the web view as its
   toolbar collapses, so svh moves there and the docked portrait jumped. The
   two rules below repeat about.v2.css's and this file's own with the
   variable in place of the unit; pointer devices never set it and keep svh.
   The lock: no scrolling while the pictures load (html.about-wait) or the
   sequence plays (html.about-playing) — the stage is the whole screen then. */
@media (max-width: 900px) {
  .about-section { min-height: var(--about-vh, 100svh); }
  .about-v2 .about-stage {
    min-height: calc(var(--bleed) * var(--about-vh, 100svh) + var(--dock) * var(--about-vh, 100svh) / 2) !important;
  }
  html.about-wait, html.about-playing { overflow: hidden; overscroll-behavior: none; }
  html.about-wait body, html.about-playing body { overflow: hidden; touch-action: none; overscroll-behavior: none; }
}

/* The header's fill follows the scroll on a phone (25 Sep, "it should start
   subtle and sequantialy"; src/ui/about-page.js explains). The fill is the
   bar's own phone fill from styles/hud.css, moved to a layer whose opacity is
   --bar-k (0 at the top, 1 by 64 px of scroll), so it builds as the page moves
   instead of switching on at 24 px; the bar's own background stays clear. The
   same (hover: none) as the bar's phone rule, so it replaces exactly that; a
   pointer device keeps the frosted bar. */
@media (hover: none) {
  .hud-bar, .hud-bar.scrolled { background: none; }
  .hud-bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--bar) 100%, var(--bg) 35%);
    opacity: var(--bar-k, 0);
  }
}