/* ss-motion.css — Operator's OS motion engine (styleseed + three moves) Authority: VISION-motion-and-hero-2026-07-29 · OPERATORS-OS-VISUAL-ROADMAP · styleseed-motion Ground: cool operator (#F3F2F8) — NEVER cream/warm-paper. Transform + opacity only. prefers-reduced-motion = instant states. Payload (price / balance / result) is NEVER animated into view. */ :root { /* styleseed curves — ported from src/lib/motion/styleseed.js / skill seeds */ --ss-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ss-silk: cubic-bezier(0.32, 0.72, 0, 1); --ss-snap: cubic-bezier(0, 0, 0.2, 1); --ss-float: cubic-bezier(0.22, 1, 0.36, 1); --ss-pulse: cubic-bezier(0.34, 1.2, 0.64, 1); --ss-ease: var(--ss-silk); --ss-dur-in: 450ms; --ss-dur-out: 300ms; --ss-dur-hover: 250ms; --ss-dur-press: 150ms; } /* one seed per property — set data-ss-seed on or */ [data-ss-seed="spring"] { --ss-ease: var(--ss-spring); --ss-dur-in: 420ms; --ss-dur-out: 280ms; --ss-dur-hover: 220ms; --ss-dur-press: 140ms; } [data-ss-seed="silk"] { --ss-ease: var(--ss-silk); --ss-dur-in: 450ms; --ss-dur-out: 300ms; --ss-dur-hover: 250ms; --ss-dur-press: 150ms; } [data-ss-seed="snap"] { --ss-ease: var(--ss-snap); --ss-dur-in: 180ms; --ss-dur-out: 120ms; --ss-dur-hover: 100ms; --ss-dur-press: 60ms; } [data-ss-seed="float"] { --ss-ease: var(--ss-float); /* personality lives in reveals — feedback stays snappy (G-1) */ --ss-dur-in: 700ms; --ss-dur-out: 500ms; --ss-dur-hover: 250ms; --ss-dur-press: 160ms; } [data-ss-seed="pulse"] { --ss-ease: var(--ss-pulse); --ss-dur-in: 280ms; --ss-dur-out: 220ms; --ss-dur-hover: 180ms; --ss-dur-press: 120ms; } [data-ss-seed="none"] { --ss-ease: linear; --ss-dur-in: 0ms; --ss-dur-out: 0ms; --ss-dur-hover: 0ms; --ss-dur-press: 0ms; } /* MOVE 2 — staggered reveal (supporting). F1 honesty (2026-08-06): the reveal PAINTS BY DEFAULT. Hiding is opt-in and only exists once `ss-js` lands on , which the page's inline head snippet sets and drops again if the engine never boots. No JS, blocked JS, a 404 on ss-motion.js, or an old browser ⇒ no hiding class ⇒ the content is simply there. A reveal that can leave a section blank is not a reveal. */ .ss-rv { transition: opacity var(--ss-dur-in) var(--ss-ease), transform var(--ss-dur-in) var(--ss-ease); transition-delay: calc(var(--i, 0) * 80ms); } html.ss-js .ss-rv { opacity: 0; transform: translateY(22px); } html.ss-js .ss-rv.ss-in { opacity: 1; transform: none; } @media print { .ss-rv, html.ss-js .ss-rv { opacity: 1 !important; transform: none !important; transition: none !important; } } /* MOVE 1 — pinned pan (signature · once per page) */ .ss-rail-section { position: relative; height: 320vh; background: var(--ground, #F3F2F8); color: var(--ink-0, #1B1922); } .ss-rail-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .ss-rail-head { padding: 0 clamp(16px, 5vw, 48px) 3vh; max-width: min(1120px, 92vw); margin: 0 auto; width: 100%; } .ss-rail-head .ss-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fam-ink, var(--indigo-ink, #5B4FCF)); font-weight: 600; } .ss-rail-head h2 { margin: 12px 0 0; font-family: var(--font-display, inherit); font-size: clamp(1.5rem, 3.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.12; font-weight: 650; color: var(--ink-0, #1B1922); text-wrap: balance; } .ss-rail-head p { margin: 10px 0 0; max-width: 52ch; color: var(--ink-1, #54525E); font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.5; } .ss-rail-track { display: flex; align-items: stretch; gap: 16px; padding: 0 clamp(16px, 5vw, 48px); will-change: transform; } .ss-inst { flex: 0 0 min(280px, 78vw); background: var(--card, #fff); border: 1px solid var(--line, #E1E0E5); border-radius: var(--r-panel, 14px); padding: 20px 18px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(27, 25, 34, 0.04), 0 18px 36px -28px rgba(27, 25, 34, 0.18); transition: transform var(--ss-dur-hover) var(--ss-ease), box-shadow var(--ss-dur-hover) var(--ss-ease); min-width: 0; } /* hover motion only on fine pointers (G-1) — touch inherits no lift */ @media (hover: hover) and (pointer: fine) { .ss-inst:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(27, 25, 34, 0.05), 0 22px 40px -26px color-mix(in srgb, var(--fam-ink, #5B4FCF) 22%, transparent); } } .ss-inst .ss-n { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fam-ink, var(--indigo-ink, #5B4FCF)); font-weight: 600; } .ss-inst h3 { margin: 10px 0 0; font-size: 1.15rem; letter-spacing: -0.02em; font-weight: 650; color: var(--ink-0, #1B1922); overflow-wrap: anywhere; } .ss-inst p { margin: 6px 0 0; color: var(--ink-1, #54525E); font-size: 0.92rem; line-height: 1.45; flex: 1; overflow-wrap: anywhere; } .ss-inst .ss-cat { margin-top: 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2, #929198); } .ss-inst a.ss-door { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--fam-ink, var(--indigo-ink, #5B4FCF)); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--ss-dur-hover) var(--ss-ease); } .ss-inst a.ss-door:hover, .ss-inst a.ss-door:focus-visible { border-bottom-color: currentColor; } .ss-rail-progress { margin: 4vh auto 0; max-width: min(1120px, 92vw); width: 100%; padding: 0 clamp(16px, 5vw, 48px); } .ss-rail-progress .ss-bar { height: 2px; background: var(--line-strong, #D1D0D6); border-radius: 2px; overflow: hidden; } .ss-rail-progress .ss-bar > i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--fam-ink, var(--indigo-ink, #5B4FCF)); border-radius: 2px; will-change: transform; } .ss-rail-progress .ss-lbl { margin-top: 10px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2, #929198); } /* MOVE 3 — scrub (optional; product pages opt-in with .ss-scrub) */ .ss-scrub-track { position: relative; height: 4px; background: var(--line-strong, #D1D0D6); border-radius: 999px; overflow: hidden; margin-top: 16px; } .ss-scrub-track > i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--fam-ink, var(--indigo-ink, #5B4FCF)); border-radius: 999px; transition: none; will-change: transform; } /* MOVE 3b — progress-driven field fill (opt-in [data-ss-at]; opacity/transform only). Engine sets --ss-p on the rail section. prefers-reduced-motion → full fill (see below). */ [data-ss-at] { will-change: opacity, transform; } /* same F1 rule as .ss-rv: only the scripted path may start these at zero */ html.ss-js [data-ss-at] { opacity: 0; } [data-ss-scrub] { --ss-p: 0; } /* seed-aware hover press on CTAs that opt in */ .ss-motion { transition: transform var(--ss-dur-press) var(--ss-ease), box-shadow var(--ss-dur-hover) var(--ss-ease); } .ss-motion:active { transform: scale(0.98); } /* mobile + reduced-motion: no pin; native horizontal snap */ @media (max-width: 820px) { .ss-rail-section { height: auto; } .ss-rail-pin { position: static; height: auto; padding: 10vh 0 8vh; } .ss-rail-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-bottom: 10px; -webkit-overflow-scrolling: touch; } .ss-inst { scroll-snap-align: start; flex: 0 0 78vw; } .ss-rail-progress { display: none; } } @media (prefers-reduced-motion: reduce) { .ss-rv { transition: none !important; opacity: 1 !important; transform: none !important; } .ss-inst { transition: none !important; } .ss-inst:hover { transform: none !important; } .ss-rail-section { height: auto; } .ss-rail-pin { position: static; height: auto; padding: 10vh 0 8vh; } .ss-rail-track { overflow-x: auto; transform: none !important; padding-bottom: 10px; } .ss-motion, .ss-motion * { transition: none !important; animation: none !important; } /* scrub: instant end state — paper already filled + signed */ [data-ss-at] { opacity: 1 !important; transform: none !important; } .ss-scrub-track > i, .ss-rail-progress .ss-bar > i { transform: scaleX(1) !important; } } /* ═══ THE NIGHT GROUND ONLY EXISTS AT NIGHT ═══════════════════════════════════ `.galaxy-s3-layer` is a fixed, full-page astronomy photograph — a different plate per face, twelve distinct md5s — pinned behind the whole product page at .28 (moatid .42). It was the default hero of eleven products: a galaxy behind a grep tool, behind a scheduling tool, behind an identity product. The founder's test for any element is "be able to answer why things are where they are," and a galaxy behind a grep tool answers nothing. The night engine is NOT deleted and the plates are NOT deleted. A stunning realistic starfield is one of the two ruled night forms, and `ss-night.js` still finds this img and paints its canvas over it exactly as before. What changes is WHERE it mounts: night is a mode, so the night ground shows in the night mode and nowhere else. A light product face gets its own ground back. Lives here because this is the one shared sheet all ten galaxy faces already load, so the fleet retunes in one place instead of ten copy-pasted inline blocks. Gated on the FACE's own data-theme, never the visitor's OS: most of these faces are declared LIGHT by founder ruling and a shared sheet must not re-declare a face's theme (gate-theme-declared). The wrapper is hidden, not the img, so the engine's own opacity/filter reads are untouched and a theme flip restores it. */ .galaxy-s3-layer, .galaxy-s3-scrim { visibility: hidden; opacity: 0; transition: opacity .45s var(--ss-silk), visibility 0s linear .45s; } html[data-theme="dark"] .galaxy-s3-layer, html[data-theme="dark"] .galaxy-s3-scrim { visibility: visible; opacity: 1; transition: opacity .45s var(--ss-silk), visibility 0s; } @media (prefers-reduced-motion: reduce) { .galaxy-s3-layer, .galaxy-s3-scrim { transition: none; } }