@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/paper.css

@@ -1,187 +0,0 @@
-/*
- * paper.css — Paper-texture primitives (BG.W-PAPER-TEXTURE-UNIFY — ONE warm
- * raster tooth PRIMARY; feTurbulence RETIRED as the primary, DEMOTED to an
- * `@supports`-gated relief enhancement).
- *
- * Two composable Tailwind `@utility` declarations:
- *   - paper-underpaint: fixed, app-root, fullscreen tooth texture at z-index -1
- *   - paper-grain-overlay: ::after tooth overlay for individual surfaces
- *
- * THE HISTORY the design is immune to (KS-PAPER §1.1): the paper register was
- * built three times on procedural SVG noise; the user rejected the SVG-noise
- * path TWICE ("disgusting metallic"). The class recurred a third time (D-2): the
- * grey `saturate=0` tooth borrowed ALL its warmth from the substrate, so once
- * the universal warm plane was retired, multiply desaturated surfaces below the
- * C 0.02 warm floor and the tooth read metallic-gray. Two structural causes: (a)
- * `feDiffuseLighting` computes normals from a noise bump-map → an anisotropic
- * brushed-metal sheen ("specular IS the metal"); (b) grey-at-source warmth was
- * borrowed, never baked.
- *
- * THE FIX — warmth BAKED AT SOURCE, no lighting primitive (KS-PAPER §3.Q1):
- * `--paper-grain-tooth` is now a WARM RASTER tooth — a deterministic, engine-
- * invariant, warm-ecru fiber weave composed from crossed `repeating-linear-
- * gradient` fibers (two fine crossed bands at incommensurate periods + one
- * coarse raking band; every stop a warm-ecru/umber `oklch()`, mean C ≈ 0.045,
- * 2-3× the 0.020 warm floor). It reads warm over ANY substrate — bare, dark, or
- * washed — the D-2 substrate-warmth dependency SEVERED. It has NO lighting
- * primitive, NO normals, NO specular term: a warm raster cannot read metallic
- * (KS-PAPER R2). All periods divide the 140px tile evenly → seamless repeat.
- *
- * THE DEMOTED feTurbulence — `--paper-grain-relief` (default `none`): the
- * procedural noise survives ONLY as a capability-gated ENHANCEMENT, layered
- * ABOVE the raster in the same `background-image` stack, NEVER load-bearing. It
- * is a WARM-DUOTONE feTurbulence (the grey noise mapped umber→ecru through an
- * `feComponentTransfer` `table` ramp) with NO `feDiffuseLighting`/lighting term
- * (the metallic primitive is retired) at a partial layer alpha — a subtle warm
- * fiber grain, never the sheen. sRGB-pinned, deterministic seed. Gated behind
- * `@supports (backdrop-filter: blur(1px))` (the library's capable-engine probe)
- * so a lean engine paints the always-warm raster alone.
- *
- * THE BLEND LAW (UNTOUCHED — the physically-true move): `multiply` (light — ink
- * sinks into the paper's pits → darken) / `screen` (dark — fiber catches light →
- * lighten). Baseline, sRGB-safe, identical both engines. Plain per-mode arms.
- * The always-present `background-image` longhand + opacity-only engage discipline
- * (design-idioms §12 anti-pop) survives the swap: opacity is the only engaged
- * channel; the image is never `none → image`.
- *
- * THE LIBRARY FENCE: `--glass-grain-opacity` (0.025/0.045) is BYTE-UNTOUCHED —
- * the calm glass whisper stands; paper is warm material, glass is a whisper. That
- * separation IS the design (the register fence, KS-PAPER §3.Q3).
- */
-
-/* The ONE warm-ecru raster tooth — DRY single source, both utilities resolve it.
-   Deterministic, engine-invariant (no procedural noise), warm at SOURCE (every
-   stop a warm-ecru/umber oklch, C ≥ 0.02); the mix-blend-mode carries the
-   darken/lighten. All three fiber periods (2.8px / 3.5px / 7px) divide the 140px
-   tile → seamless repeat; the two fine bands run incommensurate (LCM 14px) so the
-   weave reads organic, not a clean grid. */
-:root {
-    --paper-grain-tooth:
-        repeating-linear-gradient(
-            28deg,
-            oklch(0.9 0.045 84 / 0.5) 0,
-            oklch(0.62 0.052 60 / 0.5) 1.4px,
-            oklch(0.9 0.045 84 / 0.5) 2.8px
-        ),
-        repeating-linear-gradient(
-            -64deg,
-            oklch(0.88 0.04 82 / 0.38) 0,
-            oklch(0.6 0.05 58 / 0.38) 1.75px,
-            oklch(0.88 0.04 82 / 0.38) 3.5px
-        ),
-        repeating-linear-gradient(
-            10deg,
-            oklch(0.85 0.05 78 / 0.28) 0,
-            oklch(0.7 0.055 66 / 0.28) 3.5px,
-            oklch(0.85 0.05 78 / 0.28) 7px
-        );
-    --paper-grain-tile: 140px;
-    /* The demoted feTurbulence relief is DROPPED by default — the everywhere
-       floor is the warm raster ALONE (KS-PAPER §3.Q1: the enhancement is never
-       load-bearing; DROP unless a capable engine warrants it). */
-    --paper-grain-relief: none;
-}
-
-/* feTurbulence DEMOTED — the warm-duotone fine-grain relief, gated behind the
-   library's capable-engine probe (`backdrop-filter`) and layered ABOVE the
-   raster. NO `feDiffuseLighting`/lighting term (the metallic primitive is
-   retired): the grey fractalNoise is mapped umber→ecru through an
-   `feComponentTransfer` `table` ramp and painted at a PARTIAL layer alpha, so it
-   reads as a subtle warm fiber grain over the raster, never a brushed-metal
-   sheen. sRGB-pinned, deterministic seed. On a lean engine the block is skipped
-   and the always-warm raster paints alone. */
-@supports (backdrop-filter: blur(1px)) {
-    :root {
-        --paper-grain-relief: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.31 0.96'/%3E%3CfeFuncG type='table' tableValues='0.25 0.9'/%3E%3CfeFuncB type='table' tableValues='0.15 0.78'/%3E%3CfeFuncA type='linear' slope='0.42' intercept='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
-    }
-}
-
-@utility paper-underpaint {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    pointer-events: none;
-    /* Two ALWAYS-PRESENT layers: the demoted relief (default `none` — paints
-       nothing) ABOVE the warm raster tooth. The layer count is stable (anti-pop);
-       on a lean engine `--paper-grain-relief` stays `none` so only the raster
-       paints, byte-identical in effect to a single-layer raster. A single
-       background-size applies to both layers. */
-    background-image: var(--paper-grain-relief), var(--paper-grain-tooth);
-    background-repeat: repeat;
-    background-size: var(--paper-grain-tile) var(--paper-grain-tile);
-    opacity: var(--paper-grain-opacity, var(--glass-grain-opacity));
-    /* LIGHT: ink sinks into the cream → multiply darkens the valleys. */
-    mix-blend-mode: multiply;
-}
-
-:where(.dark) .paper-underpaint,
-.dark .paper-underpaint {
-    /* DARK: fiber catches light off the ink → screen lifts (NOT soft-light, which
-       collapses to identity on the near-black pole — the self-cancelling defect). */
-    mix-blend-mode: screen;
-}
-
-@utility paper-grain-overlay {
-    position: relative;
-    isolation: isolate;
-
-    &::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        /* The relief (default `none`) ABOVE the warm raster tooth — two
-           always-present layers, the anti-pop discipline (opacity is the only
-           engaged channel; the image is never `none → image`). */
-        background-image: var(--paper-grain-relief), var(--paper-grain-tooth);
-        background-repeat: repeat;
-        background-size: var(--paper-grain-tile) var(--paper-grain-tile);
-        opacity: var(--paper-grain-opacity, var(--glass-grain-opacity));
-        /* LIGHT tooth: multiply — the physically-true ink-into-pits darken (NOT
-           overlay, which is identity on the L≈0.98 cream pole). */
-        mix-blend-mode: multiply;
-    }
-}
-
-:where(.dark) .paper-grain-overlay::after,
-.dark .paper-grain-overlay::after {
-    /* DARK tooth: screen — fiber catches light off the ink (NOT soft-light). */
-    mix-blend-mode: screen;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   BG.W-FIELD-AURORA — the WARM COLORFUL FIELD register is RETIRED here.
-   ───────────────────────────────────────────────────────────────────────
-   The `.paper-field` CSS plane (the per-route four-layer technicolor CEL +
-   base wash + cel-drift) is SUPERSEDED by the ONE shell `<Aurora>` (a
-   recessive vividness:0 painterly field) mounted in AppShell.vue behind every
-   NON-focal route. The grain register (`.paper-underpaint` /
-   `.paper-grain-overlay::after`) below is the SURVIVOR — a clean break, no
-   alias (`.paper-field`, its `.dark` arm, the `::before` cel-drift, the
-   `@keyframes field-cel-drift`, and the `--field-h-raw`/`--field-intensity`
-   @property regs are all DELETED). `proof:no-paper-field` asserts the recipe
-   ABSENT and the grain register PRESENT.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-/* ═══════════════════════════════════════════════
-   A11y — respect user motion + transparency preferences
-   ═══════════════════════════════════════════════ */
-@media (prefers-reduced-transparency: reduce) {
-    /* The grain drops to 0-alpha under reduced transparency — it is a
-       transmissive enhancement, NEVER a legibility dependency. (The retired
-       `.paper-field` PRT line that shared this block is gone; the grain
-       register is the survivor.) */
-    .paper-underpaint,
-    .paper-grain-overlay::after {
-        opacity: 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .paper-underpaint {
-        /* Static noise is fine at rest; only kill animated grain shimmer if any.
-           The underpaint is currently a still texture, but guard future motion. */
-        animation: none !important;
-    }
-}

package/src/styles/scroll-choreography.css

@@ -1,294 +0,0 @@
-/*
- * scroll-choreography.css — the SOTA scroll-driven CHOREOGRAPHY register
- * (BB.W-SCROLL-MOTION).
- *
- * Cascade rung AFTER scroll-driven.css. glass-ui owns the native scroll-driven
- * SUBSTRATE (scroll-driven.css `scroll()`/`view()` + the `--demo-main-progress`
- * named timeline + the `supportsCssTimeline` harden) but composes none of the
- * CHOREOGRAPHY — the page-load BUILD, the section CASCADE, the scroll-PINNED
- * fixed-stage-advances-time reveals + the smooth-scroll register. The award-winners
- * hand-roll these on Lenis+GSAP (a 20-40KB JS dependency); glass-ui ships the
- * NATIVE register — the platform now ships `scroll()`/`view()`/`timeline-scope`
- * natively, off the compositor at 60fps (the no-net-dep fence; the 2026
- * universal-support convergence). NO Lenis/GSAP/Locomotive dependency, ever.
- *
- *   .scroll-build   — RETIRED (BG.W-ROUTE-TRANSITION). The route-enter page-build
- *                     is now the bare keyed `<component class="route-enter">` on-mount
- *                     `@keyframes gl-route-enter` (transitions.css), not a per-child
- *                     `.scroll-build` stagger.
- *   .scroll-cascade — the orchestrated section cascade (per-child view() timeline,
- *                     the implicit stagger [NO setTimeout], the spring-clocked
- *                     coupled transform+opacity build).
- *   .scroll-pin     — the fixed-stage-advances-time scroll-pinned register
- *                     (position: sticky stage; the stage's internal phases advance
- *                     against a spring-damped `--pin-t` the keyframes.js scroll spine
- *                     `useScrollPin` writes per scroll tick — EVERY engine, no
- *                     `animation-timeline`. The dead `--gl-pin` named scroll-timeline
- *                     is EXCISED — BD.W-SCROLL-LIQUID-ENGINE).
- *   .smooth-scroll  — the native scroll-behavior: smooth opt-in (PRM-gated,
- *                     zero runtime — a smooth-scroll under reduce is a vestibular
- *                     concern, so the smooth interpolation is dropped under PRM).
- *
- * THE DISCIPLINE (mirrors scroll-driven.css EXACTLY — the exemplary outer-gate):
- * the whole register sits under `@media (prefers-reduced-motion: no-preference)`
- * so under PRM no scroll/build animation attaches at all and content renders in
- * its terminal state (the `from` keyframe never applies because the animation
- * never binds; the .scroll-pin stage shows its terminal phase, no sweep). The
- * `view()`-cascade recipe sits under a second `@supports (animation-timeline: …)`
- * gate so a non-supporting engine gets the STATIC cascade layout. The .scroll-pin
- * register needs NO `@supports` gate — its `--pin-t` is JS-written by `useScrollPin`
- * on every engine; under PRM the composable zeroes the scrub (1:1, no drift).
- *
- * COMPOSITOR-ONLY (the proof:no-layout-animation floor BB.W-CARD-COMPOSITE): every
- * @keyframes step + transition animates ONLY transform/translate/scale/opacity/
- * clip-path — NEVER a layout-triggering property (no height/padding/inline-size/
- * top/grid-template). The SPATIAL (transform) legs ride the per-spring `--spring-*`
- * + the matching `--spring-*-duration` settle clock (P2/P4); the EFFECTS (opacity)
- * legs ride the no-overshoot `--ease-out` bezier (P1/P3 — a fade must never
- * overshoot). The spring tokens are READ-ONLY (the W-GLASS-CAL clock fence — this
- * register THREADS them, it never re-tunes a spring value or a duration).
- */
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * BD.W-SCROLL-LIQUID-ENGINE — the liquid-weight scroll tokens.
- *
- * The `--ease-scroll-spring` is the compositor spring-scrub the cascade rides
- * (ZERO JS). The pin-phase fractions are the calc-friendly window bounds the
- * `--pin-t` recipes read (a NUMBER, not the `%` the dead `animation-range` used).
- * All golden-proportioned (1/φ family). The liquid-weight scrub itself is a JS-side
- * param of `useScrollScene`/`useScrollPin` (the φ-derived defaults live in the
- * composables, PRM → 0 inside them). The cartoon-punch deps
- * (`--motion-weight`/`--ease-cartoon-punch`/`--shadow-cartoon-md`) SHIP today and are
- * consumed via `var(…, fallback)` so the recipes stay GREEN. */
-:root {
-    /* The spring-shaped compositor cascade ease — the `--spring-gentle` twin
-       (ζ ≈ 0.85, a `springLinearStops` `linear()` stop-set), which SHIPS
-       unconditionally (scheme-motion.css). The Safari < 17.2 `--ease-out` degrade
-       arm was COLLAPSED at BG.NF.2 W-LEGACY-LADDER-COLLAPSE — both targets parse
-       `linear()`, so the spring twin is the sole source. */
-    --ease-scroll-spring: var(--spring-gentle);
-    /* The pin reveal/expand windows as 0..1 fractions (the `--pin-t` recipes read
-       a NUMBER for the calc, not the `%` the dead timeline used). 1/φ² + 0.9. */
-    --scroll-pin-phase-reveal-end-frac: 0.382;
-    --scroll-pin-phase-expand-end-frac: 0.9;
-    /* The volume-preserving squash depth — 1 − 1/φ⁴. */
-    --scroll-pin-squash-floor: 0.944;
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-build — RETIRED (BG.W-ROUTE-TRANSITION).
- *
- * The route-enter page-build is no longer a per-child staggered `.scroll-build`
- * recipe. Under the bare keyed `<component :is :key="route.path" class="route-enter">`
- * atomic swap, the page entrance is ONE on-mount `@keyframes gl-route-enter` on the
- * keyed component (transitions.css `.route-enter`) — it reaches EVERY route root
- * (StoryPage/SectionLanding/hero/intro/auth-shell/NotFound) without a per-beat
- * `--i` stagger and without the `<Transition>` leave-window the old build raced.
- * The `gl-page-build`/`gl-page-build-fade` keyframes + the `--scroll-build-rise`/
- * `--scroll-build-step` tokens are deleted with it (clean break, no alias). The
- * `.scroll-cascade`/`.scroll-pin`/`.smooth-scroll` registers below are UNTOUCHED —
- * they are scroll-driven, not the mount-driven page entrance.
- * ─────────────────────────────────────────────────────────────────────────── */
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-cascade — the orchestrated section cascade.
- *
- * Extends the bare `[data-scroll-reveal] > *` 6px fade into the SOTA coordinated
- * build: the per-child `view()` timeline stays the implicit-stagger mechanism (each
- * child owns its own timeline — NO setTimeout cascade), but the entrance is the
- * spring-clocked coupled build (a deeper rise + a tighter reveal window). It sits
- * under the PRM no-preference gate + the `@supports (animation-timeline: view())`
- * gate (the scroll-driven.css discipline) — under PRM/non-support the sections
- * render at their terminal state.
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    @supports ((animation-timeline: view()) and (animation-range: entry)) {
-        @keyframes gl-cascade-build {
-            from {
-                /* EFFECTS leg — the coupled fade (no overshoot). */
-                opacity: 0;
-                /* SPATIAL leg — the build rise (a transform, compositor-only). */
-                transform: translateY(var(--scroll-cascade-rise, 1.25rem));
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .scroll-cascade > * {
-            /* The view()-timeline drives the build off each child's OWN entry into
-               the viewport (the implicit stagger). The progress-bound timeline maps
-               the entrance across the `animation-range` window; the keyframe's
-               coupled transform+opacity build is the orchestrated cascade (vs the
-               bare 6px reveal). `linear` is the right easing for a SCROLL-bound
-               progress map (the spring shaping lives in the section's own settle
-               where the build is mount-driven; a scroll-bound timeline reads
-               1:1 with scroll position — a spring on a scrubbed timeline reads as
-               a scrubbed spring, which is correct here as the linear progress map).
-
-               BD.W-SCROLL-LIQUID-ENGINE: the easing is the spring-shaped
-               `--ease-scroll-spring` (a `springLinearStops` `linear()` twin of
-               `--spring-gentle`, ζ ≈ 0.85) — each card's scroll-scrubbed entrance
-               reads with spring WEIGHT (a hair of overshoot at the end of its
-               range), ZERO JS (the platform carries it on the compositor). The
-               Safari-degrade-to-cel-slam arm lives in the entrance-reveal scope. */
-            animation: gl-cascade-build auto var(--ease-scroll-spring, linear) both;
-            animation-timeline: view(block);
-            animation-range: entry 0% entry var(--scroll-cascade-range-end, 45%);
-        }
-
-        /* The horizontal-scroller variant — a `view(inline)` axis. */
-        .scroll-cascade.scroll-cascade--inline > * {
-            animation-timeline: view(inline);
-        }
-
-        /* The OPT-IN column-stagger variant (the Codrops nuance — even columns
-           from top, odd from below). A GRID-surface flourish, NOT the default (the
-           proportion fence: a uniform vertical cascade is the calm StoryPage
-           default; the column-stagger is the front-door grid showcase). A consumer
-           sets `--col` (the column index) per child; even/odd rise from opposite
-           directions, offset by `--scroll-cascade-column-stagger`. */
-        @keyframes gl-cascade-build-col-even {
-            from {
-                opacity: 0;
-                transform: translateY(calc(-1 * var(--scroll-cascade-rise, 1.25rem)));
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        /* BG.W-SCROLL-SHRINK-UNIFY (D14) — the per-column stagger. The stagger is a
-           range PERCENTAGE (view()-timeline units), NOT a time: the prior
-           `--scroll-cascade-column-stagger` default was `60ms`, so
-           `calc(45% + 60ms * 0)` mixed `%` with `ms` (an INVALID calc — the whole
-           animation-range was dropped) AND multiplied by a literal `0` (every column
-           read the SAME range end, zero stagger). Now the offset is a `%` scaled by the
-           consumer-set `--col` index, so column N ends its build `N × stagger` later —
-           the even/odd column cascade the Codrops nuance intends. */
-        .scroll-cascade.scroll-cascade--columns > * {
-            animation-range: entry 0%
-                entry
-                calc(
-                    var(--scroll-cascade-range-end, 45%) +
-                        var(--scroll-cascade-column-stagger, 6%) * var(--col, 0)
-                );
-        }
-        .scroll-cascade.scroll-cascade--columns > *:nth-child(even) {
-            animation-name: gl-cascade-build-col-even;
-        }
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-pin — the fixed-stage-advances-time scroll-pinned register, RE-INVENTED
- * on a JS-written `--pin-t` (BD.W-SCROLL-LIQUID-ENGINE).
- *
- * THE DEFECT (excised, no alias): the prior register bound the phase reveals to a
- * named `scroll-timeline: --gl-pin` declared on `.scroll-pin` + `timeline-scope:
- * --gl-pin`. A named scroll-timeline measures the DECLARING element's OWN scroll
- * progress — but `.scroll-pin` is `overflow: visible` with zero internal scroll
- * extent, so it is NOT a scroll port: `--gl-pin`'s `currentTime` was permanently
- * `null` and the bound `gl-pin-reveal` animation parked at its `from` keyframe
- * forever (dead on EVERY engine, including those that fully support the native
- * feature — structural deadness, not a Safari degrade).
- *
- * THE FIX (every engine, no `animation-timeline`, no `@supports` gate): the stage
- * is plain `position: sticky` + `contain: layout paint` (bounded recalc); the
- * phases read a SPRING-DAMPED `--pin-t ∈ [0, 1]` that `useScrollPin` (the
- * keyframes.js scroll spine — `SpringProgress` over the ONE `createScrollReader`)
- * writes off the REAL scroll port per coalesced tick. The reveal arrives with
- * inertia, overshoots (ζ ≈ 0.85), then settles — the cartoon-slam felt register.
- * Works on Safari 15+ with no timeline primitive.
- *
- * Liquid weight is the DEFAULT here (the §L4 no-stiff-snap law): `useScrollPin`'s
- * `SpringProgress` keeps converging AFTER the finger lifts. PRM zeroes the scrub
- * (the pin scrub → 0 under reduce inside the composable) so `--pin-t` tracks
- * scroll 1:1 with no interpolated drift — the vestibular floor.
- * ─────────────────────────────────────────────────────────────────────────── */
-
-/* The typed pin progress register — `inherits: true` so the sticky stage + the
-   phase children read the `--pin-t` written on the `.scroll-pin` container; a typed
-   `@property` makes the calc cheaper + lets an optional native cosmetic-parallax leg
-   composite it. Registered OUTSIDE the PRM gate (a custom property is inert — it only
-   drives motion through the recipes below, which ARE PRM-gated). */
-@property --pin-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-.scroll-pin {
-    position: relative;
-    block-size: var(--scroll-pin-stage-height, 320vh);
-}
-
-.scroll-pin-stage {
-    position: sticky;
-    inset-block-start: 0;
-    /* Bounded main-thread recalc — the `--pin-t` write is a style recalc on this
-       isolated subtree, NOT a reflow (translate/scale/opacity don't reflow). */
-    contain: layout paint;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    /* Phase 1 — the reveal. Reads `--pin-t` mapped across the reveal window
-       (0 .. --scroll-pin-phase-reveal-end-frac). The lift + squash ride the
-       compositor longhands (`translate`/`scale` — NEVER the `transform` shorthand,
-       which would fold a centering translate; the longhands stack independently).
-       The squash floor is volume-preserving (a hair of squash on entry). */
-    .scroll-pin-stage .scroll-pin-phase-reveal {
-        --t: clamp(
-            0,
-            calc(var(--pin-t, 0) / var(--scroll-pin-phase-reveal-end-frac, 0.382)),
-            1
-        );
-        opacity: var(--t);
-        translate: 0 calc((1 - var(--t)) * var(--scroll-pin-lift, 2.5rem));
-        scale: calc(
-            var(--scroll-pin-squash-floor, 0.944) +
-                (1 - var(--scroll-pin-squash-floor, 0.944)) * var(--t)
-        );
-        /* will-change scoped to the active phase — added while the pin is in range,
-           never the full 320vh lifetime (the audit's transient-promotion rule). */
-        will-change: transform, opacity;
-    }
-
-    /* Phase 2 — the settle/drift. Reads the reveal-end..expand-end window of
-       `--pin-t`; a gentle compositor drift as the reader continues past, never a
-       layout move. */
-    .scroll-pin-stage .scroll-pin-phase-settle {
-        --t: clamp(
-            0,
-            calc(
-                (var(--pin-t, 0) - var(--scroll-pin-phase-reveal-end-frac, 0.382)) /
-                    (
-                        var(--scroll-pin-phase-expand-end-frac, 0.9) -
-                            var(--scroll-pin-phase-reveal-end-frac, 0.382)
-                    )
-            ),
-            1
-        );
-        opacity: 1;
-        translate: 0 calc(var(--t) * -1 * var(--scroll-pin-lift, 2.5rem));
-        scale: calc(1 + 0.02 * var(--t));
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .smooth-scroll — the native smooth-scroll opt-in.
- *
- * The native `scroll-behavior: smooth` (CSS-first, zero runtime — NOT a JS rAF
- * momentum loop, which IS Lenis and is the fence). An OPT-IN class the scroller
- * (`<main>`, a `.scroll-pin` container) applies. PRM-GATED: under
- * `prefers-reduced-motion: reduce` the smooth interpolation is DROPPED and the
- * jump-scroll is correct (a smooth-scroll over an anchor-jump is a vestibular
- * concern). A consumer wanting Lenis-grade momentum brings it in THEIR app (the
- * presets-in-consumers discipline); the library ships the native register.
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    .smooth-scroll {
-        scroll-behavior: smooth;
-    }
-}

package/src/styles/scroll-chrome.css

@@ -1,123 +0,0 @@
-/*
- * scroll-chrome.css — the scroll-driven floating-CHROME collapse recipe
- * (BC.W-SCROLL-CHROME).
- *
- * Cascade rung AFTER scroll-choreography.css. Where scroll-choreography.css is the
- * ENTRANCE register (the page-build / section-cascade / scroll-pinned reveals), this is
- * the COLLAPSE-STATE recipe a floating chrome bar (a dock, a header) composes: scroll
- * down and it SHRINKS smoothly into a compact form; scroll up and it EXPANDS back; on
- * scroll-stop it SNAPS to the nearest state (the `useScrollChrome` JS machine owns the
- * snap + the ramp value — this recipe is the compositor paint of `--chrome-collapse-t`).
- *
- *   .scroll-chrome — the chrome surface (a dock/header) reads `--chrome-collapse-t`
- *                    (0 expanded → 1 collapsed; the @property reg in property-regs.css)
- *                    for the COMPOSITOR shrink/quiet/shadow-lift ramp.
- *
- * COMPOSITOR-ONLY (the proof:no-layout-animation floor — motion-canon P5). The shrink is
- * `transform: scale()/translateY()` — NEVER an animated `height`/`padding`/`width` (the
- * box never reflows per scroll frame; the CDP Layout track stays flat). The quiet is
- * `opacity` BOUNDED above a never-invisible floor (the NN/g pale-fade-into-content trap
- * is the FORBIDDEN direction — the bar reads at EVERY collapse fraction). The
- * SEPARATION/shadow LIFTS as content scrolls under (Apple "as text scrolls underneath,
- * shadows become more prominent") — `box-shadow` is a paint prop, compositor-safe.
- *
- * THE BLUR STAYS CRISP (the W-DOCK-SHRINK-BLUR fence). The chrome's resting
- * `backdrop-filter` blur is NOT animated by `--chrome-collapse-t` — a shrunken bar is
- * crisp glass, not a blurry mess. The recipe touches ONLY transform/opacity/box-shadow;
- * the surface's own `glass-*` tier owns the (untouched) backdrop blur.
- *
- * PERSISTENT BY DEFAULT (the iOS-27 lesson). `--chrome-collapse-t` rests at 0 (the
- * @property initial-value), so a bare `.scroll-chrome` is byte-identical to the expanded
- * chrome — it does NOT collapse until the `useScrollChrome` machine (opted in with
- * `collapseOnScroll: true`) ramps the custom.
- *
- * PRM (the discrete-state-survives model, the useFadingScroll precedent). The transform/
- * opacity RAMP sits inside the `@media (prefers-reduced-motion: no-preference)` outer
- * gate (the scroll-choreography.css discipline) — under reduce the continuous ramp drops;
- * the `useScrollChrome` machine snaps `--chrome-collapse-t` to a discrete 0/1 endpoint, so
- * the DISCRETE collapsed/expanded state stays correct, instant, never half. The shadow
- * lift sits OUTSIDE the gate (a paint cue, not a vestibular motion) so the lifted
- * separation reads even under reduce.
- */
-
-/* The tunable depth knobs — a consumer retunes the shrink/fade depth per chrome. */
-:root {
-    /* The shrink depth: at fully collapsed the chrome scales to (1 − this). 0.12 → a
-       compact 88% bar (a real shrink that still reads as the same bar). */
-    --chrome-shrink-depth: 0.12;
-    /* The rise (px) the chrome translates toward its anchor edge as it collapses. */
-    --chrome-rise-px: 6px;
-    /* The fade depth — BOUNDED LOW: at fully collapsed opacity floors at (1 − this).
-       0.28 → a 0.72 floor (the bar quiets but is NEVER invisible — the NN/g pale-fade
-       trap forbidden). A consumer that wants no quiet sets it 0. */
-    --chrome-fade-depth: 0.28;
-    /* The shadow-lift strength — the separation shadow grows from rest → this as content
-       scrolls under (Apple shadow-on-scroll). A paint prop, compositor-safe. */
-    --chrome-shadow-lift: 18%;
-}
-
-/* The shrink/quiet RAMP — the SPATIAL (transform) + the EFFECTS (opacity) channels. It
-   rides `--chrome-collapse-t` directly (no CSS transition — the JS scalar already glides
-   on the reader's tick; on a native-timeline engine the same custom rides
-   `animation-timeline: scroll(self)`, the native-ramp path). Inside the PRM no-preference
-   gate: under reduce the ramp drops and the chrome reads its discrete snapped endpoint. */
-@media (prefers-reduced-motion: no-preference) {
-    .scroll-chrome {
-        /* SPATIAL leg — scale toward the compact size + a small rise toward the anchor
-           edge. transform-origin at the top (a header anchors its top; a consumer dock
-           re-points the origin to its natural seat). Compositor-only — never height/pad. */
-        transform: scale(calc(1 - var(--chrome-collapse-t) * var(--chrome-shrink-depth)))
-            translateY(calc(var(--chrome-collapse-t) * var(--chrome-rise-px) * -1));
-        transform-origin: top center;
-        /* EFFECTS leg — the quiet, BOUNDED above the never-invisible floor (the bar reads
-           at every fraction; the `* fade-depth` caps the drop, opacity never reaches 0). */
-        opacity: calc(1 - var(--chrome-collapse-t) * var(--chrome-fade-depth));
-        /* will-change the compositor channels (NEVER a layout property). */
-        will-change: transform, opacity;
-    }
-}
-
-/* The shadow LIFT — OUTSIDE the PRM gate (a paint cue, not a vestibular motion): the
-   separation shadow strengthens as content scrolls under the chrome. `box-shadow` is a
-   paint prop (compositor-safe, in the proof:no-layout-animation paint set, NOT the reflow
-   set). The lift composes the house `--shadow-color: var(--foreground)` so it re-tints
-   light↔dark for free; the strength grows from a whisper at rest → `--chrome-shadow-lift`
-   at fully collapsed. */
-.scroll-chrome {
-    box-shadow: 0 calc(2px + var(--chrome-collapse-t) * 6px)
-        calc(8px + var(--chrome-collapse-t) * 12px)
-        color-mix(
-            in srgb,
-            var(--shadow-color)
-                calc(6% + var(--chrome-collapse-t) * var(--chrome-shadow-lift)),
-            transparent
-        );
-}
-
-/* The native-ramp path — on a `scroll()`-supporting engine the consumer can drive
-   `--chrome-collapse-t` off `animation-timeline: scroll(self)` directly (the
-   `useScrollProgress`/`--scroll-t` native precedent: the JS writer is inert, the CSS owns
-   the compositor ramp). The keyframe is the linear 0→1 map over the collapse range; the
-   consumer binds it on the chrome with its own `animation-range` (the collapse-px span).
-   The SNAP-to-state stays the JS leg (a snap is a discrete commit, not a continuous ramp —
-   it rides the `useScrollChrome` scroll-stop tick on every engine). PRM-gated + supports-
-   gated (a non-supporting engine reads the JS `collapseT` write, never this keyframe). */
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-        @keyframes gl-chrome-collapse {
-            from {
-                --chrome-collapse-t: 0;
-            }
-            to {
-                --chrome-collapse-t: 1;
-            }
-        }
-        /* OPT-IN: a consumer adds `.scroll-chrome--native` to ride the compositor ramp
-           (it must set `animation-range` for its own collapse-px span; the
-           `useScrollChrome` machine's JS write is the cross-engine floor + the snap). */
-        .scroll-chrome--native {
-            animation: gl-chrome-collapse auto linear both;
-            animation-timeline: scroll(self block);
-        }
-    }
-}