/* Graylark LRM: the brand layer, loaded after the theme (styles_v7.css) by nav-layout and the public pages.
 *
 * Always on since 7 October 2026 (the ui.refresh.enabled switch is gone). The first version, on
 * 2 October, re-dressed the whole product in the marketing site's colours; the review kept the motion
 * (graylark-motion.js: stat tiles arriving in sequence, their figures counting up, progress bars
 * growing from the left) and the public pages' dark top bar, which the public pages' own stylesheet
 * (graylark-public.css, 7 October) has since replaced. Plus the optional flat page header
 * (.header-flat) behind ui.header.particles.enabled or ?header=flat, which the particle animation
 * stays the default for. docs/ui-refresh.md has the account; the brand tokens below are what
 * graylark-public.css paints with.
 */

/* ----------------------------------------------------------------- tokens
 * The marketing site's palette (site.css), under the same names. Not yet applied to components. */

:root {
  --slate: #495a58;
  --slate-deep: #3f4a49;
  --ink: #263130;
  --ink-2: #1c2423;
  --sand: #dcd9d0;
  --sand-2: #e9e7e0;
  --paper: #f4f3ee;
  --clay: #d4967d;
  --clay-deep: #c4826a;
  --clay-soft: #ecc9b8;
  --rust: #9c5a40;
  --navy: #272f3b;         /* the product's own chrome: sidebar, card headers, the public pages' top bar */
  --mint: #9fb3ad;
  --moss: #6b8e7a;
  --amber: #d9a85c;
  --late: #c96b55;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------ page header
 * The flat header: the viewer chose ?header=flat, or ui.header.particles.enabled is off. */

.header-flat .page-header.bg-gradient-gray {
  background-color: var(--navy) !important;
  background-image: none !important;
}
.header-flat #particles-js { display: none !important; }

/* ----------------------------------------------------------------- motion
 * The tiles (cards that lift on hover, graylark-motion.js's definition too) and progress bars that
 * are animated in must never be shown, taken away and shown again. So they are hidden from the first paint: the layout adds gl-prepaint to
 * <html> in the head, and these rules hold the tiles faint and the bars at zero width until the
 * script takes over, puts its own gl-reveal on the tiles, and removes gl-prepaint. If the script
 * never runs (blocked, failed), the zero-length animation with a 1.5s delay shows everything.
 * Then, as a row comes into view, each tile gets gl-in 90ms after the one before. */

html.gl-prepaint .card.lift:not(.nudge-item) { opacity: 0; transform: translateY(10px); animation: gl-failsafe 0s 1.5s forwards; }
html.gl-prepaint .progress .progress-bar { transform: scaleX(0); transform-origin: left center; animation: gl-failsafe-bar 0s 1.5s forwards; }
@keyframes gl-failsafe { to { opacity: 1; transform: none; } }
@keyframes gl-failsafe-bar { to { transform: none; } }

.gl-reveal { opacity: 0; transform: translateY(10px); }
.gl-reveal.gl-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html.gl-prepaint .card.lift:not(.nudge-item),
  html.gl-prepaint .progress .progress-bar,
  .gl-reveal, .gl-reveal.gl-in { opacity: 1; transform: none; transition: none; animation: none; }
}