@fluid-theme/core 0.4.3 → 2.0.0

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. */
 }

package/src/components/alert.css

@@ -39,6 +39,8 @@
 
   .alert {
     --_alert-color: var(--color-info);
+    --_alert-fill: var(--color-info-fill);
+    --_alert-on: var(--color-info-on);
     --_alert-bg: var(--color-info-subtle);
     --_alert-border: var(--color-info);
 
@@ -46,16 +48,15 @@
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-4) var(--space-5);
-    border-radius: var(--radius-lg);
-    border-inline-start: 3px solid var(--_alert-border);
+    border-radius: var(--radius-card);
+    border-inline-start: var(--border-width-thick) solid var(--_alert-border);
     background: var(--_alert-bg);
     color: var(--color-text);
-    font-size: var(--font-size-sm);
-    line-height: var(--leading-normal);
-
+    font-size: var(--step--1);
+    line-height: 1.5;
     transition:
       opacity var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-normal) var(--ease-settle);
+      translate var(--duration-normal) var(--ease-settle);
   }
 
 
@@ -65,24 +66,32 @@
 
   .alert[data-status="success"] {
     --_alert-color: var(--color-success);
+    --_alert-fill: var(--color-success-fill);
+    --_alert-on: var(--color-success-on);
     --_alert-bg: var(--color-success-subtle);
     --_alert-border: var(--color-success);
   }
 
   .alert[data-status="warning"] {
     --_alert-color: var(--color-warning);
+    --_alert-fill: var(--color-warning-fill);
+    --_alert-on: var(--color-warning-on);
     --_alert-bg: var(--color-warning-subtle);
     --_alert-border: var(--color-warning);
   }
 
   .alert[data-status="error"] {
     --_alert-color: var(--color-error);
+    --_alert-fill: var(--color-error-fill);
+    --_alert-on: var(--color-error-on);
     --_alert-bg: var(--color-error-subtle);
     --_alert-border: var(--color-error);
   }
 
   .alert[data-status="info"] {
     --_alert-color: var(--color-info);
+    --_alert-fill: var(--color-info-fill);
+    --_alert-on: var(--color-info-on);
     --_alert-bg: var(--color-info-subtle);
     --_alert-border: var(--color-info);
   }
@@ -94,8 +103,8 @@
 
   /* Filled: solid background */
   .alert[data-variant="filled"] {
-    background: var(--_alert-color);
-    color: var(--white);
+    background: var(--_alert-fill);
+    color: var(--_alert-on);
     border-inline-start: none;
   }
 
@@ -107,7 +116,7 @@
   .alert[data-variant="outline"] {
     background: transparent;
     border: var(--border-width) solid var(--_alert-border);
-    border-inline-start-width: 3px;
+    border-inline-start-width: var(--border-width-thick);
   }
 
 
