@twentyfirstmedia/halo 0.1.1 → 0.2.0

package/dist/styles.css

@@ -94,6 +94,10 @@
   --dur-enter: 520ms;
   --dur-slow: 900ms;
   --stagger-step: 55ms;
+  --dur-exit: 160ms;
+  --motion-time: 1;
+  --motion-travel: 1;
+  --motion-blur: 0px;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@@ -300,6 +304,20 @@
   --on-frame-danger: #f2a8a0;
   --scrim: rgba(10, 10, 10, 0.32);
   --scrim-strong: rgba(10, 10, 10, 0.38);
+  --glass: color-mix(in srgb, var(--card) 72%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
+  --glass-control: color-mix(in srgb, var(--card) 62%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
+  --glass-border: rgba(255, 255, 255, 0.6);
+  --glass-highlight: rgba(255, 255, 255, 0.95);
+  --glass-sheen: rgba(255, 255, 255, 0.5);
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--sky) 72%, var(--sky-ink));
+  --ambient-2: color-mix(in oklab, var(--mint) 72%, var(--mint-ink));
+  --ambient-3: color-mix(in oklab, var(--lilac) 72%, var(--lilac-ink));
+  --ambient-4: color-mix(in oklab, var(--butter) 72%, var(--butter-ink));
+  --ambient-scrim: rgba(255, 255, 255, 0.28);
   --bg-000: var(--canvas);
   --bg-100: var(--surface);
   --bg-200: var(--surface-sunken);
@@ -357,6 +375,7 @@
   --shadow-lift: 0 2px 4px rgba(20,20,20,0.06), 0 14px 32px rgba(20,20,20,0.10);
   --shadow-float: 0 16px 40px rgba(0,0,0,0.22);
   --shadow-overlay: var(--shadow-float);
+  --shadow-glass: 0 1px 2px rgba(20, 20, 40, 0.06), 0 12px 40px rgba(20, 20, 40, 0.14);
   --button-radius: var(--radius-pill);
   --field-radius: var(--radius-pill);
   --badge-radius: var(--radius-pill);
@@ -366,6 +385,8 @@
   --panel-shadow: var(--shadow-card);
   --panel-pad: var(--space-6);
   --panel-gap: var(--space-4);
+  --glass-filter: blur(24px) saturate(180%) brightness(1.05);
+  --glass-tint: 62%;
   color-scheme: light;
 }
 @media (prefers-color-scheme: dark) {
@@ -431,6 +452,20 @@
     --on-frame-danger: #f2a8a0;
     --scrim: rgba(10, 10, 10, 0.32);
     --scrim-strong: rgba(10, 10, 10, 0.38);
+    --glass: color-mix(in srgb, var(--card) 70%, transparent);
+    --glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
+    --glass-control: color-mix(in srgb, var(--foreground) 10%, transparent);
+    --glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
+    --glass-hover: color-mix(in srgb, var(--foreground) 12%, transparent);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-highlight: rgba(255, 255, 255, 0.18);
+    --glass-sheen: rgba(255, 255, 255, 0.05);
+    --ambient-base: var(--background);
+    --ambient-1: var(--sky);
+    --ambient-2: var(--mint);
+    --ambient-3: var(--lilac);
+    --ambient-4: var(--butter);
+    --ambient-scrim: rgba(10, 10, 10, 0.45);
     --bg-000: var(--canvas);
     --bg-100: var(--surface);
     --bg-200: var(--surface-sunken);
@@ -488,6 +523,7 @@
     --shadow-lift: 0 2px 6px rgba(0,0,0,0.5), 0 14px 32px rgba(0,0,0,0.45);
     --shadow-float: 0 16px 40px rgba(0,0,0,0.6);
     --shadow-overlay: var(--shadow-float);
+    --shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45);
     --button-radius: var(--radius-pill);
     --field-radius: var(--radius-pill);
     --badge-radius: var(--radius-pill);
@@ -497,6 +533,8 @@
     --panel-shadow: var(--shadow-card);
     --panel-pad: var(--space-6);
     --panel-gap: var(--space-4);
+    --glass-filter: blur(24px) saturate(160%) brightness(0.85);
+    --glass-tint: 62%;
     color-scheme: dark;
   }
 }
@@ -563,6 +601,20 @@
     --on-frame-danger: #f2a8a0;
     --scrim: rgba(10, 10, 10, 0.32);
     --scrim-strong: rgba(10, 10, 10, 0.38);
+    --glass: color-mix(in srgb, var(--card) 70%, transparent);
+    --glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
+    --glass-control: color-mix(in srgb, var(--foreground) 10%, transparent);
+    --glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
+    --glass-hover: color-mix(in srgb, var(--foreground) 12%, transparent);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-highlight: rgba(255, 255, 255, 0.18);
+    --glass-sheen: rgba(255, 255, 255, 0.05);
+    --ambient-base: var(--background);
+    --ambient-1: var(--sky);
+    --ambient-2: var(--mint);
+    --ambient-3: var(--lilac);
+    --ambient-4: var(--butter);
+    --ambient-scrim: rgba(10, 10, 10, 0.45);
     --bg-000: var(--canvas);
     --bg-100: var(--surface);
     --bg-200: var(--surface-sunken);
@@ -620,6 +672,7 @@
     --shadow-lift: 0 2px 6px rgba(0,0,0,0.5), 0 14px 32px rgba(0,0,0,0.45);
     --shadow-float: 0 16px 40px rgba(0,0,0,0.6);
     --shadow-overlay: var(--shadow-float);
+    --shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45);
     --button-radius: var(--radius-pill);
     --field-radius: var(--radius-pill);
     --badge-radius: var(--radius-pill);
@@ -629,6 +682,8 @@
     --panel-shadow: var(--shadow-card);
     --panel-pad: var(--space-6);
     --panel-gap: var(--space-4);
+    --glass-filter: blur(24px) saturate(160%) brightness(0.85);
+    --glass-tint: 62%;
     color-scheme: dark;
   }
 }
@@ -695,6 +750,20 @@
     --on-frame-danger: #f2a8a0;
     --scrim: rgba(10, 10, 10, 0.32);
     --scrim-strong: rgba(10, 10, 10, 0.38);
+    --glass: color-mix(in srgb, var(--card) 72%, transparent);
+    --glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
+    --glass-control: color-mix(in srgb, var(--card) 62%, transparent);
+    --glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
+    --glass-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
+    --glass-border: rgba(255, 255, 255, 0.6);
+    --glass-highlight: rgba(255, 255, 255, 0.95);
+    --glass-sheen: rgba(255, 255, 255, 0.5);
+    --ambient-base: var(--background);
+    --ambient-1: color-mix(in oklab, var(--sky) 72%, var(--sky-ink));
+    --ambient-2: color-mix(in oklab, var(--mint) 72%, var(--mint-ink));
+    --ambient-3: color-mix(in oklab, var(--lilac) 72%, var(--lilac-ink));
+    --ambient-4: color-mix(in oklab, var(--butter) 72%, var(--butter-ink));
+    --ambient-scrim: rgba(255, 255, 255, 0.28);
     --bg-000: var(--canvas);
     --bg-100: var(--surface);
     --bg-200: var(--surface-sunken);
@@ -752,6 +821,7 @@
     --shadow-lift: 0 2px 4px rgba(20,20,20,0.06), 0 14px 32px rgba(20,20,20,0.10);
     --shadow-float: 0 16px 40px rgba(0,0,0,0.22);
     --shadow-overlay: var(--shadow-float);
+    --shadow-glass: 0 1px 2px rgba(20, 20, 40, 0.06), 0 12px 40px rgba(20, 20, 40, 0.14);
     --button-radius: var(--radius-pill);
     --field-radius: var(--radius-pill);
     --badge-radius: var(--radius-pill);
@@ -761,6 +831,8 @@
     --panel-shadow: var(--shadow-card);
     --panel-pad: var(--space-6);
     --panel-gap: var(--space-4);
+    --glass-filter: blur(24px) saturate(180%) brightness(1.05);
+    --glass-tint: 62%;
     color-scheme: light;
   }
 }
@@ -826,6 +898,20 @@
   --on-frame-danger: #f2a8a0;
   --scrim: rgba(10, 10, 10, 0.32);
   --scrim-strong: rgba(10, 10, 10, 0.38);
+  --glass: color-mix(in srgb, var(--card) 70%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
+  --glass-control: color-mix(in srgb, var(--foreground) 10%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 12%, transparent);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-highlight: rgba(255, 255, 255, 0.18);
+  --glass-sheen: rgba(255, 255, 255, 0.05);
+  --ambient-base: var(--background);
+  --ambient-1: var(--sky);
+  --ambient-2: var(--mint);
+  --ambient-3: var(--lilac);
+  --ambient-4: var(--butter);
+  --ambient-scrim: rgba(10, 10, 10, 0.45);
   --bg-000: var(--canvas);
   --bg-100: var(--surface);
   --bg-200: var(--surface-sunken);
@@ -883,6 +969,7 @@
   --shadow-lift: 0 2px 6px rgba(0,0,0,0.5), 0 14px 32px rgba(0,0,0,0.45);
   --shadow-float: 0 16px 40px rgba(0,0,0,0.6);
   --shadow-overlay: var(--shadow-float);
+  --shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45);
   --button-radius: var(--radius-pill);
   --field-radius: var(--radius-pill);
   --badge-radius: var(--radius-pill);
@@ -892,6 +979,8 @@
   --panel-shadow: var(--shadow-card);
   --panel-pad: var(--space-6);
   --panel-gap: var(--space-4);
+  --glass-filter: blur(24px) saturate(160%) brightness(0.85);
+  --glass-tint: 62%;
   color-scheme: dark;
 }
 :where([data-theme="light"], .light) {
@@ -956,6 +1045,20 @@
   --on-frame-danger: #f2a8a0;
   --scrim: rgba(10, 10, 10, 0.32);
   --scrim-strong: rgba(10, 10, 10, 0.38);
+  --glass: color-mix(in srgb, var(--card) 72%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
+  --glass-control: color-mix(in srgb, var(--card) 62%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
+  --glass-border: rgba(255, 255, 255, 0.6);
+  --glass-highlight: rgba(255, 255, 255, 0.95);
+  --glass-sheen: rgba(255, 255, 255, 0.5);
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--sky) 72%, var(--sky-ink));
+  --ambient-2: color-mix(in oklab, var(--mint) 72%, var(--mint-ink));
+  --ambient-3: color-mix(in oklab, var(--lilac) 72%, var(--lilac-ink));
+  --ambient-4: color-mix(in oklab, var(--butter) 72%, var(--butter-ink));
+  --ambient-scrim: rgba(255, 255, 255, 0.28);
   --bg-000: var(--canvas);
   --bg-100: var(--surface);
   --bg-200: var(--surface-sunken);
@@ -1013,6 +1116,7 @@
   --shadow-lift: 0 2px 4px rgba(20,20,20,0.06), 0 14px 32px rgba(20,20,20,0.10);
   --shadow-float: 0 16px 40px rgba(0,0,0,0.22);
   --shadow-overlay: var(--shadow-float);
+  --shadow-glass: 0 1px 2px rgba(20, 20, 40, 0.06), 0 12px 40px rgba(20, 20, 40, 0.14);
   --button-radius: var(--radius-pill);
   --field-radius: var(--radius-pill);
   --badge-radius: var(--radius-pill);
@@ -1022,6 +1126,8 @@
   --panel-shadow: var(--shadow-card);
   --panel-pad: var(--space-6);
   --panel-gap: var(--space-4);
+  --glass-filter: blur(24px) saturate(180%) brightness(1.05);
+  --glass-tint: 62%;
   color-scheme: light;
 }
 :where([data-density="compact"]) {
@@ -1038,6 +1144,69 @@
   --density-font-size: 14px;
   --density-line-height: 20px;
 }
+:where([data-motion="expressive"]) {
+  --dur-enter: 760ms;
+  --dur-slow: 1300ms;
+  --dur-exit: 220ms;
+  --stagger-step: 90ms;
+  --motion-time: 1.4;
+  --motion-travel: 1.7;
+  --motion-blur: 8px;
+}
+:where([data-motion="off"]) {
+  --duration-fast: 0ms;
+  --duration-base: 0ms;
+  --dur-fast: 0ms;
+  --dur-base: 0ms;
+  --dur-enter: 0ms;
+  --dur-slow: 0ms;
+  --dur-exit: 0ms;
+  --stagger-step: 0ms;
+  --motion-time: 0;
+  --motion-travel: 0;
+  --motion-blur: 0px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(:root, [data-motion], [data-theme]) {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --dur-fast: 0ms;
+    --dur-base: 0ms;
+    --dur-enter: 0ms;
+    --dur-slow: 0ms;
+    --dur-exit: 0ms;
+    --stagger-step: 0ms;
+    --motion-time: 0;
+    --motion-travel: 0;
+    --motion-blur: 0px;
+  }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--glass-strong);
+  }
+}
+@media (prefers-contrast: more) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--glass-strong);
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--card);
+    --glass-strong: var(--popover);
+    --glass-sheen: transparent;
+    --glass-filter: none;
+  }
+}
+@media (forced-colors: active) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--card);
+    --glass-strong: var(--popover);
+    --glass-sheen: transparent;
+    --glass-filter: none;
+  }
+}
 
 /* 01-foundation.css */
 /* Halo components, ported from reference/halo/source/halo.css (ha- → tf-). Every value comes from the tokens. */
@@ -1583,18 +1752,23 @@ select.tf-input {
   box-shadow: none;
 }
 .tf-bg-sky {
+  --tint: var(--sky);
   background: var(--sky);
 }
 .tf-bg-mint {
+  --tint: var(--mint);
   background: var(--mint);
 }
 .tf-bg-lilac {
+  --tint: var(--lilac);
   background: var(--lilac);
 }
 .tf-bg-butter {
+  --tint: var(--butter);
   background: var(--butter);
 }
 .tf-bg-blush {
+  --tint: var(--blush);
   background: var(--blush);
 }
 .tf-bg-surface {
@@ -2016,7 +2190,7 @@ select.tf-input {
 @keyframes tf-rise {
   from {
     opacity: 0;
-    transform: translateY(14px) scale(0.985);
+    transform: translateY(calc(14px * var(--motion-travel))) scale(0.985);
   }
   to {
     opacity: 1;
@@ -2034,7 +2208,7 @@ select.tf-input {
 @keyframes tf-drop {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(calc(-10px * var(--motion-travel)));
   }
   to {
     opacity: 1;
@@ -2044,7 +2218,7 @@ select.tf-input {
 @keyframes tf-slide-in {
   from {
     opacity: 0;
-    transform: translateX(24px);
+    transform: translateX(calc(24px * var(--motion-travel)));
   }
   to {
     opacity: 1;
@@ -2054,7 +2228,8 @@ select.tf-input {
 @keyframes tf-slide-up {
   from {
     opacity: 0;
-    transform: translate(0, 28px) scale(0.9);
+    transform: translate(calc(0px * var(--motion-travel)), calc(28px * var(--motion-travel)))
+      scale(0.9);
   }
   to {
     opacity: 1;
@@ -2113,47 +2288,60 @@ select.tf-input {
 }
 
 .tf-in {
+  --enter-delay: var(--d, 0ms);
   animation: tf-rise var(--dur-enter) var(--ease-out) both;
-  animation-delay: var(--d, 0ms);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > * {
   animation: tf-rise var(--dur-enter) var(--ease-out) both;
 }
 .tf-stagger > :nth-child(1) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 0);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 0);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(2) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 1);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 1);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(3) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 2);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 2);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(4) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 3);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 3);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(5) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 4);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 4);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(6) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 5);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 5);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(7) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 6);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 6);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(8) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 7);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 7);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(9) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 8);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 8);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(10) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 9);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 9);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(11) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 10);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 10);
