@omega.js/web 0.1.0

package/core/css/motion/_index.scss

@@ -0,0 +1,368 @@
+// OMEGA motion — the shared animation / hover-effect library (C3, classy v2).
+// Token-driven (--omega-speed*, --omega-ease, --omega-shadow-*), gradient-free,
+// and reusable by every theme; at C4 the same sheet serves desktop/extension.
+//
+// Two kinds of surface:
+//   data-omega-* ATTRIBUTES — behaviors driven by the motion engine
+//     (@omega.js/client modules/motion.js, booted by core/js/core/motion.js):
+//     [data-omega-reveal="up|fade|left|right|scale"]  scroll-reveal (once)
+//     [data-omega-reveal-stagger="60"]                parent staggers child reveals
+//     [data-omega-first-paint]                        band is the first viewport: its reveals start at parse time (head starter), its rotator opens on word one
+//     [data-omega-countup]                            number counts up on first view
+//     [data-omega-rotate="2600"]                      children cycle (word rotator)
+//     [data-omega-marquee]                            seamless loop (track duplicated)
+//     [data-omega-scroll-watch="24"]                  stamps data-omega-scrolled
+//   .omega-* CLASSES — pure-CSS effects (hover lift/raise, pressable, float,
+//     caret) that need no JS at all.
+//
+// Resilience rules (load-bearing):
+//   - Reveals hide ONLY under html[data-omega-motion] (stamped by an inline
+//     head script) AND (prefers-reduced-motion: no-preference). No JS or
+//     reduced motion → everything renders visible and static.
+//   - NOTHING ABOVE THE FOLD WAITS FOR A BUNDLE. The engine's own starter
+//     rides core/js/first-paint.js (#585) — its own tiny module, loaded ahead
+//     of the main bundle and independent of images, fonts and firebase — and a
+//     first-paint band does not even wait for that: the head's inline starter
+//     stamps it at parse time (#763). This sheet is unchanged by either: one
+//     transition, one lane, started earlier.
+//   - The PurgeCSS safelist keeps every omega-* selector (src/assets.js):
+//     runtime-stamped state (data-omega-inview, data-omega-scrolled) never
+//     appears in rendered HTML for the content scan to find.
+
+// ─── Scroll reveal ───────────────────────────────────────────────────────────
+//
+// ONE lane: every reveal target starts out of sight under the head stamp, and
+// a data-omega-inview stamp transitions it back. What makes the hero prompt is
+// not a second lane here but WHO stamps it and WHEN. Two starters, one lane:
+//   - inside a [data-omega-first-paint] band, the head's inline starter, at
+//     PARSE time — no fetch, no module, so the first viewport's fade runs on
+//     the design's rhythm instead of waiting for a download (#763). #749
+//     briefly forced those reveals to their final state instead; the rule is
+//     gone, and the attribute now means "started early", not "exempt".
+//   - everywhere else, the engine's IntersectionObserver on scroll-in, booted
+//     by core/js/first-paint.js (#585, Ian's ruling 2026-08-26).
+
+@media (prefers-reduced-motion: no-preference) {
+  html[data-omega-motion] [data-omega-reveal] {
+    opacity: 0;
+    transform: translateY(14px);
+    transition:
+      opacity var(--omega-speed-slow) var(--omega-ease),
+      transform var(--omega-speed-slow) var(--omega-ease);
+    transition-delay: var(--omega-reveal-delay, 0ms);
+  }
+
+  // The first viewport is where the page's largest element lives, and Chrome
+  // reports that element painted only when its fade ENDS: every millisecond of
+  // this transition, plus the stagger ahead of it, lands on LCP. The #763
+  // proof measured it on the playground home (mobile, slow 4G): the 550ms
+  // reveal behind a 90ms stagger put LCP 750ms past first paint; 300ms behind
+  // a 40ms step, 400ms. So a first-paint band fades on its own, shorter token
+  // and everything below the fold keeps the full rhythm, where no metric
+  // watches. A theme re-times either one by setting its token.
+  html[data-omega-motion] [data-omega-first-paint] [data-omega-reveal] {
+    transition-duration: var(--omega-speed-first-paint);
+  }
+
+  html[data-omega-motion] [data-omega-reveal='fade'] {
+    transform: none;
+  }
+
+  html[data-omega-motion] [data-omega-reveal='left'] {
+    transform: translateX(-18px);
+  }
+
+  html[data-omega-motion] [data-omega-reveal='right'] {
+    transform: translateX(18px);
+  }
+
+  html[data-omega-motion] [data-omega-reveal='scale'] {
+    transform: scale(0.96);
+  }
+
+  html[data-omega-motion] [data-omega-reveal][data-omega-inview] {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+// ─── Hover effects (pure CSS) ────────────────────────────────────────────────
+
+.omega-hover-lift {
+  transition:
+    transform var(--omega-speed) var(--omega-ease),
+    border-color var(--omega-speed) var(--omega-ease),
+    box-shadow var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+
+.omega-hover-raise {
+  transition:
+    transform var(--omega-speed) var(--omega-ease),
+    border-color var(--omega-speed) var(--omega-ease),
+    box-shadow var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--omega-shadow-2);
+  }
+}
+
+.omega-hover-dim {
+  transition: opacity var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    opacity: 0.6;
+  }
+}
+
+// Press feedback for anything clickable.
+.omega-pressable {
+  transition: transform var(--omega-speed) var(--omega-ease);
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+// The whole-surface click affordance: a card or a row that IS the click
+// target says so the way every other control does — the surface warms under
+// the pointer, pressing tints it, and the keyboard gets the same treatment
+// through :focus-visible (these are often divs carrying a button role).
+// The lift is a MODIFIER, not a `.card` rule: a card has edges to lift, a row
+// does not, and core css never names a theme's vocabulary.
+.omega-interactive {
+  cursor: pointer;
+  transition:
+    background-color var(--omega-speed) var(--omega-ease),
+    box-shadow var(--omega-speed) var(--omega-ease),
+    transform var(--omega-speed) var(--omega-ease);
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--omega-surface-2);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--omega-accent-ring);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    background-color: var(--omega-accent-subtle);
+  }
+}
+
+.omega-interactive--lift {
+  &:hover,
+  &:focus-visible {
+    box-shadow: var(--omega-shadow-2);
+    transform: translateY(-2px);
+  }
+
+  // Pressing puts the lift back down, so the click has somewhere to land.
+  &:active {
+    box-shadow: var(--omega-shadow-1);
+    transform: translateY(0);
+  }
+}
+
+// Icon-nudge microinteraction: the child .omega-nudge slides on parent hover
+// (arrows in buttons/links).
+.omega-hover-nudge .omega-nudge {
+  display: inline-block;
+  transition: transform var(--omega-speed) var(--omega-ease);
+}
+
+.omega-hover-nudge:hover .omega-nudge {
+  transform: translateX(3px);
+}
+
+// ─── Ambient float (hero frames, decorative cards) ──────────────────────────
+
+@keyframes omega-float {
+  from {
+    transform: translateY(-5px);
+  }
+
+  to {
+    transform: translateY(6px);
+  }
+}
+
+.omega-float {
+  animation: omega-float 7s var(--omega-ease) infinite alternate;
+}
+
+// ─── Marquee (seamless loop; engine clones the set until half the track
+// covers the container, then doubles it for the -50% loop) ───────────────────
+
+.omega-marquee {
+  overflow: hidden;
+
+  // Alpha edge mask (a mask, not a visual gradient — the approved comp's
+  // masked-edges treatment).
+  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+
+.omega-marquee__track {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  animation: omega-marquee var(--omega-marquee-speed, 36s) linear infinite;
+}
+
+// Items own their spacing — flex `gap` would break the -50% loop math.
+.omega-marquee__item {
+  flex-shrink: 0;
+  margin-inline-end: var(--omega-marquee-gap, 56px);
+}
+
+.omega-marquee:hover .omega-marquee__track {
+  animation-play-state: paused;
+}
+
+@keyframes omega-marquee {
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+// ─── Word rotator (children stack; engine cycles data-omega-active) ─────────
+
+[data-omega-rotate] {
+  display: inline-grid;
+
+  > * {
+    grid-area: 1 / 1;
+    white-space: nowrap;
+  }
+}
+
+// No engine → a static first word, never stacked/invisible text.
+html:not([data-omega-motion]) [data-omega-rotate] > :not(:first-child) {
+  display: none;
+}
+
+html[data-omega-motion] [data-omega-rotate] > * {
+  opacity: 0;
+  transform: translateY(0.35em);
+  transition:
+    opacity var(--omega-speed-slow) var(--omega-ease),
+    transform var(--omega-speed-slow) var(--omega-ease);
+}
+
+html[data-omega-motion] [data-omega-rotate] > [data-omega-active] {
+  opacity: 1;
+  transform: none;
+}
+
+// The rotator's above-the-fold gate (#749, kept by #763). The lane above is an
+// opacity-0 gate the head's inline starter cannot resolve — the engine owns the
+// cycle, and the hero's shipped default puts a rotator in the h1 — so half the
+// headline stayed blank until the engine stamped its first word. Inside a
+// first-paint band the first word paints with the document instead, and the
+// engine opens on that very child
+// (client modules/motion.js, setupRotate marks index 0 active), so the handover
+// shows no second word. :not(:has()) is what makes it hand over at all: the
+// words share one grid cell, and a first word pinned visible would print under
+// word two the moment the cycle moved on. Outside the no-preference block on
+// purpose, exactly like the lanes above: reduced motion holds the first word,
+// it never hides it.
+html[data-omega-motion] [data-omega-first-paint] [data-omega-rotate]:not(:has([data-omega-active])) > :first-child {
+  opacity: 1;
+  transform: none;
+}
+
+// ─── Terminal caret ──────────────────────────────────────────────────────────
+
+@keyframes omega-caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.omega-caret::after {
+  content: '';
+  display: inline-block;
+  width: 0.55em;
+  height: 1.05em;
+  margin-inline-start: 2px;
+  vertical-align: text-bottom;
+  background: currentcolor;
+  animation: omega-caret-blink 1.1s steps(1) infinite;
+}
+
+// ─── Segmented controls (engine injects + positions the gliding thumb) ──────
+
+// isolation + negative z-index: the thumb paints above the container's own
+// background but below every segment — no touching the segments themselves
+// (forcing position on them would break Bootstrap's .btn-check clip hiding).
+[data-omega-segmented] {
+  position: relative;
+  isolation: isolate;
+}
+
+.omega-segmented__thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--omega-segment-w, 0);
+  height: var(--omega-segment-h, 0);
+  transform: translate(var(--omega-segment-x, 0px), var(--omega-segment-y, 0px));
+  transition:
+    transform var(--omega-speed) var(--omega-ease),
+    width var(--omega-speed) var(--omega-ease),
+    height var(--omega-speed) var(--omega-ease),
+    opacity var(--omega-speed) var(--omega-ease);
+  pointer-events: none;
+  z-index: -1;
+}
+
+// ─── Dot field (canvas dot grid: traveling wave + pointer glow) ──────────────
+
+[data-omega-dotfield] {
+  position: relative;
+}
+
+.omega-dotfield__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+// ─── Reduced motion: kill every ambient/looping effect ──────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .omega-float,
+  .omega-marquee__track,
+  .omega-caret::after {
+    animation: none;
+  }
+
+  .omega-hover-lift,
+  .omega-hover-raise,
+  .omega-pressable,
+  .omega-interactive,
+  .omega-hover-nudge .omega-nudge,
+  .omega-segmented__thumb,
+  html[data-omega-motion] [data-omega-rotate] > * {
+    transition: none;
+  }
+
+  .omega-hover-lift:hover,
+  .omega-hover-raise:hover,
+  .omega-pressable:active,
+  .omega-interactive--lift:hover,
+  .omega-interactive--lift:focus-visible,
+  .omega-interactive--lift:active,
+  .omega-hover-nudge:hover .omega-nudge {
+    transform: none;
+    box-shadow: none;
+  }
+}