neba 1.18.0 → 1.19.0

package/dist/tailwind.css

@@ -100,6 +100,16 @@
   --neba-fill-alpha: 88%;
   --neba-blur: blur(9px) saturate(1.5);
 
+  /* What every translucent sheet and fill is laid over before it reaches the
+     page. `transparent` is the acrylic: the page shows through, and the blur
+     above is what keeps it from being read. `var(--neba-surface)` stops it,
+     and each sheet comes out the colour the acrylic has over a plain page —
+     which is what the reduced-transparency block below the dark theme sets,
+     together with `--neba-blur: none`. One value for both themes, so it is declared here
+     only; the rule that changes it has to name every theme root, because the
+     surface it resolves against is that root's. */
+  --neba-backing: transparent;
+
   /* How much of the family's accent a focus ring is. The ring sits 2px off the
      control, so what it is read against is the page, and on a white sheet 55%
      of any accent is 2.2 to 2.6:1 — under the 3:1 a focus indicator needs, on
@@ -129,8 +139,12 @@
      any backdrop that is not pure white it settled into grey. Raising it to 66%
      is the one place alpha is the right lever rather than the blur: the blur
      decides whether the backdrop is *legible*, and 9px still hides it. This
-     decides whether the sheet reads as white, and it has to. */
-  --neba-glass-bg: rgb(255 255 255 / 0.66);
+     decides whether the sheet reads as white, and it has to.
+
+     The white is mixed into `--neba-backing` rather than written with an
+     alpha, and so are the panel steps below. Into `transparent` the two are
+     the same colour. */
+  --neba-glass-bg: color-mix(in srgb, white 66%, var(--neba-backing));
 
   /* The container surface, in the three strengths a panel-shaped component
      needs — Box, Card and TextField read these directly.
@@ -146,9 +160,9 @@
 
      The ladder is opacity, not lightness — the sheet catches more light as it
      is engaged, rather than turning grey. */
-  --neba-panel: rgb(255 255 255 / 0.66);
-  --neba-panel-hover: rgb(255 255 255 / 0.82);
-  --neba-panel-press: rgb(255 255 255 / 0.92);
+  --neba-panel: color-mix(in srgb, white 66%, var(--neba-backing));
+  --neba-panel-hover: color-mix(in srgb, white 82%, var(--neba-backing));
+  --neba-panel-press: color-mix(in srgb, white 92%, var(--neba-backing));
 
   /* The one surface in the library that is a groove rather than a sheet: the
      track a Switch's thumb runs along.
@@ -165,7 +179,13 @@
      surface here does — the blur behind it is what makes it acrylic rather than
      paint — and it stays neutral because the family is what "on" says. On the
      dark theme the panel was already darker than the thumb, so these are the
-     panel's own two steps and nothing moves. */
+     panel's own two steps and nothing moves.
+
+     It is not mixed into `--neba-backing`, and neither is any wash: a groove,
+     a `soft` tint or a hairline is cut into a sheet or laid on one, and once
+     the sheet is opaque nothing behind it shows through them either. Mixed
+     into the page's own colour, a track inside a dark Card would be the
+     Card's colour and the groove would be gone. */
   --neba-groove: rgb(16 24 40 / 0.14);
   --neba-groove-hover: rgb(16 24 40 / 0.19);
 
@@ -219,7 +239,9 @@
      tooltip, a toast. One number, because they are all the same kind of thing
      — something drawn over the page the reader was looking at — and because
      the value a host needs is its own. A site whose fixed header is at 1200
