@fluid-theme/core 0.4.3 → 2.1.0

package/fluid-agent-kit/skills/preset-composition.md

@@ -0,0 +1,108 @@
+# Preset Composition — Per-Preset Layout DNA
+
+> **Superseded (2026-10-23, Pass 0).** This describes the preset/palette system, which was removed. What the theme is now, and its knobs: [`_docs/STATUS.md`](../../_docs/STATUS.md). Kept as history.
+
+When building a page with Fluid, the active `data-preset` is a COMPLETE design decision: it drives which layouts and arrangements you compose, not just colors and fonts. This skill maps each preset to the compositions that suit it.
+
+Full preset reference: `_docs/theming-guide.md` ("Visual Presets in Depth").
+
+## The Two Mechanisms
+
+**1. Runtime arrangement — `data-arrange="auto"`** (opt-in, on `.hero` and `.features`):
+
+- `.hero` — requires flat markup: `hero__headline`, `hero__subheadline`, `hero__actions`, optional `hero__media` as **direct children** (no `hero__content` wrapper). The preset then remaps the arrangement via `grid-template-areas`. `data-arrange` wins over `data-layout`.
+- `.features` — the preset remaps the grid's shape and density.
+
+| Preset | Hero signature | Features signature |
+|--------|----------------|--------------------|
+| **still** | Swiss left rail + asymmetric void | Ruled hairline grid |
+| **serene** | Editorial offset: full-width headline, copy hangs right | Single literary column |
+| **rapids** | Poster split: giant headline left, caption column right | Dense 4-up |
+| **tsunami** | Cinema poster: bottom-anchored massive headline, subheadline as kicker | Monumental 2-up |
+| **flowing / stream / cascade** | Centered classic stack | Default responsive card grid |
+
+**2. Composition-time choices (the important one)**: when generating page markup for a given preset, CHOOSE section variants, hero `data-layout` (`center` / `split` / `split-reverse`), grid densities, and content order that match the preset's layout DNA below. This applies to ALL sections — not just the two with `data-arrange`.
+
+## Layout DNA
+
+| Preset | Canvas | Section rhythm | Hero to prefer | Grid density | Alignment bias |
+|--------|--------|----------------|----------------|--------------|----------------|
+| **still** | Focused 768px column | 32px, tight | Left-rail split, restrained size | Compact, ruled | Flush left |
+| **serene** | 42rem literary column | 144px intervals | Full-width serif headline + offset deck | Single column | Centered, unboxed |
+| **stream** | 1536px wide canvas | 64px | Wide split | 3–4 col cards | Left, horizontal |
+| **flowing** | 1280px | 80px | Balanced centered | 3-up | Centered |
+| **cascade** | 1280px | 64px | Friendly centered | Generous cards | Centered |
+| **rapids** | 1536px | 32px, dense | Poster split, oversized type | Dense 4-up | Hard left |
+| **tsunami** | Full width | 96px cinematic | Full-bleed, bottom-anchored | Monumental 2-up | Left, bottom-anchored |
+
+### still — Swiss precision
+
+Mono grayscale default palette, system fonts, restrained display sizes, left-aligned Swiss grid, hairline rules.
+
+- DO: compact tables and ruled grids; flush-left headlines; 2-col asymmetric splits with deliberate void
+- DON'T: centered hero copy; decorative gradients; pill shapes
+
+### serene — literary calm
+
+Large graceful serif display, morandi default palette (dusty lavender accent), extravagant whitespace.
+
+- DO: single-column flows; generous stacked sections; full-width serif headline with offset deck; centered unboxed feature lists
+- DON'T: packed multi-column grids; dense dashboards
+
+### stream — tech-forward
+
+Plus Jakarta Sans, fluid deep-teal accent, professional and balanced.
+
+- DO: wide split heroes; 3–4 col card grids; horizontal nav emphasis; dashboard patterns
+- DON'T: narrow editorial columns
+
+### flowing — the versatile default
+
+Outfit/DM Sans, brand medium-blue accent. Balanced centered heroes, 3-up grids — the reference point when no other DNA applies.
+
+### cascade — warm and bubbly
+
+Nunito, bold vivid-purple accent, maximum roundness.
+
+- DO: friendly centered layouts; generous card grids; pill buttons
+- DON'T: sharp-edged dense tables
+
+### rapids — bold poster energy
+
+Syne/Space Grotesk at 800–900 weight, electric coral accent, oversized display type.
+
+- DO: poster splits; dense 4-up packs; tight rhythm; hard offset shadows
+- DON'T: airy whitespace; serif elegance
+
+### tsunami — cinematic maximum
+
+Bebas Neue massive display (hero headlines up to 6.5rem), storm-teal accent, asymmetric corners.
+
+- DO: full-bleed bottom-anchored heroes; monumental 2-up grids; kicker-above-headline patterns
+- DON'T: small centered cards; subtle anything
+
+### Identity presets
+
+- **editorial** — extreme-whitespace serif essay (38rem column, 8rem sections): single-column prose only
+- **brutalist** — monospace ruled rawness: hard borders, raw grids, zero decoration
+- **neon** — dark glowing cyberpunk: dark surfaces, glow shadows, high-tech density
+
+## Default Palettes
+
+Each water preset ships a default palette family + accent, so switching presets changes the color mood too:
+
+| Preset | Family | Default accent |
+|--------|--------|----------------|
+| still | mono | grayscale slate |
+| serene | morandi | dusty lavender |
+| stream | fluid | deep teal |
+| flowing | fluid | brand medium blue |
+| cascade | bold | vivid purple |
+| rapids | bold | electric coral |
+| tsunami | tsunami | storm teal |
+
+Explicit `data-palette` / `data-accent` always override. Do NOT add a `data-palette` unless the user asks for a specific color mood — the default family is part of the preset's design.
+
+## Never Mix DNA
+
+Never mix arrangement DNA across presets on one page. If the user's content fights the preset's DNA (e.g., a dense data table on serene), keep the preset's rhythm and adapt the section — or suggest a better-suited preset. Do not import another preset's arrangement to solve it.

