/* Dottpace landing — the character field behind the hero dashboard (v2, 15 Oct 2026: white, grey and black glyphs that blend into
   the floor; muted, behind the surface; a lens under the mouse). Home only; drawn by assets/js/ascii-field.js.
   The canvas sits inside the stage panel (.hero-bd), so it is behind the window and the site tabs and takes the stage's own
   mask: it fades in from the page colour at the top and lies on the floor at the bottom. The floor's colours stay hero.css's.
   Every glyph is pure white or pure black at a low alpha, so it takes its colour from the floor under it. The tokens:
   --ascii-dark  1: ink is white and counter-ink black (dark theme); 0: ink is black and counter-ink white (light theme)
   --ascii-ink   the ribbons' tone (lighter than the floor in dark, darker in light)
   --ascii-grey  the quiet dust between the ribbons
   --ascii-shade counter-ink: glyphs on the other side of the floor (darker in dark, lighter in light)
   --ascii-hi    the brightest a glyph reaches under the pointer
   Oct 15 (founder: "muted, behind the surface"): the resting alphas are the prototype's ×0.77 in dark and ×0.6 in light. */
:root{--ascii-dark:0;--ascii-ink:.054;--ascii-grey:.027;--ascii-shade:.37;--ascii-hi:.30}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ascii-dark:1;--ascii-ink:.065;--ascii-grey:.032;--ascii-shade:.42;--ascii-hi:.34}
}
:root[data-theme="dark"]{--ascii-dark:1;--ascii-ink:.065;--ascii-grey:.032;--ascii-shade:.42;--ascii-hi:.34}

.hero-ascii{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 1.6s linear}
.hero-ascii.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-ascii{transition:none}}
/* a texture only: off where the system asks for plain, high-contrast surfaces */
@media (forced-colors:active),(prefers-contrast:more){.hero-ascii{display:none}}

/* the pause button (WCAG 2.2.2 · Motion Rulebook L3): a quiet icon in the stage floor's bottom-right corner, styled like the site
   tabs. The script shows it only where the field moves (not under Reduce motion, not under 900px); it never takes layout space. */
.hero-pause{position:absolute;z-index:1;right:16px;bottom:12px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;
  color:var(--tab-ink);background:transparent;cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.hero-pause[hidden]{display:none}
.hero-pause .ic{width:14px;height:14px;color:currentColor}
.hero-pause:hover{color:var(--tab-ink-on);background:var(--tab-h)}
.hero-pause:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
@media (forced-colors:active),(prefers-contrast:more){.hero-pause{display:none}}