+  animation-delay: var(--enter-delay);
 }
 .tf-stagger > :nth-child(n + 12) {
-  animation-delay: calc(var(--base, 0ms) + var(--stagger-step) * 11);
+  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 11);
+  animation-delay: var(--enter-delay);
 }
 .tf-topbar {
   animation: tf-drop var(--dur-enter) var(--ease-out) both;
@@ -2163,32 +2351,32 @@ select.tf-input {
 }
 .tf-panel.tf-side {
   animation: tf-slide-in var(--dur-enter) var(--ease-out) both;
-  animation-delay: 160ms;
+  animation-delay: calc(160ms * var(--motion-time));
 }
 .tf-dock {
   animation: tf-slide-up var(--dur-enter) var(--ease-spring) both;
-  animation-delay: 420ms;
+  animation-delay: calc(420ms * var(--motion-time));
 }
 .tf-dock .tf-dock-btn {
   animation: tf-pop var(--dur-base) var(--ease-spring) both;
 }
 .tf-dock .tf-dock-btn:nth-child(1) {
-  animation-delay: 520ms;
+  animation-delay: calc(520ms * var(--motion-time));
 }
 .tf-dock .tf-dock-btn:nth-child(2) {
-  animation-delay: 570ms;
+  animation-delay: calc(570ms * var(--motion-time));
 }
 .tf-dock .tf-dock-btn:nth-child(3) {
-  animation-delay: 620ms;
+  animation-delay: calc(620ms * var(--motion-time));
 }
 .tf-dock .tf-dock-btn:nth-child(4) {
-  animation-delay: 670ms;
+  animation-delay: calc(670ms * var(--motion-time));
 }
 .tf-dock .tf-dock-btn:nth-child(5) {
-  animation-delay: 720ms;
+  animation-delay: calc(720ms * var(--motion-time));
 }
 .tf-dock .tf-dock-btn:nth-child(n + 6) {
-  animation-delay: 770ms;
+  animation-delay: calc(770ms * var(--motion-time));
 }
 .tf-rail-btn {
   animation: tf-pop var(--dur-base) var(--ease-spring) both;
@@ -2225,7 +2413,7 @@ select.tf-input {
 .tf-progress > span {
   transform-origin: left;
   animation: tf-grow-x var(--dur-slow) var(--ease-out) both;
-  animation-delay: 200ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(200ms * var(--motion-time)));
 }
 
 /* Sliding tab indicator */
@@ -2304,6 +2492,7 @@ select.tf-input {
   transform-box: fill-box;
   transform-origin: bottom;
   animation: tf-grow-y var(--dur-slow) var(--ease-out) both;
+  animation-delay: var(--enter-delay, 0ms);
 }
 .tf-bar-ink {
   fill: var(--primary);
@@ -2331,7 +2520,7 @@ select.tf-input {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
   animation: tf-draw var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 150ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(150ms * var(--motion-time)));
 }
 .tf-line-ink {
   stroke: var(--primary);
@@ -2354,7 +2543,7 @@ select.tf-input {
 .tf-area {
   opacity: 0;
   animation: tf-fade var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 500ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(500ms * var(--motion-time)));
 }
 .tf-area-sky {
   fill: var(--sky);
@@ -2375,7 +2564,7 @@ select.tf-input {
   fill: var(--surface);
   stroke-width: 2.5;
   animation: tf-pop var(--dur-base) var(--ease-spring) both;
-  animation-delay: 900ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(900ms * var(--motion-time)));
   transform-box: fill-box;
   transform-origin: center;
 }
@@ -2804,6 +2993,19 @@ select.tf-input {
   }
 }
 
+/* the same for an app that turns motion off: data-motion="off" */
+[data-motion="off"] *,
+[data-motion="off"] *::before,
+[data-motion="off"] *::after {
+  animation-duration: 1ms !important;
+  animation-delay: 0ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 1ms !important;
+}
+[data-motion="off"] .tf-line {
+  stroke-dashoffset: 0;
+}
+
 /* ───────── Refinements ───────── */
 .tf-nav-label {
   white-space: nowrap;
@@ -2835,7 +3037,7 @@ select.tf-input {
 .tf-area {
   opacity: 0;
   animation: tf-area-in var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 500ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(500ms * var(--motion-time)));
 }
 @keyframes tf-area-in {
   to {
@@ -3397,7 +3599,7 @@ select.tf-input {
 }
 @keyframes tf-drawer-in {
   from {
-    transform: translateX(40px);
+    transform: translateX(calc(40px * var(--motion-travel)));
     opacity: 0;
   }
   to {
@@ -5372,6 +5574,7 @@ label.tf-menu-item {
   transform-box: fill-box;
   transform-origin: bottom;
   animation: tf-grow-y var(--dur-slow) var(--ease-out) both;
+  animation-delay: var(--enter-delay, 0ms);
   transition: opacity var(--dur-fast);
 }
 .tf-chart g.dim .tf-seg-bar {
@@ -5417,7 +5620,7 @@ label.tf-menu-item {
 .tf-area2 {
   opacity: 0;
   animation: tf-area2-in var(--dur-slow) var(--ease-out) forwards;
-  animation-delay: 400ms;
+  animation-delay: calc(var(--enter-delay, 0ms) + calc(400ms * var(--motion-time)));
 }
 @keyframes tf-area2-in {
   to {
@@ -5654,6 +5857,18 @@ label.tf-menu-item {
     display: none;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+[data-motion="off"] .tf-seg-bar,
+[data-motion="off"] .tf-area2,
+[data-motion="off"] .tf-heat-cell,
+[data-motion="off"] .tf-tooltip,
+[data-motion="off"] .tf-popover {
+  animation: none !important;
+  opacity: 1;
+}
+[data-motion="off"] .tf-toast-timer {
+  display: none;
+}
 @media (max-width: 640px) {
   .tf-dp {
     flex-direction: column;
@@ -7422,6 +7637,14 @@ label.tf-menu-item {
     animation: none !important;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+[data-motion="off"] .tf-msg,
+[data-motion="off"] .tf-caret,
+[data-motion="off"] .tf-typing i,
+[data-motion="off"] .tf-spin,
+[data-motion="off"] .tf-reason.live .tf-reason-head {
+  animation: none !important;
+}
 
 /* 04-status-agents-operations.css */
 /* ════════ Kit 4: status shapes, approvals A–D, foundations, agent & operations ════════ */
@@ -9592,6 +9815,13 @@ label.tf-menu-item {
     animation: none !important;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+[data-motion="off"] .tf-shape-pulse,
+[data-motion="off"] .tf-voice-wave i,
+[data-motion="off"] .tf-stage.st-running::after,
+[data-motion="off"] .tf-log-line.fresh {
+  animation: none !important;
+}
 .tf-approval-mail {
   padding: 12px 16px;
   border-radius: var(--radius-md);
@@ -9946,7 +10176,7 @@ label.tf-menu-item {
 @keyframes tf-fresh {
   0% {
     background: var(--surface-sunken);
-    transform: translateY(-4px);
+    transform: translateY(calc(-4px * var(--motion-travel)));
     opacity: 0;
   }
   15% {
@@ -11850,6 +12080,13 @@ button.tf-runs-main[aria-expanded]:hover {
     animation: none;
   }
 }
+/* the same for an app that turns motion off: data-motion="off" */
+[data-motion="off"] .tf-live-dot,
+[data-motion="off"] .tf-map-bubble.pulse::after,
+[data-motion="off"] .tf-map-pin.pulse::after,
+[data-motion="off"] .tf-livefeed-row.fresh {
+  animation: none;
+}
 .tf-map-world {
   position: absolute;
   inset: 0;
@@ -12099,6 +12336,8 @@ button.tf-runs-main[aria-expanded]:hover {
 }
 .tf-togglegroup {
   display: inline-flex;
+  flex-wrap: wrap;
+  width: fit-content;
   align-items: center;
   gap: 4px;
   padding: 4px;
@@ -12761,19 +13000,19 @@ button.tf-runs-main[aria-expanded]:hover {
 @keyframes tf-sheet-left {
   from {
     opacity: 0;
-    transform: translateX(-24px);
+    transform: translateX(calc(-24px * var(--motion-travel)));
   }
 }
 @keyframes tf-sheet-top {
   from {
     opacity: 0;
-    transform: translateY(-24px);
+    transform: translateY(calc(-24px * var(--motion-travel)));
   }
 }
 @keyframes tf-sheet-bottom {
   from {
     opacity: 0;
-    transform: translateY(24px);
+    transform: translateY(calc(24px * var(--motion-travel)));
   }
 }
 
@@ -13501,3 +13740,514 @@ textarea.tf-input,
 .tf-tabs {
   box-sizing: border-box;
 }
+
+/* 08-glass.css */
+/* Glass: translucent surfaces for UI that floats over content (maps, 3D scenes, video, photos).
+ *
+ * A glass surface shows a blurred, colour-lifted view of what is behind it, with a light edge on
+ * top. What sits on it reads the glass tokens too (inputs, chips, tab tracks, hover highlights,
+ * nested cards), so the surface stays one piece of glass instead of opaque blocks on glass.
+ *
+ * - `.tf-glass` (the `surface="glass"` prop) makes one surface glass.
+ * - `[data-surface="glass"]` (`<UIProvider surface="glass">`) makes every top-level surface and
+ *   every floating layer inside it glass. Surfaces nested in a surface stay clear instead of
+ *   stacking glass on glass; `.tf-solid` (`surface="solid"`) opts one surface out.
+ *
+ * Floating layers (menus, popovers, dialogs, drawers) use the stronger `--glass-strong` fill: they
+ * carry more text. The fills are opaque enough for 4.5:1 body text over any backdrop; reduced
+ * transparency, high contrast and forced colours fall back to solid surfaces.
+ */
+
+/* the surface itself */
+.tf-glass:not(.tf-solid),
+[data-surface="glass"]
+  :is(
+    .tf-panel,
+    .tf-card,
+    .tf-stat,
+    .tf-dock,
+    .tf-sidebar,
+    .tf-map-legend,
+    .tf-map-ctl,
+    .tf-map-pop
+  ):not(
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-stat,
+        .tf-dock,
+        .tf-sidebar,
+        .tf-popover,
+        .tf-menu,
+        .tf-hovercard,
+        .tf-selectmenu-list,
+        .tf-navmenu-panel,
+        .tf-palette,
+        .tf-modal,
+        .tf-drawer,
+        .tf-glass
+      )
+      *
+  ):not(.tf-solid),
+[data-surface="glass"]
+  :is(
+    .tf-popover,
+    .tf-menu:not(.tf-menu-static),
+    .tf-hovercard,
+    .tf-selectmenu-list,
+    .tf-navmenu-panel,
+    .tf-palette,
+    .tf-modal,
+    .tf-drawer
+  ):not(.tf-solid) {
+  --glass-fill: var(--glass);
+  background:
+    linear-gradient(to bottom, var(--glass-sheen), transparent 56px) border-box,
+    linear-gradient(var(--glass-tinted), var(--glass-tinted)) border-box,
+    var(--glass-fill);
+  --glass-tinted: color-mix(in srgb, var(--tint, transparent) var(--glass-tint), transparent);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
+  border-color: var(--glass-border);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-highlight),
+    inset 0 0 0 1px var(--glass-border),
+    var(--shadow-glass);
+  color: var(--foreground);
+  /* what sits on the glass */
+  --surface: var(--glass-control);
+  --secondary: var(--glass-control);
+  --bg-100: var(--glass-control);
+  --surface-sunken: var(--glass-well);
+  --muted: var(--glass-well);
+  --canvas: var(--glass-well);
+  --bg-200: var(--glass-well);
+  --accent: var(--glass-hover);
+  --bg-300: var(--glass-hover);
+  /* the faintest text steps up one shade: glass gives up some contrast to what is behind */
+  --ink-subtle: var(--muted-foreground);
+  --fg-300: var(--muted-foreground);
+}
+
+/* floating layers carry more text: a stronger fill */
+:is(
+  .tf-popover,
+  .tf-menu,
+  .tf-hovercard,
+  .tf-selectmenu-list,
+  .tf-navmenu-panel,
+  .tf-palette,
+  .tf-modal,
+  .tf-drawer
+).tf-glass,
+[data-surface="glass"]
+  :is(
+    .tf-popover,
+    .tf-menu:not(.tf-menu-static),
+    .tf-hovercard,
+    .tf-selectmenu-list,
+    .tf-navmenu-panel,
+    .tf-palette,
+    .tf-modal,
+    .tf-drawer
+  ):not(.tf-solid) {
+  --glass-fill: var(--glass-strong);
+}
+
+/* Controls floating on their own (not on a surface) become small glass pills: a search field or
+   zoom buttons over a map */
+[data-surface="glass"]
+  :is(
+    .tf-search,
+    .tf-seg,
+    .tf-btngroup,
+    .tf-iconbtn-soft,
+    .tf-iconbtn-outline,
+    .tf-btn-secondary,
+    .tf-chip:not([aria-pressed="true"])
+  ):not(
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-dock,
+        .tf-popover,
+        .tf-menu,
+        .tf-hovercard,
+        .tf-selectmenu-list,
+        .tf-navmenu-panel,
+        .tf-palette,
+        .tf-modal,
+        .tf-drawer,
+        .tf-glass,
+        .tf-btngroup,
+        .tf-map-ctl,
+        .tf-topbar
+      )
+      *
+  ):not(.tf-solid) {
+  background:
+    linear-gradient(to bottom, var(--glass-sheen), transparent) border-box,
+    var(--glass);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-highlight),
+    inset 0 0 0 1px var(--glass-border),
+    var(--shadow-glass);
+  color: var(--foreground);
+  --surface: var(--glass-control);
+  --secondary: var(--glass-control);
+  --surface-sunken: var(--glass-well);
+  --bg-200: var(--glass-well);
+  --accent: var(--glass-hover);
+  --bg-300: var(--glass-hover);
+}
+[data-surface="glass"]
+  :is(.tf-iconbtn-soft, .tf-iconbtn-outline, .tf-btn-secondary, .tf-chip):not(
+    :is(.tf-panel, .tf-card, .tf-dock, .tf-popover, .tf-menu, .tf-modal, .tf-drawer, .tf-glass) *
+  ):not(.tf-solid):not([aria-pressed="true"]):hover {
+  background:
+    linear-gradient(var(--glass-hover), var(--glass-hover)) border-box,
+    var(--glass);
+}
+
+/* AppShell on glass: the same layout as the solid shell, the frame turned to glass. Top bar and
+   rail sit on it without a fill of their own, the sheet clears so the backdrop shows through,
+   and everything drawn on the frame (nav, user, rail) reads the glass colours */
+[data-surface="glass"] .tf-shell {
+  background:
+    linear-gradient(to bottom, var(--glass-sheen), transparent 56px) border-box,
+    var(--glass);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
+  box-shadow:
+    inset 0 1px 0 0 var(--glass-highlight),
+    inset 0 0 0 1px var(--glass-border),
+    var(--shadow-glass);
+  --frame: var(--glass);
+  --frame-hover: var(--glass-hover);
+  --frame-active: var(--glass-hover);
+  --frame-strong: var(--glass-control);
+  --on-frame: var(--foreground);
+  --on-frame-muted: var(--muted-foreground);
+}
+[data-surface="glass"] .tf-shell .tf-sheet {
+  background: transparent;
+}
+[data-surface="glass"] .tf-shell .tf-topbar {
+  background: transparent;
+}
+
+/* switch knobs stay solid on glass */
+.tf-glass .tf-switch::after,
+[data-surface="glass"] .tf-switch::after {
+  background: var(--card);
+}
+
+/* Reduced transparency, more contrast, forced colours and browsers without backdrop blur switch
+   the glass tokens themselves (see tokens.css). Forced colours drop shadows, so glass keeps an
+   edge there. */
+@media (forced-colors: active) {
+  .tf-glass,
+  [data-surface="glass"]
+    :is(
+      .tf-panel,
+      .tf-card,
+      .tf-stat,
+      .tf-dock,
+      .tf-sidebar,
+      .tf-map-legend,
+      .tf-map-ctl,
+      .tf-map-pop
+    ) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+/* FloatingLayout: UI along the edges of a full-bleed background */
+.tf-floating {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  border-radius: var(--radius-lg);
+  background: var(--surface-sunken);
+  container: tf-floating / inline-size;
+}
+.tf-floating-bg {
+  position: absolute;
+  inset: 0;
+}
+.tf-floating-bg > * {
+  width: 100%;
+  height: 100%;
+}
+.tf-floating-ui {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 340px);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "top top top"
+    "start . end"
+    "bottom bottom bottom";
+  gap: var(--space-4);
+  padding: var(--space-4);
+  overflow-y: auto;
+  /* the background stays usable between the slots */
+  pointer-events: none;
+}
+.tf-floating-ui > * {
+  pointer-events: auto;
+  min-width: 0;
+}
+.tf-floating-top {
+  grid-area: top;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+.tf-floating-start {
+  grid-area: start;
+  align-self: start;
+}
+.tf-floating-end {
+  grid-area: end;
+  align-self: start;
+}
+.tf-floating-bottom {
+  grid-area: bottom;
+  justify-self: center;
+}
+.tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
+  pointer-events: none;
+}
+.tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) > * {
+  pointer-events: auto;
+}
+@container tf-floating (max-width: 720px) {
+  /* on a phone the layout grows with its slots and the background fills behind them */
+  .tf-floating-ui {
+    position: relative;
+    min-height: inherit;
+    overflow: visible;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(120px, 1fr) auto auto;
+    grid-template-areas:
+      "top"
+      "start"
+      "."
+      "end"
+      "bottom";
+    gap: var(--space-3);
+    padding: var(--space-3);
+  }
+}
+
+/* 09-motion.css */
+/* Motion: leaving layers, reveal on scroll, page transitions, the expressive level.
+ *
+ * Levels come from `data-motion` (tokens.css): "standard", "expressive" (longer, staggered page
+ * entrances, more travel) and "off". The reader's reduced-motion setting always means off. Only
+ * transform, opacity and (expressive Halo) a short blur move; everything else stays put.
+ */
+
+/* ── Leaving: layers animate out for --dur-exit, then unmount (usePresence) ── */
+@keyframes tf-out {
+  to {
+    opacity: 0;
+    translate: 0 calc(6px * var(--motion-travel));
+    scale: 0.98;
+  }
+}
+@keyframes tf-out-fade {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes tf-out-right {
+  to {
+    opacity: 0;
+    translate: calc(40px * var(--motion-travel)) 0;
+  }
+}
+@keyframes tf-out-left {
+  to {
+    opacity: 0;
+    translate: calc(-40px * var(--motion-travel)) 0;
+  }
+}
+@keyframes tf-out-up {
+  to {
+    opacity: 0;
+    translate: 0 calc(-40px * var(--motion-travel));
+  }
+}
+@keyframes tf-out-down {
+  to {
+    opacity: 0;
+    translate: 0 calc(16px * var(--motion-travel));
+  }
+}
+[data-closing] {
+  pointer-events: none;
+}
+.tf-popover[data-closing],
+.tf-hovercard[data-closing],
+.tf-modal-wrap[data-closing] .tf-modal,
+.tf-overlay[data-closing] :is(.tf-modal, .tf-confirm),
+.tf-palette-wrap[data-closing] .tf-palette {
+  animation: tf-out var(--dur-exit) var(--ease-in-out) forwards;
+}
+.tf-tooltip[data-closing],
+.tf-modal-wrap[data-closing] .tf-backdrop,
+.tf-overlay[data-closing] .tf-backdrop,
+.tf-palette-wrap[data-closing],
+.tf-drawer-wrap[data-closing] {
+  animation: tf-out-fade var(--dur-exit) var(--ease-in-out) forwards;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer {
+  animation: tf-out-right var(--dur-exit) var(--ease-in-out) forwards;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer.side-left {
+  animation-name: tf-out-left;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer.side-top {
+  animation-name: tf-out-up;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer.side-bottom,
+.tf-toast[data-closing] {
+  animation: tf-out-down var(--dur-exit) var(--ease-in-out) forwards;
+}
+
+/* ── Reveal: a Stagger below the fold waits until it scrolls into view ── */
+.tf-stagger[data-reveal="waiting"] > *,
+.tf-stagger[data-reveal="waiting"] > * * {
+  animation-play-state: paused;
+}
+
+/* ── Page transitions (startViewTransition, Next.js and React view transitions) ── */
+@keyframes tf-vt-out {
+  to {
+    opacity: 0;
+    translate: 0 calc(-6px * var(--motion-travel));
+  }
+}
+@keyframes tf-vt-in {
+  from {
+    opacity: 0;
+    translate: 0 calc(10px * var(--motion-travel));
+  }
+}
+:root::view-transition-old(root) {
+  animation: tf-vt-out var(--dur-base) var(--ease-in-out) both;
+}
+:root::view-transition-new(root) {
+  animation: tf-vt-in var(--dur-enter) var(--ease-out) both;
+}
+
+/* ── Expressive: things come into focus as they rise (Halo; Pro keeps a blur of 0) ── */
+@keyframes tf-focus-in {
+  from {
+    filter: blur(var(--motion-blur));
+  }
+  to {
+    filter: none;
+  }
+}
+[data-motion="expressive"] :is(.tf-stagger > *, .tf-in) {
+  animation-name: tf-rise, tf-focus-in;
+}
+[data-motion="expressive"] .tf-topbar {
+  animation-name: tf-drop, tf-focus-in;
+}
+
+/* 10-ambient.css */
+/* Ambient: a calm, living background for glass UI. Soft colour fields from the kit (pastels in
+ * Halo, a faint aurora in Pro) drift slowly; a photo or video can take their place under a scrim.
+ * The drift only moves (transform), stops with motion off and pauses off screen.
+ */
+:where(:has(> .tf-ambient:not(.fixed))) {
+  position: relative;
+  isolation: isolate;
+}
+.tf-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  background: var(--ambient-base);
+  pointer-events: none;
+}
+.tf-ambient.fixed {
+  position: fixed;
+}
+.tf-ambient-field {
+  position: absolute;
+  width: 75%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, var(--field), transparent);
+  animation: tf-ambient-drift 34s var(--ease-in-out) infinite alternate;
+}
+.tf-ambient-field:nth-child(1) {
+  top: -30%;
+  left: -15%;
+}
+.tf-ambient-field:nth-child(2) {
+  top: -10%;
+  right: -25%;
+  animation-duration: 41s;
+  animation-direction: alternate-reverse;
+}
+.tf-ambient-field:nth-child(3) {
+  bottom: -35%;
+  left: 10%;
+  animation-duration: 47s;
+}
+.tf-ambient-field:nth-child(4) {
+  bottom: -25%;
+  right: -10%;
+  animation-duration: 38s;
+  animation-direction: alternate-reverse;
+}
+.tf-ambient-field:nth-child(n + 5) {
+  top: 20%;
+  left: 30%;
+  width: 55%;
+  animation-duration: 52s;
+}
+@keyframes tf-ambient-drift {
+  to {
+    translate: 12% 9%;
+    scale: 1.15;
+  }
+}
+.tf-ambient.still .tf-ambient-field,
+.tf-ambient[data-paused] .tf-ambient-field {
+  animation-play-state: paused;
+}
+.tf-ambient-media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.tf-ambient.media::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--ambient-scrim);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tf-ambient-field {
+    animation: none;
+  }
+}
+[data-motion="off"] .tf-ambient-field {
+  animation: none;
+}