package/package.json

@@ -1,15 +1,30 @@
 {
   "name": "@fluid-theme/core",
-  "version": "0.4.3",
+  "version": "2.1.0",
   "description": "A modern, semantic CSS design system built on physics principles — not utility classes",
   "main": "dist/fluid.min.css",
   "style": "dist/fluid.min.css",
   "exports": {
     ".": "./dist/fluid.min.css",
+    "./zero": "./dist/fluid-zero.min.css",
+    "./fonts": "./dist/fluid-fonts.min.css",
+    "./fonts-archivo": "./dist/fluid-fonts-archivo.min.css",
+    "./fonts-bodoni": "./dist/fluid-fonts-bodoni.min.css",
+    "./legacy-1x": "./dist/fluid-legacy-1x.css",
+    "./1x": "./dist/fluid-1x.min.css",
+    "./toc": "./dist/fluid-toc.min.css",
+    "./nav": "./dist/fluid-nav.min.css",
+    "./toc-build": "./assets/js/toc-build.mjs",
+    "./themes/swiss": "./themes/swiss.css",
+    "./themes/gallery": "./themes/gallery.css",
+    "./themes/*": "./themes/*",
     "./src": "./src/fluid.css"
   },
   "files": [
     "dist/",
+    "themes/",
+    "starters/workflows/",
+    "assets/js/",
     "src/",
     "fluid-agent-kit/",
     "CLAUDE.md",
@@ -24,7 +39,14 @@
     "build": "node scripts/build-css.mjs",
     "prepublishOnly": "npm run build",
     "optimize-images": "node scripts/optimize-images.js",
-    "test": "echo \"Visual testing only - open examples/foundation.html in browser\""
+    "test:reveal": "node scripts/reveal-check.mjs",
+    "test:forms": "node scripts/form-check.mjs",
+    "test:axe": "node scripts/axe-check.mjs",
+    "test:focus": "node scripts/focus-check.mjs",
+    "test:toc": "node scripts/toc-check.mjs",
+    "test:nav": "node scripts/nav-check.mjs",
+    "test": "echo \"Visual testing only - open examples/foundation.html in browser\"",
+    "test:zero": "node scripts/visual-scan.mjs scripts/fixtures/zero.html && node scripts/axe-check.mjs --pages scripts/fixtures/zero.html && node scripts/focus-check.mjs --page scripts/fixtures/zero.html"
   },
   "keywords": [
     "css",
@@ -48,21 +70,24 @@
     "url": "https://github.com/Agile-Media-Agency/the-fluid-theme/issues"
   },
   "homepage": "https://thefluidtheme.com",
-  "engines": {
-    "browsers": [
-      "last 2 Chrome versions",
-      "last 2 Firefox versions",
-      "last 2 Safari versions",
-      "last 2 Edge versions"
-    ]
-  },
   "browserslist": [
     "supports css-cascade-layers",
     "supports css-container-queries",
     "supports css-logical-properties"
   ],
   "devDependencies": {
+    "@capsizecss/core": "^4.1.3",
+    "@capsizecss/metrics": "^4.4.0",
+    "@fontsource-variable/newsreader": "^5.3.0",
+    "@fontsource-variable/schibsted-grotesk": "^5.3.0",
+    "axe-core": "^4.11.1",
+    "lighthouse": "^13.0.3",
     "lightningcss": "^1.32.0",
-    "sharp": "^0.34.5"
+    "playwright": "^1.64.1",
+    "puppeteer": "^24.40.0",
+    "sharp": "^0.35.5"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/animations/scroll-reveal.css

@@ -1,8 +1,11 @@
 /**
- * Scroll Reveal Animations
+ * Scroll Reveal Animations (opt-in)
  *
- * Add [data-reveal] attribute to elements you want to animate in on scroll.
- * Works with the scroll-reveal.js script or CSS-only with animation-timeline.
+ * Only elements that carry [data-reveal] ever animate, and only once
+ * assets/js/scroll-reveal.js has set data-reveal-ready on <html>. Without
+ * the script, with scripting off, or with reduced motion asked for, nothing
+ * is hidden: the hidden start state exists only under all three conditions.
+ * A bare .section is never hidden (that blanked the stack's pages, #61).
  *
  * Variants:
  *   data-reveal="fade"      - Fade in
@@ -16,209 +19,88 @@
  * Timing:
  *   data-reveal-delay="100" - Delay in ms (100, 200, 300, 400, 500)
  *   data-reveal-duration="slow" - Duration (fast, normal, slow)
+ *   data-reveal-stagger on a parent staggers its [data-reveal] children
  */
 
 @layer components {
-  /* Base reveal state - hidden by default */
-  [data-reveal] {
-    opacity: 0;
-    transition:
-      opacity var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, cubic-bezier(0.16, 1, 0.3, 1)),
-      transform var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, cubic-bezier(0.16, 1, 0.3, 1)),
-      filter var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, cubic-bezier(0.16, 1, 0.3, 1));
-    will-change: opacity, transform;
-  }
-
-  /* Revealed state */
-  [data-reveal].revealed,
-  [data-reveal][data-revealed] {
-    opacity: 1;
-    transform: none;
-    filter: none;
-  }
-
-  /* Fade variants - starting positions */
-  [data-reveal="fade-up"] {
-    transform: translateY(2rem);
-  }
-
-  [data-reveal="fade-down"] {
-    transform: translateY(-2rem);
-  }
-
-  [data-reveal="fade-left"] {
-    transform: translateX(2rem);
-  }
-
-  [data-reveal="fade-right"] {
-    transform: translateX(-2rem);
-  }
-
-  [data-reveal="scale"] {
-    transform: scale(0.95);
-  }
-
-  [data-reveal="blur"] {
-    filter: blur(8px);
-  }
-
-  /* Delays */
-  [data-reveal-delay="100"] { transition-delay: 100ms; }
-  [data-reveal-delay="200"] { transition-delay: 200ms; }
-  [data-reveal-delay="300"] { transition-delay: 300ms; }
-  [data-reveal-delay="400"] { transition-delay: 400ms; }
-  [data-reveal-delay="500"] { transition-delay: 500ms; }
-
-  /* Durations */
-  [data-reveal-duration="fast"] { --reveal-duration: var(--duration-fast); }
-  [data-reveal-duration="normal"] { --reveal-duration: var(--duration-slow); }
-  [data-reveal-duration="slow"] { --reveal-duration: var(--duration-slower); }
-
-  /* Stagger children - useful for grids and lists */
-  [data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: calc(var(--reveal-stagger, 100ms) * 0); }
-  [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: calc(var(--reveal-stagger, 100ms) * 1); }
-  [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: calc(var(--reveal-stagger, 100ms) * 2); }
-  [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: calc(var(--reveal-stagger, 100ms) * 3); }
-  [data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: calc(var(--reveal-stagger, 100ms) * 4); }
-  [data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: calc(var(--reveal-stagger, 100ms) * 5); }
-  [data-reveal-stagger] > [data-reveal]:nth-child(7) { transition-delay: calc(var(--reveal-stagger, 100ms) * 6); }
-  [data-reveal-stagger] > [data-reveal]:nth-child(8) { transition-delay: calc(var(--reveal-stagger, 100ms) * 7); }
-
-  /* ========================================
-     AUTO-REVEAL BY MOTION STYLE
-     Sections auto-animate based on theme motion setting
-     ======================================== */
-
-  /* Still: No animations */
-  [data-motion="still"] [data-reveal] {
-    opacity: 1;
-    transform: none;
-    filter: none;
-    transition: none;
-  }
-
-  /* Serene: Very slow, gentle fade */
-  [data-motion="serene"] [data-reveal] {
-    --reveal-duration: var(--duration-slower);
-    --reveal-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-
-  [data-motion="serene"] .section:not([data-reveal]) {
-    opacity: 0;
-    transform: scale(1.02);
-    transition:
-      opacity var(--duration-slowest) cubic-bezier(0.25, 0.1, 0.25, 1),
-      transform var(--duration-slowest) cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-
-  [data-motion="serene"] .section:not([data-reveal]).revealed {
-    opacity: 1;
-    transform: none;
-  }
-
-  /* Stream: Gentle horizontal flow */
-  [data-motion="stream"] [data-reveal] {
-    --reveal-duration: var(--duration-slow);
-    --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  [data-motion="stream"] .section:not([data-reveal]) {
-    opacity: 0;
-    transform: translateX(-1rem);
-    transition:
-      opacity var(--duration-slow) cubic-bezier(0.22, 1, 0.36, 1),
-      transform var(--duration-slow) cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  [data-motion="stream"] .section:not([data-reveal]).revealed {
-    opacity: 1;
-    transform: none;
-  }
-
-  /* Flowing: Smooth ease-in-out, organic */
-  [data-motion="flowing"] [data-reveal] {
-    --reveal-duration: var(--duration-slow);
-    --reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  [data-motion="flowing"] .section:not([data-reveal]) {
-    opacity: 0;
-    transform: translateY(1.5rem);
-    transition:
-      opacity var(--duration-slow) cubic-bezier(0.16, 1, 0.3, 1),
-      transform var(--duration-slow) cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  [data-motion="flowing"] .section:not([data-reveal]).revealed {
-    opacity: 1;
-    transform: none;
-  }
+  @media (prefers-reduced-motion: no-preference) {
+    /* Hidden start state: the script is running and the element has not
+       been revealed yet. */
+    /* Headlines never animate in. A bare data-reveal rises 12px and fades. */
+    :root[data-reveal-ready] [data-reveal]:not(.revealed, [data-revealed], h1, h2, h3, .display, .hero__headline) {
+      opacity: 0;
+    }
 
-  /* Cascade: Medium energy, waterfall effect */
-  [data-motion="cascade"] [data-reveal] {
-    --reveal-duration: var(--duration-normal);
-    --reveal-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
+    :root[data-reveal-ready] [data-reveal=""]:not(.revealed, [data-revealed], h1, h2, h3, .display, .hero__headline) {
+      translate: 0 12px;
+    }
 
-  [data-motion="cascade"] .section:not([data-reveal]) {
-    opacity: 0;
-    transform: translateY(2rem);
-    transition:
-      opacity var(--duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1),
-      transform var(--duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
+    :root[data-reveal-ready] [data-reveal="fade-up"]:not(.revealed, [data-revealed]) {
+      transform: translateY(2rem);
+    }
 
-  [data-motion="cascade"] .section:not([data-reveal]).revealed {
-    opacity: 1;
-    transform: none;
-  }
+    :root[data-reveal-ready] [data-reveal="fade-down"]:not(.revealed, [data-revealed]) {
+      transform: translateY(-2rem);
+    }
 
-  /* Rapids: Fast, direct */
-  [data-motion="rapids"] [data-reveal] {
-    --reveal-duration: var(--duration-fast);
-    --reveal-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
+    :root[data-reveal-ready] [data-reveal="fade-left"]:not(.revealed, [data-revealed]) {
+      transform: translateX(2rem);
+    }
 
-  [data-motion="rapids"] .section:not([data-reveal]) {
-    opacity: 0;
-    transform: scale(0.98);
-    transition:
-      opacity var(--duration-fast) cubic-bezier(0.25, 0.46, 0.45, 0.94),
-      transform var(--duration-fast) cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
+    :root[data-reveal-ready] [data-reveal="fade-right"]:not(.revealed, [data-revealed]) {
+      transform: translateX(-2rem);
+    }
 
-  [data-motion="rapids"] .section:not([data-reveal]).revealed {
-    opacity: 1;
-    transform: none;
-  }
+    :root[data-reveal-ready] [data-reveal="scale"]:not(.revealed, [data-revealed]) {
+      transform: scale(0.95);
+    }
 
-  /* Tsunami: Dramatic, bold sweep */
-  [data-motion="tsunami"] [data-reveal] {
-    --reveal-duration: var(--duration-normal);
-    --reveal-easing: cubic-bezier(0.68, -0.2, 0.32, 1.2);
-  }
+    :root[data-reveal-ready] [data-reveal="blur"]:not(.revealed, [data-revealed]) {
+      filter: blur(8px);
+    }
 
-  [data-motion="tsunami"] .section:not([data-reveal]) {
-    opacity: 0;
-    transform: translateY(3rem) scale(0.97);
-    transition:
-      opacity var(--duration-normal) cubic-bezier(0.68, -0.2, 0.32, 1.2),
-      transform var(--duration-normal) cubic-bezier(0.68, -0.2, 0.32, 1.2);
-  }
+    [data-reveal] {
+      transition:
+        opacity var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle)),
+        translate var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle)),
+        transform var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle)),
+        filter var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle));
+    }
 
-  [data-motion="tsunami"] .section:not([data-reveal]).revealed {
-    opacity: 1;
-    transform: none;
-  }
+    /* While the script switches the page to ready, below-the-fold content
+       goes to its hidden start state at once instead of fading out. */
+    [data-reveal-init] [data-reveal] {
+      transition: none;
+    }
 
-  /* Reduced motion preference */
-  @media (prefers-reduced-motion: reduce) {
-    [data-reveal],
-    .section {
-      opacity: 1 !important;
-      transform: none !important;
-      filter: none !important;
-      transition: none !important;
+    /* A sideways start position adds 2rem of horizontal overflow until the
+       element is revealed, so a phone could scroll sideways (services
+       template: 32px at every width up to 1024px). Sections holding one clip
+       it; clip, unlike hidden, leaves vertical overflow and sticky alone. */
+    .section:has([data-reveal="fade-left"], [data-reveal="fade-right"]) {
+      overflow-x: clip;
     }
+
+    /* Delays */
+    [data-reveal-delay="100"] { transition-delay: 100ms; }
+    [data-reveal-delay="200"] { transition-delay: 200ms; }
+    [data-reveal-delay="300"] { transition-delay: 300ms; }
+    [data-reveal-delay="400"] { transition-delay: 400ms; }
+    [data-reveal-delay="500"] { transition-delay: 500ms; }
+
+    /* Durations */
+    [data-reveal-duration="fast"] { --reveal-duration: var(--duration-fast); }
+    [data-reveal-duration="normal"] { --reveal-duration: var(--duration-slow); }
+    [data-reveal-duration="slow"] { --reveal-duration: var(--duration-slower); }
+
+    /* Stagger children - useful for grids and lists */
+    [data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: calc(var(--reveal-stagger, 100ms) * 0); }
+    [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: calc(var(--reveal-stagger, 100ms) * 1); }
+    [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: calc(var(--reveal-stagger, 100ms) * 2); }
+    [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: calc(var(--reveal-stagger, 100ms) * 3); }
+    [data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: calc(var(--reveal-stagger, 100ms) * 4); }
+    [data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: calc(var(--reveal-stagger, 100ms) * 5); }
+    [data-reveal-stagger] > [data-reveal]:nth-child(7) { transition-delay: calc(var(--reveal-stagger, 100ms) * 6); }
+    [data-reveal-stagger] > [data-reveal]:nth-child(8) { transition-delay: calc(var(--reveal-stagger, 100ms) * 7); }
   }
 }

package/src/components/accordion.css

@@ -57,7 +57,7 @@
   /* Bordered variant: each item is a card */
   .accordion[data-variant="bordered"] .accordion__item {
     border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-card);
     overflow: hidden;
   }
 
@@ -68,9 +68,8 @@
   /* Separated variant: elevated card items */
   .accordion[data-variant="separated"] .accordion__item {
     border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-card);
     background: var(--color-surface-raised);
-    box-shadow: var(--shadow-xs);
     overflow: hidden;
   }
 
@@ -137,15 +136,15 @@
 
   /* Hover */
   .accordion__trigger:hover {
-    color: var(--accent);
+    color: var(--accent-ink);
     background-color: color-mix(in oklch, var(--accent) 5%, transparent);
   }
 
   /* Focus */
   .accordion__trigger:focus-visible {
-    outline: 2px solid var(--color-focus);
+    outline: var(--focus-ring-width) solid var(--color-focus);
     outline-offset: -2px;
-    border-radius: var(--radius-sm);
+    border-radius: calc(var(--radius-control) * 0.6);
   }
 
 
@@ -201,50 +200,10 @@
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Still: no animation */
-  [data-motion="still"] .accordion__trigger::after {
-    transition: none;
-  }
-
-  /* Serene: rounded, soft */
-  [data-motion="serene"] .accordion[data-variant="separated"] .accordion__item,
-  [data-motion="serene"] .accordion[data-variant="bordered"] .accordion__item {
-    border-radius: var(--radius-xl);
-  }
-
-  /* Cascade: bouncy, bubbly */
-  [data-motion="cascade"] .accordion[data-variant="separated"] .accordion__item,
-  [data-motion="cascade"] .accordion[data-variant="bordered"] .accordion__item {
-    border-radius: var(--radius-xl);
-  }
-
-  /* Rapids: hard shadow on separated */
-  [data-motion="rapids"] .accordion[data-variant="separated"] .accordion__item {
-    box-shadow: var(--shadow-offset);
-  }
-
-  /* Tsunami: asymmetric corners */
-  [data-motion="tsunami"] .accordion[data-variant="separated"] .accordion__item,
-  [data-motion="tsunami"] .accordion[data-variant="bordered"] .accordion__item {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
-  }
-
 
   /* ========================================
      REDUCED MOTION
      ======================================== */
 
-  @media (prefers-reduced-motion: reduce) {
-    .accordion__trigger {
-      transition: none;
-    }
-
-    .accordion__trigger::after {
-      transition: none;
-    }
-  }
+  /* Reduced motion: the reset shortens every transition. */
 }