/* ==========================================================================
BB2G · motion.css — THE LURE STANDARD, as a stylesheet.
Kristen, twice (2026-08-05 and again 2026-08-14): "make the graphics moving
like lure.bornbetween2generals.com — I don't like lame graphics."
Both times the answer was built by hand, per app, because the JS half
(kit/motion.js) and the fetcher (kit/hero.mjs) existed but THE CSS HALF
NEVER DID. 48 of 147 live apps carry a hero loop; every one was bespoke.
This file is the missing half, so the next one is two lines instead of a day.
Pair it with kit/motion.js. Markup contract:
<- ALWAYS present
...type...
FOUR TRAPS CLOSED HERE, each one paid for in a previous session:
1. REDUCED MOTION RESOLVES TO THE FINISHED STATE — never a frozen mid-frame
and never nothing. A blank page is a worse failure than movement.
2. opacity:0 IS NEVER THE DEFAULT. The hidden-before-reveal state applies
only under html.bbm-js, which an inline script sets before paint.
With scripting off nothing ever hides. (html.no-js the other way round is
wrong: if the script never runs the class is never removed.)
3. A GLOW MUST BE BIGGER THAN THE BOX IT SITS BEHIND. Written as an inset
pseudo-element it is 100% occluded and does literally nothing — the blur
spill IS the glow. And it needs pointer-events:none or it eats clicks.
4. KEN BURNS RUNS ONLY WHILE ON SCREEN (.is-live, set by the observer), not
permanently — otherwise every offscreen hero burns battery forever.
========================================================================== */
:root {
--bbm-drift: 44s; /* hero push — slow enough to read as depth, not motion */
--bbm-kb: 26s; /* ken burns */
--bbm-motif: 34s; /* line-motif drift */
--bbm-rise: .62s; /* scroll reveal */
--bbm-ease: cubic-bezier(.22, .61, .36, 1);
/* The grade. Lure runs the footage DOWN so white type holds. But the first
Full Circle attempt (brightness .55 under a .90 veil) erased the footage
completely — and "lame graphics" is the whole complaint. OPEN THE VEIL
UNTIL THE FOOTAGE READS, then hold the type with a shadow. */
--bbm-grade: saturate(.68) contrast(1.10) brightness(.78);
--bbm-veil-top: .72;
--bbm-veil-mid: .34;
--bbm-veil-bot: .80;
}
/* ---------- the hero ---------- */
.bbm-hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(420px, 76vh, 760px);
padding-block: clamp(3rem, 9vw, 7rem);
/* NOT display:flex. Making the hero a flex container turns .bb-wrap into a
flex item, which shrink-wraps it off the page grid — and "fixing" that
with width:100% overrides the min() that IS the page gutter. Centre on
min-height + padding, and constrain the prose on an INNER element. */
}
/* The still is the floor. It is a real , not a poster attribute, because
the watchdog removes a stalled
<- ALWAYS present