-     sets this once rather than beating fourteen `z-50`s with a selector. */
+     sets this once rather than beating fourteen `z-50`s with a selector.
+     The toast stack reads `--neba-z-toast`, which is not declared here: the
+     viewport falls back to one above this, so it follows a host's value. */
   --neba-z-portal: 50;
 
   /* Color families -------------------------------------------------------
@@ -233,7 +255,8 @@
      fill is only 88% opaque, and the pair has to clear 4.5:1 over a white page
      — which pins every family with white text to the high 40s / low 50s. A
      brighter *fill* means a dark ink, which is why `warning` is the one family
-     that already goes there. Verified per step, including hover and active.
+     that already goes there. Verified per step, including hover and active, in
+     every theme: `test/styles/fill-contrast.test.ts` holds it.
 
      `success` moved 152 → 148 and `info` 218 → 223. Both are hue regions where
      sRGB is starved at mid lightness, and a few degrees toward the gamut's wide
@@ -479,11 +502,11 @@
     --neba-plate-top: rgb(255 255 255 / 0.16);
     --neba-sheen: linear-gradient(148deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0) 52%);
 
-    --neba-glass-bg: rgb(255 255 255 / 0.05);
+    --neba-glass-bg: color-mix(in srgb, white 5%, var(--neba-backing));
 
-    --neba-panel: rgb(255 255 255 / 0.05);
-    --neba-panel-hover: rgb(255 255 255 / 0.07);
-    --neba-panel-press: rgb(255 255 255 / 0.09);
+    --neba-panel: color-mix(in srgb, white 5%, var(--neba-backing));
+    --neba-panel-hover: color-mix(in srgb, white 7%, var(--neba-backing));
+    --neba-panel-press: color-mix(in srgb, white 9%, var(--neba-backing));
 
     --neba-groove: rgb(255 255 255 / 0.05);
     --neba-groove-hover: rgb(255 255 255 / 0.07);
@@ -496,7 +519,7 @@
     --neba-shadow-ambient: rgb(0 0 0 / 0.55);
 
     --neba-primary-solid: oklch(57% 0.208 262);
-    --neba-primary-solid-hover: oklch(62% 0.181 262);
+    --neba-primary-solid-hover: oklch(61% 0.181 262);
     --neba-primary-solid-active: oklch(48% 0.196 262);
     --neba-primary-on-solid: oklch(99% 0.004 262);
     --neba-primary-accent: oklch(78% 0.103 262);
@@ -515,7 +538,7 @@
 
     --neba-warning-solid: oklch(76% 0.145 80);
     --neba-warning-solid-hover: oklch(81% 0.154 80);
-    --neba-warning-solid-active: oklch(66% 0.126 80);
+    --neba-warning-solid-active: oklch(69.5% 0.126 80);
     --neba-warning-on-solid: oklch(25% 0.06 70);
     --neba-warning-accent: oklch(82% 0.14 80);
 
@@ -620,11 +643,11 @@
   --neba-plate-top: rgb(255 255 255 / 0.16);
   --neba-sheen: linear-gradient(148deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0) 52%);
 
-  --neba-glass-bg: rgb(255 255 255 / 0.05);
+  --neba-glass-bg: color-mix(in srgb, white 5%, var(--neba-backing));
 
-  --neba-panel: rgb(255 255 255 / 0.05);
-  --neba-panel-hover: rgb(255 255 255 / 0.07);
-  --neba-panel-press: rgb(255 255 255 / 0.09);
+  --neba-panel: color-mix(in srgb, white 5%, var(--neba-backing));
+  --neba-panel-hover: color-mix(in srgb, white 7%, var(--neba-backing));
+  --neba-panel-press: color-mix(in srgb, white 9%, var(--neba-backing));
 
   --neba-groove: rgb(255 255 255 / 0.05);
   --neba-groove-hover: rgb(255 255 255 / 0.07);
@@ -637,7 +660,7 @@
   --neba-shadow-ambient: rgb(0 0 0 / 0.55);
 
   --neba-primary-solid: oklch(57% 0.208 262);
-  --neba-primary-solid-hover: oklch(62% 0.181 262);
+  --neba-primary-solid-hover: oklch(61% 0.181 262);
   --neba-primary-solid-active: oklch(48% 0.196 262);
   --neba-primary-on-solid: oklch(99% 0.004 262);
   --neba-primary-accent: oklch(78% 0.103 262);
@@ -656,7 +679,7 @@
 
   --neba-warning-solid: oklch(76% 0.145 80);
   --neba-warning-solid-hover: oklch(81% 0.154 80);
-  --neba-warning-solid-active: oklch(66% 0.126 80);
+  --neba-warning-solid-active: oklch(69.5% 0.126 80);
   --neba-warning-on-solid: oklch(25% 0.06 70);
   --neba-warning-accent: oklch(82% 0.14 80);
 
@@ -717,6 +740,53 @@
   --neba-chart-on-8: var(--neba-surface);
 }
 
+/* ---------------------------------------------------------------------------
+ * Reduced transparency
+ *
+ * A reader whose system is set to reduce transparency gets opaque sheets and no
+ * backdrop blur. Taking the blur away alone is not enough, and is worse than
+ * leaving it: the blur is what keeps the page behind a sheet from being read,
+ * so with nothing else changed a menu over a paragraph in the dark theme is
+ * nine per cent of white over sharp text, and a light Card shows a ghost of the
+ * words under it.
+ *
+ * So the sheets and the fills are laid on the page's own surface instead of on
+ * whatever is behind them. Each one comes out the colour the acrylic has over a
+ * plain page — plain white for every light sheet, white over white being
+ * white — and its ink was measured on exactly that colour. What is lost
+ * is the compounding on the dark side: a sheet inside a sheet is no longer
+ * lighter than the one around it, because both are laid on the page. The
+ * hairline and the plate edge still say where the inner one begins, and the
+ * muted ink reads better on it than it did. Washes, grooves and hairlines stay
+ * as they are; they sit on a sheet, and the sheet is opaque now. The scrim
+ * behind a modal stays as well, since showing the page dimmed is its job.
+ *
+ * It also takes the most expensive thing off the page: a backdrop filter is
+ * applied again on every frame the page moves, so a scroll pays for the blur
+ * under every surface on the screen.
+ *
+ * Every theme root is named, because `var(--neba-surface)` resolves on the
+ * element that declares it, and on `:root` alone a `.dark` box inside a light
+ * page would lay its sheets on the light page's white.
+ * ------------------------------------------------------------------------- */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root,
+  .dark,
+  .light,
+  [data-theme='dark'],
+  [data-theme='light'] {
+    --neba-backing: var(--neba-surface);
+    --neba-blur: none;
+  }
+
+  /* The system-dark block declares the blur on `:root` at three classes'
+     weight, which the one class above does not beat. */
+  :root:not(.light):not([data-theme='light']) {
+    --neba-blur: none;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Derived tokens
  *
@@ -741,6 +811,12 @@
  * blue — and the worst family on the strongest wash clears 4.5:1 in both.
  * `accent` itself is untouched, so what a TextLink or a Statistic's delta is
  * written in on the bare sheet does not change.
+ *
+ * A fill is the family's solid mixed into `--neba-backing` rather than into
+ * `transparent`, so that it turns opaque with the sheets when the reader asks
+ * for less transparency. It keeps `--neba-fill-alpha` when it does: the ink on
+ * a fill was solved against that much of it over the page, and the whole solid
+ * instead would take the dark theme's primary hover from about 4.5:1 to 3.6:1.
  * ------------------------------------------------------------------------- */
 
 :root,
@@ -767,17 +843,17 @@
   --neba-primary-fill: color-mix(
     in srgb,
     var(--neba-primary-solid) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-primary-fill-hover: color-mix(
     in srgb,
     var(--neba-primary-solid-hover) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-primary-fill-active: color-mix(
     in srgb,
     var(--neba-primary-solid-active) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-primary-soft: color-mix(in srgb, var(--neba-primary-accent) 10%, transparent);
   --neba-primary-soft-hover: color-mix(in srgb, var(--neba-primary-accent) 17%, transparent);
@@ -805,17 +881,17 @@
   --neba-secondary-fill: color-mix(
     in srgb,
     var(--neba-secondary-solid) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-secondary-fill-hover: color-mix(
     in srgb,
     var(--neba-secondary-solid-hover) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-secondary-fill-active: color-mix(
     in srgb,
     var(--neba-secondary-solid-active) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-secondary-soft: color-mix(in srgb, var(--neba-secondary-accent) 10%, transparent);
   --neba-secondary-soft-hover: color-mix(in srgb, var(--neba-secondary-accent) 17%, transparent);
@@ -843,17 +919,17 @@
   --neba-success-fill: color-mix(
     in srgb,
     var(--neba-success-solid) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-success-fill-hover: color-mix(
     in srgb,
     var(--neba-success-solid-hover) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-success-fill-active: color-mix(
     in srgb,
     var(--neba-success-solid-active) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-success-soft: color-mix(in srgb, var(--neba-success-accent) 10%, transparent);
   --neba-success-soft-hover: color-mix(in srgb, var(--neba-success-accent) 17%, transparent);
@@ -881,17 +957,17 @@
   --neba-warning-fill: color-mix(
     in srgb,
     var(--neba-warning-solid) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-warning-fill-hover: color-mix(
     in srgb,
     var(--neba-warning-solid-hover) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-warning-fill-active: color-mix(
     in srgb,
     var(--neba-warning-solid-active) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-warning-soft: color-mix(in srgb, var(--neba-warning-accent) 12%, transparent);
   --neba-warning-soft-hover: color-mix(in srgb, var(--neba-warning-accent) 20%, transparent);
@@ -919,17 +995,17 @@
   --neba-danger-fill: color-mix(
     in srgb,
     var(--neba-danger-solid) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-danger-fill-hover: color-mix(
     in srgb,
     var(--neba-danger-solid-hover) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-danger-fill-active: color-mix(
     in srgb,
     var(--neba-danger-solid-active) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-danger-soft: color-mix(in srgb, var(--neba-danger-accent) 10%, transparent);
   --neba-danger-soft-hover: color-mix(in srgb, var(--neba-danger-accent) 17%, transparent);
@@ -954,16 +1030,20 @@
     transparent
   );
 
-  --neba-info-fill: color-mix(in srgb, var(--neba-info-solid) var(--neba-fill-alpha), transparent);
+  --neba-info-fill: color-mix(
+    in srgb,
+    var(--neba-info-solid) var(--neba-fill-alpha),
+    var(--neba-backing)
+  );
   --neba-info-fill-hover: color-mix(
     in srgb,
     var(--neba-info-solid-hover) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-info-fill-active: color-mix(
     in srgb,
     var(--neba-info-solid-active) var(--neba-fill-alpha),
-    transparent
+    var(--neba-backing)
   );
   --neba-info-soft: color-mix(in srgb, var(--neba-info-accent) 10%, transparent);
   --neba-info-soft-hover: color-mix(in srgb, var(--neba-info-accent) 17%, transparent);
@@ -2373,6 +2453,86 @@
   box-shadow: none;
 }
 
+/* The frame the tile arrives in. The light's own opacity transition would
+   otherwise fade the stand-in out under the tile as a bloom. */
+.neba-segmented[data-settling] .neba-segment::before {
+  transition: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * A tab bar before its indicator is placed
+ *
+ * The pill or bar under the chosen tab is Base UI's indicator, and Base UI
+ * keeps it `hidden` until it has measured the chosen tab, which only happens
+ * once the page is running. A server-rendered `solid` bar therefore had no
+ * pill under the chosen tab until hydration, and the other two had no line.
+ * Until the indicator is shown, the chosen tab draws the same thing itself,
+ * and hands it over in the frame the indicator appears: both follow the one
+ * `hidden` attribute, so there is no frame with two and no frame with none.
+ *
+ * On `::after` rather than the tab's own background, which has a transition
+ * and would fade out over the indicator. `::after` is the tab's afterglow,
+ * which a tab leaves transparent, so the fade it goes back to shows nothing.
+ * `:has()` is past the browser floor in Firefox 113 to 120, where the whole
+ * rule is dropped and the tab is told apart by its colour until hydration, as
+ * it was before.
+ * ------------------------------------------------------------------------- */
+
+.neba-tabs-list:has(> .neba-tabs-indicator[hidden]) > [data-active]::after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 1;
+  transition: none;
+}
+
+/* `solid`: the tile, the same sheet as the indicator's. */
+.neba-tabs-list[data-indicator='tile']:has(> .neba-tabs-indicator[hidden]) > [data-active]::after {
+  inset: 0;
+  border-radius: inherit;
+  background: var(--n-panel-press);
+  background-image: var(--neba-grain), var(--neba-sheen);
+  background-blend-mode: overlay, normal;
+  box-shadow: var(--neba-shadow-1), var(--neba-plate-glass);
+  backdrop-filter: var(--neba-blur);
+}
+
+/* `outline` and `text`: a 2px line on the edge the bar runs along. */
+.neba-tabs-list[data-indicator='bar']:has(> .neba-tabs-indicator[hidden]) > [data-active]::after {
+  inset: auto 0 0;
+  height: 2px;
+  border-radius: 9999px;
+  background: var(--n-accent);
+}
+
+.neba-tabs-list[data-indicator='bar'][data-orientation='vertical']:has(
+    > .neba-tabs-indicator[hidden]
+  )
+  > [data-active]::after {
+  inset-block: 0;
+  inset-inline: auto 0;
+  width: 2px;
+  height: auto;
+}
+
+/* A bar that wraps: the line is the tab's own bottom edge, or its end edge. */
+.neba-tabs-list[data-indicator='underline']:has(> .neba-tabs-indicator[hidden])
+  > [data-active]::after {
+  inset: 0;
+  border-radius: 9999px;
+  border-bottom: 2px solid var(--n-accent);
+  background: transparent;
+}
+
+.neba-tabs-list[data-indicator='underline'][data-orientation='vertical']:has(
+    > .neba-tabs-indicator[hidden]
+  )
+  > [data-active]::after {
+  border-bottom: 0;
+  border-inline-end: 2px solid var(--n-accent);
+}
+
 /* ---------------------------------------------------------------------------
  * Tree guides
  *
@@ -2648,20 +2808,28 @@
  *
  * `currentColor` rather than a token, because a bubble's ink is white on
  * `solid` and the page's own on the other two.
+ *
+ * The colour changes through `opacity` on a solid dot rather than through the
+ * dot's `background-color`. A dot has nothing inside it, so the two draw the
+ * same pixels at every frame — `currentColor` at 28% is `currentColor` at an
+ * alpha of 0.28 — but a background is repainted on the main thread every frame
+ * for as long as somebody is typing, and an opacity is handed to the
+ * compositor.
  */
 @keyframes neba-typing {
   0%,
   60%,
   100% {
-    background-color: color-mix(in oklab, currentColor 28%, transparent);
+    opacity: 0.28;
   }
   30% {
-    background-color: currentColor;
+    opacity: 1;
   }
 }
 
 .neba-typing-dot {
-  background-color: color-mix(in oklab, currentColor 28%, transparent);
+  background-color: currentColor;
+  opacity: 0.28;
   animation: neba-typing 1.25s var(--neba-ease) infinite;
   animation-delay: calc(var(--n-i, 0) * 160ms);
 }
@@ -2698,6 +2866,26 @@
   animation: neba-skeleton-sweep 1.5s var(--neba-ease) infinite;
 }
 
+/* Off screen, a sweep holds still. `Skeleton` marks its root once it has
+   scrolled out of view, which is also the root of a stack of lines. */
+[data-offscreen].neba-skeleton::after,
+[data-offscreen] .neba-skeleton::after {
+  animation-play-state: paused;
+}
+
+/* Where a reader asked for reduced transparency the panel colours are laid on
+   the page's surface, which in the dark theme is darker than the wash a
+   placeholder is drawn in, so the highlight crossed it as a shadow. Screened,
+   it can only ever lighten what it passes over: white over a light placeholder
+   is white as before, and the dark theme's lifts it as its nine per cent of
+   white used to. The pulse that stands in for the sweep under reduced motion
+   is the same layer and is screened with it. */
+@media (prefers-reduced-transparency: reduce) {
+  .neba-skeleton::after {
+    mix-blend-mode: screen;
+  }
+}
+
 /*
  * Under RTL the start edge is on the right, so both sweeps travel leftwards.
  *
@@ -2726,14 +2914,16 @@
 
 /* The reduced-motion stand-in: the highlight stops travelling and the whole
    placeholder breathes instead. Colour, which is the axis every other state in
-   the library already uses. */
+   the library already uses — drawn as the opacity of a layer that is already
+   that colour, which is the same pixels as a background fading in from
+   transparent, without a repaint on every frame of a loading page. */
 @keyframes neba-skeleton-pulse {
   0%,
   100% {
-    background-color: transparent;
+    opacity: 0;
   }
   50% {
-    background-color: var(--n-panel-press);
+    opacity: 1;
   }
 }
 
@@ -2889,6 +3079,69 @@
   animation-name: neba-anim-rotate;
 }
 
+/*
+ * An entrance waiting to be scrolled into view, drawn where the layout put it.
+ *
+ * Its first frame is somewhere else — a slide a full width to one side, a zoom
+ * shrunk to the middle of a box taller than the screen — and the observer that
+ * decides when it starts measures the box as drawn. A full-width slide moved a
+ * full width sideways, or one moved out of a box with `overflow: hidden`, was
+ * never on the screen at all and never started. So the move is taken away until
+ * it starts, and the observer measures the box the reader is scrolling
+ * towards. A first frame that fades is unseen there anyway. One that does not
+ * fade, marked `shown`, is hidden in place as well, or it would jump to its
+ * first frame as it started — but only where the page is going to wait for a
+ * script, so with less motion asked for, with scripting off, and in a browser
+ * that cannot say, it is drawn as it was. An opacity rather than `visibility`,
+ * so what is inside can still take the focus, and focusing it scrolls it into
+ * view. `!important` because an animation's held frame outranks every ordinary
+ * declaration.
+ */
+.neba-anim-slide[data-waiting=''] {
+  translate: none !important;
+}
+
+.neba-anim-scale[data-waiting=''] {
+  scale: none !important;
+}
+
+.neba-anim-rotate[data-waiting=''] {
+  rotate: none !important;
+}
+
+@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
+  .neba-anim[data-waiting='shown'] {
+    opacity: 0 !important;
+  }
+
+  .neba-anim-slide[data-waiting='shown'] {
+    translate: none !important;
+  }
+
+  .neba-anim-scale[data-waiting='shown'] {
+    scale: none !important;
+  }
+
+  .neba-anim-rotate[data-waiting='shown'] {
+    rotate: none !important;
+  }
+}
+
+/*
+ * With scripting off, nothing will ever let a waiting effect go, so it is not
+ * held at all. An entrance waiting for `visible`, `hover` or `manual` sat on an
+ * invisible first frame for good; it is drawn as it ends instead, which is what
+ * the reduced-motion block below does for the same element. A browser that
+ * does not know `scripting` skips the block, and only a reader with scripting
+ * off could tell.
+ */
+@media (scripting: none) {
+  .neba-anim[data-state='paused'],
+  [data-state='paused'] .neba-anim {
+    animation: none;
+  }
+}
+
 /* Symmetric on purpose: a blink that ended anywhere but where it started would
    leave the element half drawn whenever the count ran out. */
 @keyframes neba-anim-blink {
@@ -2992,24 +3245,28 @@
 /*
  * Lighting: a light travelling around the outside of something.
  *
- * The arc is a conic gradient and what moves is its `from` angle, which is only
- * animatable because the angle is a registered custom property with a type. The
- * alternative — rotating the pseudo-element itself — swings its corners out
- * past the element on every quarter turn.
+ * The arc is a conic gradient on a square, and what moves is the square, on
+ * `rotate`. The ring around it holds it: a box the size of the element plus the
+ * spread, with the element's corners, clipping the square to itself and
+ * blurring what is left. A rotation is the one way to move the light that the
+ * compositor runs without the page — the arc used to travel on the gradient's
+ * `from` angle, a registered custom property, which restyled and repainted a
+ * blurred gradient on the main thread on every frame for as long as the light
+ * was on. Rotating a box the element's own shape instead swings its corners out
+ * past the element on every quarter turn, which is what the ring is for. The
+ * square is as wide as the ring is wide and tall together, which covers the
+ * ring at every angle, and is measured in the ring's own container units.
  *
  * `z-index: -1` inside an isolated stacking context puts the glow behind the
  * content but still inside the component, so it reads as light escaping from
  * under a sheet rather than as a border drawn around one.
  */
-@property --neba-glow-angle {
-  syntax: '<angle>';
-  initial-value: 0deg;
-  inherits: false;
-}
-
 @keyframes neba-anim-lighting {
+  from {
+    rotate: 0deg;
+  }
   to {
-    --neba-glow-angle: 360deg;
+    rotate: 360deg;
   }
 }
 
@@ -3018,20 +3275,30 @@
   isolation: isolate;
 }
 
-.neba-anim-lighting::before {
-  content: '';
+.neba-lighting-ring {
   position: absolute;
   z-index: -1;
   inset: calc(-1 * var(--n-anim-glow-width, 3px));
+  overflow: hidden;
   border-radius: inherit;
+  filter: blur(var(--n-anim-glow-blur, 4px));
+  container-type: size;
+  pointer-events: none;
+}
+
+.neba-lighting-beam {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(100cqw + 100cqh);
+  height: calc(100cqw + 100cqh);
+  translate: -50% -50%;
   background: conic-gradient(
-    from var(--neba-glow-angle),
     transparent 0deg,
     var(--n-anim-glow, var(--n-accent)) var(--n-anim-glow-arc, 50deg),
     transparent calc(var(--n-anim-glow-arc, 50deg) * 2),
     transparent 360deg
   );
-  filter: blur(var(--n-anim-glow-blur, 4px));
   animation-name: neba-anim-lighting;
   animation-duration: var(--n-anim-duration, 3s);
   animation-delay: var(--n-anim-delay, 0ms);
@@ -3180,6 +3447,38 @@
   animation: neba-anim-caret 1s step-end infinite;
 }
 
+/*
+ * The text effects without their motion: AnimateTyping, AnimateScramble and
+ * AnimateCounter.
+ *
+ * Each lays out its final text from the first frame, unseen, under the copy
+ * that moves. A reader who has asked for less motion is shown the final text,
+ * but by the script, which is not there in the server's HTML or until the page
+ * hydrates: until then the line was empty, noise, or the `from` number. With
+ * scripting off it stayed that way. So the stylesheet answers both cases, by
+ * drawing the final layer and not the moving one — which is also what the
+ * script draws once it runs, so nothing moves when it does. The moving layer
+ * and a counter's `from` are taken out of the layout as well as out of sight:
+ * the script lets `from` go once the answer is drawn, and a box still as wide
+ * as `1,000` around a `5` closed up the moment it did. A browser that does not
+ * know `scripting` keeps the reduced-motion half.
+ */
+@media (prefers-reduced-motion: reduce), (scripting: none) {
+  [data-neba-animation] .neba-text-final,
+  [data-neba-animation] .neba-text-noise {
+    visibility: visible;
+  }
+
+  [data-neba-animation] .neba-text-moving,
+  [data-neba-animation] .neba-text-final ~ [data-sample] {
+    display: none;
+  }
+
+  [data-neba-animation] .neba-text-noise::after {
+    content: none;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Text arriving from somewhere else
  *
@@ -3201,8 +3500,12 @@
   }
 }
 
+/* `backwards` rather than `both`: the keyframe ends on the word's own opacity,
+   so holding its last frame draws nothing, and a word whose fade is over is
+   then an element with no animation on it rather than one still holding a
+   finished one, which the browser keeps in its list of effects to restyle. */
 .neba-stream-word {
-  animation: neba-stream-word-in var(--neba-duration) var(--neba-ease) both;
+  animation: neba-stream-word-in var(--neba-duration) var(--neba-ease) backwards;
 }
 
 /* The block at the end of a stream. The same caret an `AnimateTyping` draws,
@@ -3269,6 +3572,7 @@
     inset-inline-start: 0;
     inline-size: 100%;
     background-image: none;
+    background-color: var(--n-panel-press);
     animation: neba-skeleton-pulse 2.4s var(--neba-ease) infinite;
   }
 
@@ -3319,9 +3623,12 @@
 
   /* The arc stops travelling and becomes an even glow. The same trade the
      skeleton makes: the decoration survives, the motion does not. */
-  .neba-anim-lighting::before {
+  .neba-lighting-ring {
     background: var(--n-anim-glow, var(--n-accent));
-    animation: none;
+  }
+
+  .neba-lighting-beam {
+    display: none;
   }
 
   /* A marquee that cannot move is a row of content, so it is drawn as one: