@odyn-app/api 0.0.0-stage → 0.2.0

package/dist/ui/orb/orb-lattice.module.css

@@ -0,0 +1,165 @@
+/* --- Lattice: discrete dots on a fixed 3×3 grid ------------------- */
+
+.lattice {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 28px;
+  height: 28px;
+  transform-origin: 0 0;
+  /* Three 3px dots on a 6px pitch measure 15px, so the grid is offset to sit
+     centred on the 28px stage. It deliberately does not fill the stage: that
+     is what keeps its visual weight level with the Lens circles. */
+  transform: scale(var(--orb-k, 1)) translate(6.5px, 6.5px);
+  /* Resting ink of an unlit cell — the grid stays legible between beats.
+     --orb-dim is for cells sitting a choreography out entirely. */
+  --orb-rest: 0.14;
+  --orb-dim: 0.07;
+}
+
+/* Light ink on a dark surface reads dimmer at the same alpha. */
+:global(.dark) .lattice {
+  --orb-rest: 0.2;
+  --orb-dim: 0.1;
+}
+
+
+.cell {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: var(--orb-rest);
+}
+
+/* One wave shape drives all three sweeps. What separates them is the pair of
+   duration and per-cell stagger: the stagger sets how fast the wavefront
+   travels, the duration how many cells it holds lit at once — which is to
+   say, how wide the band reads. */
+.lattice[data-variant="S1"] .cell {
+  animation: orb-wave 1.7s var(--orb-ease-in-out) infinite both;
+}
+
+.lattice[data-variant="S2"] .cell {
+  animation: orb-wave 1.7s var(--orb-ease-in-out) infinite both;
+}
+
+.lattice[data-variant="S4"] .cell {
+  animation: orb-wave 1.6s var(--orb-ease-in-out) infinite both;
+}
+
+.lattice[data-variant="S3"] .cell {
+  animation: orb-comet 1.7s var(--orb-ease-smooth) infinite both;
+}
+
+/* Interior cells sit out `orbit` and drop back, so the ring reads as a
+   ring and the travelling head has something to stand out against. */
+.lattice[data-variant="S3"] .cell[data-still] {
+  animation: none;
+  opacity: var(--orb-dim);
+}
+
+.lattice[data-variant="S5"] .cell {
+  animation: orb-comet 1.7s var(--orb-ease-smooth) infinite both;
+}
+
+.lattice[data-variant="S5"] .cell[data-still] {
+  animation: none;
+  opacity: var(--orb-dim);
+}
+
+/* Swells and subsides on the same symmetric curve, so there is no flash and
+   no hard edge — the cell rises out of its resting ink and sinks back into
+   it. The long tail after 56% is the gap between beats. */
+@keyframes orb-wave {
+  0% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+    animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+  }
+  28% {
+    opacity: 1;
+    transform: scale(1.18);
+    animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+  }
+  56% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+  100% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+}
+
+/* Starts lit and decays, so staggered ring cells form a head and tail.
+   The decay spans ~3.5 of the 8 ring positions — enough to read as a comet. */
+@keyframes orb-comet {
+  0% {
+    opacity: 1;
+    transform: scale(1.2);
+    /* Linear, so the cells behind the head form an even gradient instead
+       of collapsing to rest within the first two. */
+    animation-timing-function: linear;
+  }
+  45% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+  100% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+}
+
+
+/* --- The stacked-PR waits: frame-drawn on the same grid ------------
+   Each cell carries its own opacity and scale per frame as custom properties
+   (`--orb-f0`, `--orb-s0`, … from LATTICE_FRAMES in orb-lattice-geometry.ts),
+   so one keyframe per FRAME COUNT serves every look. The frames sit evenly
+   round the period; the timing function applies between each pair. */
+.lattice[data-variant="S6"] .cell,
+.lattice[data-variant="S7"] .cell,
+.lattice[data-variant="S8"] .cell {
+  animation: orb-frames-5 1.3s linear infinite both;
+}
+
+/* Waiting climbs: the outer columns go up hand over hand, the middle sits
+   out, and the last frame rests before the next climb. */
+.lattice[data-variant="S9"] .cell {
+  animation: orb-frames-6 1.6s linear infinite both;
+}
+
+@keyframes orb-frames-5 {
+  0%, 100% { opacity: var(--orb-f0); transform: scale(var(--orb-s0)); }
+  20% { opacity: var(--orb-f1); transform: scale(var(--orb-s1)); }
+  40% { opacity: var(--orb-f2); transform: scale(var(--orb-s2)); }
+  60% { opacity: var(--orb-f3); transform: scale(var(--orb-s3)); }
+  80% { opacity: var(--orb-f4); transform: scale(var(--orb-s4)); }
+}
+
+@keyframes orb-frames-6 {
+  0%, 100% { opacity: var(--orb-f0); transform: scale(var(--orb-s0)); }
+  16.667% { opacity: var(--orb-f1); transform: scale(var(--orb-s1)); }
+  33.333% { opacity: var(--orb-f2); transform: scale(var(--orb-s2)); }
+  50% { opacity: var(--orb-f3); transform: scale(var(--orb-s3)); }
+  66.667% { opacity: var(--orb-f4); transform: scale(var(--orb-s4)); }
+  83.333% { opacity: var(--orb-f5); transform: scale(var(--orb-s5)); }
+}
+
+:global([data-orb-paused]) .lattice,
+:global([data-orb-paused]) .cell {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lattice,
+  .cell {
+    animation: none !important;
+  }
+
+  .cell[data-mid] {
+    opacity: 1 !important;
+  }
+}