@@ -130,7 +139,7 @@
   }
 
   .alert__title {
-    font-weight: var(--weight-semibold);
+    font-weight: calc(700 + var(--_dark-weight));
     color: var(--_alert-color);
     margin-block-end: var(--space-1);
     display: block;
@@ -142,7 +151,7 @@
 
   .alert__close {
     --_btn-bg: transparent;
-    --_btn-shadow: none;
+    --_btn-bg-hover: transparent;
 
     position: relative;
     flex-shrink: 0;
@@ -152,7 +161,6 @@
     inline-size: 1.5rem;
     block-size: 1.5rem;
     padding: 0;
-    border-radius: var(--radius-sm);
     font-size: var(--font-size-lg);
     line-height: 1;
     color: var(--color-text-muted);
@@ -174,9 +182,11 @@
   /* Dismissing animation */
   .alert[data-dismissing] {
     opacity: 0;
-    transform: translateX(var(--space-4));
+    translate: var(--space-4);
   }
 
+  .alert[data-dismissing]:dir(rtl) { translate: calc(-1 * var(--space-4)); }
+
 
   /* ========================================
      TOAST CONTAINER
@@ -218,14 +228,14 @@
 
   .toast-container[data-position="top-center"] {
     inset-block-start: 0;
-    inset-inline-start: 50%;
-    translate: -50% 0;
+    inset-inline: 0;
+    margin-inline: auto;
   }
 
   .toast-container[data-position="bottom-center"] {
     inset-block-end: 0;
-    inset-inline-start: 50%;
-    translate: -50% 0;
+    inset-inline: 0;
+    margin-inline: auto;
   }
 
 
@@ -235,18 +245,19 @@
 
   .toast {
     --_toast-accent: var(--color-info);
-
+    --_toast-fill: var(--color-info-fill);
+    --_toast-on: var(--color-info-on);
+    --_toast-bg: var(--color-info-subtle);
+    --_dir: 1;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-4);
-    padding-inline-start: calc(var(--space-4) + 3px);
-    background: var(--color-surface-raised);
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
+    background: var(--_toast-bg);
+    border-inline-start: var(--border-width-thick) solid var(--_toast-accent);
+    border-radius: var(--radius-card);
     pointer-events: auto;
     inline-size: 100%;
 
@@ -254,22 +265,12 @@
     animation: toast-in var(--duration-normal) var(--ease-settle) both;
   }
 
-  .toast[data-status="success"] { --_toast-accent: var(--color-success); }
-  .toast[data-status="warning"] { --_toast-accent: var(--color-warning); }
-  .toast[data-status="error"]   { --_toast-accent: var(--color-error); }
-  .toast[data-status="info"]    { --_toast-accent: var(--color-info); }
+  .toast[data-status="success"] { --_toast-accent: var(--color-success); --_toast-fill: var(--color-success-fill); --_toast-on: var(--color-success-on); --_toast-bg: var(--color-success-subtle); }
+  .toast[data-status="warning"] { --_toast-accent: var(--color-warning); --_toast-fill: var(--color-warning-fill); --_toast-on: var(--color-warning-on); --_toast-bg: var(--color-warning-subtle); }
+  .toast[data-status="error"]   { --_toast-accent: var(--color-error); --_toast-fill: var(--color-error-fill); --_toast-on: var(--color-error-on); --_toast-bg: var(--color-error-subtle); }
+  .toast[data-status="info"]    { --_toast-accent: var(--color-info); --_toast-fill: var(--color-info-fill); --_toast-on: var(--color-info-on); --_toast-bg: var(--color-info-subtle); }
 
-  /* Accent bar */
-  .toast::before {
-    content: "";
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inline-size: 3px;
-    block-size: 100%;
-    background: var(--_toast-accent);
-    border-radius: var(--radius-full) 0 0 var(--radius-full);
-  }
+  .toast:dir(rtl) { --_dir: -1; }
 
   .toast__icon {
     flex-shrink: 0;
@@ -286,7 +287,7 @@
 
   .toast__content strong {
     display: block;
-    font-weight: var(--weight-semibold);
+    font-weight: calc(700 + var(--_dark-weight));
     margin-block-end: var(--space-1);
   }
 
@@ -298,7 +299,7 @@
 
   .toast__close {
     --_btn-bg: transparent;
-    --_btn-shadow: none;
+    --_btn-bg-hover: transparent;
 
     position: relative;
     flex-shrink: 0;
@@ -308,7 +309,6 @@
     inline-size: 1.5rem;
     block-size: 1.5rem;
     padding: 0;
-    border-radius: var(--radius-sm);
     font-size: var(--font-size-base);
     color: var(--color-text-subtle);
     cursor: pointer;
@@ -336,15 +336,15 @@
     color: var(--_toast-accent);
     background: transparent;
     border: var(--border-width) solid var(--_toast-accent);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-control);
     cursor: pointer;
     text-decoration: none;
     transition: background-color var(--duration-fast) var(--ease-fluid);
   }
 
   .toast__action:hover {
-    background: var(--_toast-accent);
-    color: var(--white);
+    background: var(--_toast-fill);
+    color: var(--_toast-on);
   }
 
   /* Auto-dismiss progress bar */
@@ -373,50 +373,13 @@
      TOAST ANIMATIONS
      ======================================== */
 
+  /* Logical: the toast slides from and to the inline end (:dir sets --_dir). */
   @keyframes toast-in {
-    from {
-      opacity: 0;
-      transform: translateY(-8px) scale(0.96);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
+    from { opacity: 0; translate: calc(var(--space-4) * var(--_dir)) 0; }
   }
 
   @keyframes toast-out {
-    to {
-      opacity: 0;
-      transform: translateX(100%) scale(0.96);
-    }
-  }
-
-
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Still: no animations */
-  [data-motion="still"] .toast {
-    animation: none;
-  }
-
-  /* Rapids: offset shadow */
-  [data-motion="rapids"] .toast {
-    box-shadow: var(--shadow-offset);
-  }
-
-  [data-motion="rapids"] .alert {
-    border-inline-start-width: 4px;
-  }
-
-  /* Tsunami: asymmetric */
-  [data-motion="tsunami"] .toast {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
-  }
-
-  [data-motion="tsunami"] .alert {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+    to { opacity: 0; translate: calc(100% * var(--_dir)) 0; }
   }
 
 
@@ -437,10 +400,6 @@
      ======================================== */
 
   @media (prefers-reduced-motion: reduce) {
-    .alert {
-      transition: none;
-    }
-
     .toast {
       animation: none;
     }