package/dist/ui/orb/orb-lens-primary.module.css

@@ -0,0 +1,195 @@
+/* focus — attention travels the cast: each circle pulls into focus in turn.
+   Four circles on the corners of a square, one size for all of them, so the
+   only thing separating them is which one is sharp.
+
+   A second longer than the three-circle version it grew out of: the square
+   has four stations to visit and each one keeps the same unhurried second.
+
+   The delays count down rather than up because a more negative delay seeds a
+   circle further into its cycle: -3s of a 4s cycle runs three quarters ahead,
+   which is what sends focus round the square clockwise. */
+.variants[data-variant="B1"] :global([data-orb-shape]) {
+  --orb-d: 6px;
+  animation: orb-focus 4s var(--orb-ease-smooth) infinite both;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="a"]) {
+  --orb-ox: -4.5px;
+  --orb-oy: -4.5px;
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="b"]) {
+  --orb-ox: 4.5px;
+  --orb-oy: -4.5px;
+  animation-delay: -3s;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="c"]) {
+  --orb-ox: 4.5px;
+  --orb-oy: 4.5px;
+  animation-delay: -2s;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="d"]) {
+  --orb-ox: -4.5px;
+  --orb-oy: 4.5px;
+  animation-delay: -1s;
+}
+
+/* Opacity gradient around the square: active = 1.0, next neighbour = 0.30,
+   diagonal = 0.10, far = 0.05. Two circles are always clearly visible, the
+   rest are ghost hints. */
+@keyframes orb-focus {
+  0%,
+  100% {
+    opacity: 0.05;
+    filter: blur(2px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.12);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  12% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1);
+    animation-timing-function: linear;
+  }
+  22% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  /* Next neighbour — one quarter away: clearly visible */
+  38% {
+    opacity: 0.3;
+    filter: blur(1.2px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.06);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  /* Diagonal — half a cycle away: ghost */
+  58% {
+    opacity: 0.1;
+    filter: blur(1.8px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.1);
+    animation-timing-function: linear;
+  }
+  /* Far neighbour — three quarters away: barely there */
+  82% {
+    opacity: 0.05;
+    filter: blur(2px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.12);
+  }
+}
+
+/* drift — the cast circles the stage on one track, sharp at the front and
+   blurred away at the back, so the orb reads as looking around. Uniform
+   size: the depth cue is doing the work, a size ladder would fight it. */
+.variants[data-variant="B2"] :global([data-orb-shape]) {
+  animation: orb-revolve 3.3s linear infinite both;
+}
+
+/* Evenly spaced around the track, so one is always at the front. */
+.variants[data-variant="B2"] :global([data-orb-shape="a"]) {
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B2"] :global([data-orb-shape="b"]) {
+  animation-delay: -1.1s;
+}
+
+.variants[data-variant="B2"] :global([data-orb-shape="c"]) {
+  animation-delay: -2.2s;
+}
+
+/* rotate() then translateY() walks a circle. Linear all the way: an eased
+   rotation on a circular path reads as a wobble, not as travel. */
+@keyframes orb-revolve {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+    transform: rotate(0deg) translateY(6.5px) scale(1);
+  }
+  25% {
+    opacity: 0.55;
+    filter: blur(1.3px);
+    transform: rotate(90deg) translateY(6.5px) scale(0.82);
+  }
+  50% {
+    opacity: 0.28;
+    filter: blur(2.4px);
+    transform: rotate(180deg) translateY(6.5px) scale(0.66);
+  }
+  75% {
+    opacity: 0.55;
+    filter: blur(1.3px);
+    transform: rotate(270deg) translateY(6.5px) scale(0.82);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+    transform: rotate(360deg) translateY(6.5px) scale(1);
+  }
+}
+
+/* bloom — shapes emanate from the centre, blurring out as they grow.
+   Linear keeps the total ink even; on a front-loaded curve the shapes
+   jump to their large, blurred end state and the orb alternates between
+   a heavy blot and an empty haze. */
+.variants[data-variant="B3"] :global([data-orb-shape]) {
+  animation: orb-bloom 4.2s linear infinite both;
+}
+
+.variants[data-variant="B3"] :global([data-orb-shape="a"]) {
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B3"] :global([data-orb-shape="b"]) {
+  animation-delay: -1.4s;
+}
+
+.variants[data-variant="B3"] :global([data-orb-shape="c"]) {
+  animation-delay: -2.8s;
+}
+
+/* Each ripple dies at 62% and waits out the rest, so the three overlapping
+   blooms leave gaps. Without the gap the aggregate is a constant haze and
+   the outward motion stops reading at all. Sharp circle appears, holds
+   briefly, then dissolves outward — blur only kicks in once opacity starts
+   dropping, so the circle stays crisp while it's visible and the blur reads
+   as the ripple dissipating. */
+@keyframes orb-bloom {
+  0% {
+    opacity: 0;
+    filter: blur(0);
+    transform: scale(0.35);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+  8% {
+    opacity: 1;
+    filter: blur(0);
+    transform: scale(0.55);
+    animation-timing-function: linear;
+  }
+  24% {
+    opacity: 1;
+    filter: blur(0);
+    transform: scale(0.72);
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  42% {
+    opacity: 0.1;
+    filter: blur(1.8px);
+    transform: scale(1.5);
+  }
+  62% {
+    opacity: 0;
+    filter: blur(2.8px);
+    transform: scale(2.4);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(2.8px);
+    transform: scale(2.4);
+  }
+}

package/dist/ui/orb/orb-lens-secondary.module.css

@@ -0,0 +1,143 @@
+/* converge — a single circle traces an equilateral triangle (top → bottom-right
+   → bottom-left → top) with handoff-style easing: full size and sharp at each
+   vertex, smaller and slightly blurred in transit.  orbB breathes at the
+   centroid as a subtle depth cue; orbC is hidden. */
+.variants[data-variant="B4"] :global([data-orb-shape="a"]) {
+  animation: orb-converge 3.6s linear infinite both;
+}
+.variants[data-variant="B4"] :global([data-orb-shape="b"]) {
+  animation: orb-breathe 3.6s ease-in-out infinite both;
+}
+.variants[data-variant="B4"] :global([data-orb-shape="c"]) {
+  display: none;
+}
+
+@keyframes orb-converge {
+  0% {
+    transform: translate(0px, -5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: linear;
+  }
+  10% {
+    transform: translate(0px, -5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+  22% {
+    transform: translate(2.15px, -1.25px) scale(0.72);
+    filter: blur(0.8px);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  33% {
+    transform: translate(4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: linear;
+  }
+  43% {
+    transform: translate(4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+  55% {
+    transform: translate(0px, 2.5px) scale(0.72);
+    filter: blur(0.8px);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  66% {
+    transform: translate(-4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: linear;
+  }
+  77% {
+    transform: translate(-4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+  88% {
+    transform: translate(-2.15px, -1.25px) scale(0.72);
+    filter: blur(0.8px);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  100% {
+    transform: translate(0px, -5px) scale(1);
+    filter: blur(0);
+  }
+}
+
+/* handoff — the cast crosses the focal plane one after another, always left
+   to right, like work being passed on. The shorthand curve is only a
+   fallback; every segment below sets its own. */
+.variants[data-variant="B5"] :global([data-orb-shape]) {
+  animation: orb-handoff 2.8s linear infinite both;
+}
+
+/* Half a cycle apart, so one is always at the focal plane while the other is
+   invisible at an end and the loop point cannot be seen. */
+.variants[data-variant="B5"] :global([data-orb-shape="a"]) {
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B5"] :global([data-orb-shape="c"]) {
+  animation-delay: -1.4s;
+}
+
+/* The third holds the centre and breathes — a soft depth cue behind the
+   traffic rather than another traveller. */
+.variants[data-variant="B5"] :global([data-orb-shape="b"]) {
+  animation-name: orb-breathe;
+  animation-duration: 3.6s;
+}
+
+/* Enters small from the left, reaches standard size at the focal plane, then
+   shrinks and fades out to the right. At the dwell (centre) the circle is
+   exactly 1× — no pulsing, no bounce, just a clean handoff. */
+@keyframes orb-handoff {
+  0% {
+    opacity: 0;
+    filter: blur(2.4px);
+    transform: translateX(-11px) scale(0.55);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  22% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(-1px) scale(1);
+    animation-timing-function: linear;
+  }
+  37% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(0) scale(1);
+    animation-timing-function: linear;
+  }
+  52% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(1px) scale(1);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  70% {
+    opacity: 0;
+    filter: blur(2.4px);
+    transform: translateX(11px) scale(0.55);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(2.4px);
+    transform: translateX(11px) scale(0.55);
+  }
+}
+
+@keyframes orb-breathe {
+  0%,
+  100% {
+    opacity: 0.16;
+    filter: blur(2.4px);
+    transform: scale(1.2);
+  }
+  50% {
+    opacity: 0.32;
+    filter: blur(1.6px);
+    transform: scale(0.98);
+  }
+}

package/dist/ui/orb/orb-lens.module.css

@@ -0,0 +1,44 @@
+/* Shared stage for the Lens family. Variant choreography is split by group. */
+.lens {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 28px;
+  height: 28px;
+  transform-origin: 0 0;
+  transform: scale(var(--orb-k, 1));
+}
+
+.shape {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--orb-d, 7px);
+  height: var(--orb-d, 7px);
+  margin: calc(var(--orb-d, 7px) / -2) 0 0 calc(var(--orb-d, 7px) / -2);
+  border-radius: 50%;
+  background: currentColor;
+}
+
+:global([data-orb-paused]) .lens,
+:global([data-orb-paused]) .shape {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lens,
+  .shape {
+    animation: none !important;
+  }
+
+  .shape {
+    opacity: 0.3 !important;
+    filter: blur(1.4px) !important;
+    transform: none !important;
+  }
+
+  .shape:first-child {
+    opacity: 1 !important;
+    filter: blur(0) !important;
+  }
+}

package/dist/ui/orb/orb-morph-geometry.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react';
+import type { MorphVariant } from './orb-types';
+export interface MorphDot {
+    readonly key: number;
+    readonly style: CSSProperties;
+}
+export declare const morphDots: (variant: MorphVariant) => readonly MorphDot[];

package/dist/ui/orb/orb-morph-geometry.js

@@ -0,0 +1,88 @@
+import { memoiseByVariant } from './orb-geometry-cache';
+const DOT_COUNT = 8;
+const RADIUS = 7;
+const circle = (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2;
+    return [Math.cos(angle) * RADIUS, Math.sin(angle) * RADIUS];
+};
+const square = (index) => {
+    const halfSize = RADIUS * 0.85;
+    const corners = [
+        [-halfSize, -halfSize],
+        [halfSize, -halfSize],
+        [halfSize, halfSize],
+        [-halfSize, halfSize],
+    ];
+    const progress = ((index / DOT_COUNT) * 4 + 0.5) % 4;
+    const side = Math.floor(progress) % 4;
+    const fraction = progress - Math.floor(progress);
+    const from = corners[side];
+    const to = corners[(side + 1) % 4];
+    return [
+        from[0] + (to[0] - from[0]) * fraction,
+        from[1] + (to[1] - from[1]) * fraction,
+    ];
+};
+const circleAt = (turn) => (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2 + turn;
+    return [Math.cos(angle) * RADIUS, Math.sin(angle) * RADIUS];
+};
+const scatter = (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2;
+    return [-Math.cos(angle) * RADIUS, Math.sin(angle) * RADIUS];
+};
+const diamond = (index) => {
+    const corners = [
+        [0, -RADIUS],
+        [RADIUS, 0],
+        [0, RADIUS],
+        [-RADIUS, 0],
+    ];
+    const progress = (index / DOT_COUNT) * 4;
+    const side = Math.floor(progress) % 4;
+    const fraction = progress - Math.floor(progress);
+    const from = corners[side];
+    const to = corners[(side + 1) % 4];
+    return [
+        from[0] + (to[0] - from[0]) * fraction,
+        from[1] + (to[1] - from[1]) * fraction,
+    ];
+};
+const centre = (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2;
+    return [Math.cos(angle) * 1.5, Math.sin(angle) * 1.5];
+};
+function morphShapes(variant) {
+    switch (variant) {
+        case 'M1':
+            return [circle, square, diamond, square];
+        case 'M2':
+            return [centre, circle, centre, circle];
+        case 'M3':
+            return [circleAt(0), circleAt(Math.PI / 2), circleAt(Math.PI), circleAt(Math.PI * 1.5)];
+        case 'M4':
+            return [circle, diamond, circle, diamond];
+        case 'M5':
+            return [circle, scatter, circle, scatter];
+    }
+}
+function buildMorphDots(variant) {
+    const shapes = morphShapes(variant);
+    const pair = (point) => `${point[0].toFixed(1)}px, ${point[1].toFixed(1)}px`;
+    return Array.from({ length: DOT_COUNT }, (_, index) => ({
+        key: index,
+        style: {
+            '--m-1': pair(shapes[0](index)),
+            '--m-2': pair(shapes[1](index)),
+            '--m-3': pair(shapes[2](index)),
+            '--m-4': pair(shapes[3](index)),
+            ...(variant === 'M5'
+                ? {
+                    '--m-depth': Math.abs(Math.cos((index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2)).toFixed(2),
+                    animationDelay: `${-index * 10}ms`,
+                }
+                : {}),
+        },
+    }));
+}
+export const morphDots = memoiseByVariant(buildMorphDots);

package/dist/ui/orb/orb-morph.module.css

@@ -0,0 +1,62 @@
+/* ---- Morph ---- */
+.morph {
+  position: absolute;
+  inset: 0;
+  transform: scale(var(--orb-k, 1));
+}
+
+.morphDot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 3px;
+  height: 3px;
+  margin: -1.5px 0 0 -1.5px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: orb-morph 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+@keyframes orb-morph {
+  0%, 5%   { transform: translate(var(--m-1)); }
+  25%, 30% { transform: translate(var(--m-2)); }
+  50%, 55% { transform: translate(var(--m-3)); }
+  75%, 80% { transform: translate(var(--m-4)); }
+  100%     { transform: translate(var(--m-1)); }
+}
+
+.morph[data-variant="M2"] {
+  animation: orb-morph-twist 9.6s linear infinite;
+}
+
+.morph[data-variant="M4"] {
+  animation: orb-morph-twist 9.6s linear infinite;
+}
+
+.morph[data-variant="M5"] .morphDot {
+  animation: orb-morph-scatter 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+@keyframes orb-morph-scatter {
+  0%, 12% { transform: translate(var(--m-1)); opacity: 1; }
+  38%, 62% { transform: translate(var(--m-2)); opacity: calc(1 - 0.6 * var(--m-depth, 0)); }
+  88%, 100% { transform: translate(var(--m-1)); opacity: 1; }
+}
+
+@keyframes orb-morph-twist {
+  from { transform: scale(var(--orb-k, 1)) rotate(0deg); }
+  to   { transform: scale(var(--orb-k, 1)) rotate(360deg); }
+}
+
+
+:global([data-orb-paused]) .morph,
+:global([data-orb-paused]) .morphDot {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .morph,
+  .morphDot {
+    animation: none !important;
+  }
+}