@heyramzi/ui 0.0.0-stage → 6.1.0

package/src/animations/input-shake.css

@@ -0,0 +1,114 @@
+/* Transitions.dev — Error state shake */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    Apply .t-input-wrap to your wrapper, .t-input to the
+    element that should shake (your input field, its
+    bordered wrapper, whatever owns the visible border),
+    and .t-error-msg to the message you want to reveal.
+    Bring your own sizing, padding, border colors, and
+    typography.
+
+      <div class="t-input-wrap">
+        <div class="t-input">
+          <input type="text">
+        </div>
+        <p class="t-error-msg">Please enter a valid email.</p>
+      </div>
+
+  Trigger:
+    Add `.is-error` to .t-input-wrap and .t-input. Your
+    own border-color rules drive the visible color; this
+    stylesheet only owns the tween.
+    Restart the shake by removing `.is-shaking` from
+    .t-input, forcing a reflow, then re-adding it.
+    Optional: after --revert-hold ms, drop both
+    `.is-error` classes so border and message fade back
+    to neutral over --revert-dur.
+
+  Per-segment ease: each keyframe stop carries its own
+  animation-timing-function so each leg follows the Figma
+  cubic-bezier curve independently.
+*/
+
+:root {
+  --shake-distance: var(--distance-small, 6px);
+  --shake-overshoot: 4px;
+  --shake-dur-a: var(--duration-micro, 80ms);
+  --shake-dur-b: 60ms;
+  --shake-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --revert-hold: 3000ms;
+  --revert-dur: 280ms;
+}
+
+/* Border-color tween. Define your input's default / focused
+   / error border-color in your own component CSS, this rule
+   only owns the interpolation. Use a constant border-width
+   across states so the tween never shifts inner content. */
+.t-input {
+  transition: border-color 150ms ease-out;
+  will-change: transform;
+}
+.t-input.is-error {
+  /* Error border auto-reverts on the hold timer, so the
+	   fade-out uses the slower revert duration (matches the
+	   message fade). */
+  transition: border-color var(--revert-dur, 280ms) ease-out;
+}
+
+/* Error message reveal. Visibility is delayed by --revert-dur
+   on hide so the message stays painted for the full opacity
+   fade-out. Entering .is-error drops the delay to 0 so the
+   message becomes visible immediately. */
+.t-error-msg {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--revert-dur, 280ms) ease-out,
+    visibility 0s linear var(--revert-dur, 280ms);
+}
+.t-input-wrap.is-error .t-error-msg {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--revert-dur, 280ms) ease-out,
+    visibility 0s linear 0s;
+}
+
+/* Multi-segment keyframe with per-stop easing so each leg
+   of the shake follows its own cubic-bezier independently.
+   %-stops are cumulative durations as a fraction of the
+   total (80, 60, 80, 60 = 280ms): 28.57%, 57.14%, 78.57%,
+   100%. Recompute if any segment duration changes. */
+.t-input.is-shaking {
+  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
+}
+@keyframes t-input-shake {
+  0% {
+    transform: translateX(0);
+    animation-timing-function: var(--shake-ease);
+  }
+  28.57% {
+    transform: translateX(var(--shake-distance));
+    animation-timing-function: var(--shake-ease);
+  }
+  57.14% {
+    transform: translateX(calc(var(--shake-distance) * -1));
+    animation-timing-function: var(--shake-ease);
+  }
+  78.57% {
+    transform: translateX(var(--shake-overshoot));
+    animation-timing-function: var(--shake-ease);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-input {
+    animation: none !important;
+    transform: none !important;
+  }
+}

package/src/animations/learn-more-hover.css

@@ -0,0 +1,48 @@
+/* Learn more hover — transitions.dev 24.
+   The chevron shifts along the direction it goes and its two arms rotate
+   apart about the apex, so the arrow leans into the move. Pure CSS.
+   `transform-box: view-box` is what makes the arm origin resolve against
+   the viewBox rather than each path's own bounding box. */
+:root {
+  --learn-shift: 2px;
+  --learn-spread: 8deg;
+  --learn-in: var(--duration-medium, 350ms);
+  --learn-out: var(--duration-medium, 350ms);
+  --learn-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-learn-chevron {
+  display: inline-flex;
+  transform: translateX(0);
+  transition: transform var(--learn-out) var(--learn-ease);
+}
+.t-learn-arm {
+  transform-box: view-box;
+  transform-origin: 10px 8px;
+  vector-effect: non-scaling-stroke;
+  transition: transform var(--learn-out) var(--learn-ease);
+}
+.t-learn:hover .t-learn-chevron,
+.t-learn:focus-visible .t-learn-chevron {
+  transform: translateX(var(--learn-shift));
+  transition-duration: var(--learn-in);
+}
+.t-learn:hover .t-learn-arm,
+.t-learn:focus-visible .t-learn-arm {
+  transition-duration: var(--learn-in);
+}
+.t-learn:hover .t-learn-arm-top,
+.t-learn:focus-visible .t-learn-arm-top {
+  transform: rotate(var(--learn-spread));
+}
+.t-learn:hover .t-learn-arm-bot,
+.t-learn:focus-visible .t-learn-arm-bot {
+  transform: rotate(calc(var(--learn-spread) * -1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-learn-chevron,
+  .t-learn-arm {
+    transition: none !important;
+  }
+}

package/src/animations/like-button.css

@@ -0,0 +1,93 @@
+/* Like button — transitions.dev 23.
+   Toggle `data-liked` to fill and pop the heart; add `.is-bursting` for
+   one particle duration to fire the spray, writing --px/--py/--pdur/--pdelay
+   per dot in JS so no two bursts match. */
+:root {
+  --like-color: #f40051;
+  --like-fill: var(--duration-quick, 150ms);
+  --like-pop: var(--duration-medium, 350ms);
+  --like-pop-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --like-particle-dur: 600ms;
+  --like-particle-dist: 20px;
+  --like-particle-size: 2.5px;
+  --like-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-like-heart {
+  color: currentcolor;
+  transition: color var(--like-fill) var(--like-ease);
+}
+.t-like-heart path {
+  fill: transparent;
+  stroke: currentcolor;
+  transition:
+    fill var(--like-fill) var(--like-ease),
+    stroke var(--like-fill) var(--like-ease);
+}
+.t-like[data-liked="true"] .t-like-heart {
+  color: var(--like-color);
+}
+.t-like[data-liked="true"] .t-like-heart path {
+  fill: currentcolor;
+}
+
+/* The pop scales an HTML wrapper, never the <svg>: transforming an inline SVG
+   makes Chromium rasterise it at 1x, which is visibly soft on hi-DPI. */
+.t-like[data-liked="true"] .t-like-icon {
+  animation: t-like-pop var(--like-pop) var(--like-pop-ease);
+}
+@keyframes t-like-pop {
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(0.82);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.t-like-particles {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  color: var(--like-color);
+}
+.t-like-particles i {
+  position: absolute;
+  left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
+  top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
+  width: calc(var(--like-particle-size) * var(--psize, 1));
+  height: calc(var(--like-particle-size) * var(--psize, 1));
+  border-radius: 50%;
+  background: currentcolor;
+  opacity: 0;
+}
+@keyframes t-like-burst {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0) scale(0.4);
+  }
+  20% {
+    opacity: 1;
+    transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6));
+  }
+}
+.t-like.is-bursting .t-like-particles i {
+  animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-like-icon,
+  .t-like-particles i {
+    animation: none !important;
+  }
+}

package/src/animations/modal.css

@@ -0,0 +1,75 @@
+/* Transitions.dev — Modal open/close */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+:root {
+  --modal-open-dur: var(--duration-fast, 250ms);
+  --modal-close-dur: var(--duration-quick, 150ms);
+  --modal-scale: var(--scale-large, 0.96);
+  --modal-scale-close: var(--scale-large, 0.96);
+  --modal-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --modal-backdrop-color: rgb(0 0 0 / 0.5);
+}
+
+/* === Upstream: class-based toggle === */
+.t-modal {
+  transform-origin: center;
+  transform: scale(var(--modal-scale));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-open-dur) var(--modal-ease),
+    opacity var(--modal-open-dur) var(--modal-ease);
+  will-change: transform, opacity;
+}
+.t-modal.is-open {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+.t-modal.is-closing {
+  transform: scale(var(--modal-scale-close));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-close-dur) var(--modal-ease),
+    opacity var(--modal-close-dur) var(--modal-ease);
+}
+
+/* === Extension: bits-ui data-state integration === */
+.t-modal[data-state="open"] {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+.t-modal[data-state="closed"] {
+  transform: scale(var(--modal-scale-close));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-close-dur) var(--modal-ease),
+    opacity var(--modal-close-dur) var(--modal-ease);
+}
+
+/* === Extension: backdrop helper === */
+/* WHY: pair .t-modal-backdrop with the modal so the overlay fades in sync. */
+.t-modal-backdrop {
+  background: var(--modal-backdrop-color);
+  opacity: 0;
+  transition: opacity var(--modal-open-dur) var(--modal-ease);
+}
+.t-modal-backdrop.is-open,
+.t-modal-backdrop[data-state="open"] {
+  opacity: 1;
+}
+.t-modal-backdrop.is-closing,
+.t-modal-backdrop[data-state="closed"] {
+  opacity: 0;
+  transition: opacity var(--modal-close-dur) var(--modal-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-modal,
+  .t-modal-backdrop {
+    transition: none !important;
+  }
+}

package/src/animations/notification-badge.css

@@ -0,0 +1,81 @@
+/* Transitions.dev — Notification badge */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    Place .t-badge inside your trigger (bell icon, button, etc.).
+    The trigger must be position: relative so .t-badge can anchor to it.
+
+    <button class="your-trigger" style="position: relative">
+      <span class="t-badge" data-open="false">
+        <span class="t-badge-dot">1</span>
+      </span>
+    </button>
+
+  State: toggle data-open="true" / "false" on .t-badge.
+  Only the badge slides + pops, the trigger itself stays put.
+*/
+
+:root {
+  --badge-slide-dur: 260ms;
+  --badge-pop-dur: var(--duration-very-slow, 500ms);
+  --badge-pop-close-dur: 180ms;
+  --badge-fade-dur: var(--duration-slow, 400ms);
+  --badge-fade-close-dur: 180ms;
+  --badge-blur: var(--blur-small, 2px);
+  --badge-offset-x: -8.2px;
+  --badge-offset-y: 12.4px;
+  --badge-slide-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --badge-pop-ease: var(--ease-smooth-out);
+  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes t-badge-slide-in {
+  from {
+    transform: translate(var(--badge-offset-x), var(--badge-offset-y));
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+
+.t-badge {
+  position: absolute;
+  top: -6px;
+  right: -8px;
+  pointer-events: none;
+  will-change: transform;
+}
+.t-badge[data-open="true"] {
+  animation: t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease);
+}
+
+.t-badge-dot {
+  display: block;
+  transform-origin: center;
+  transform: scale(1);
+  opacity: 1;
+  filter: blur(0);
+  transition:
+    transform var(--badge-pop-dur) var(--badge-pop-ease),
+    opacity var(--badge-fade-dur) var(--badge-pop-ease),
+    filter var(--badge-pop-dur) var(--badge-pop-ease);
+  will-change: transform, opacity, filter;
+}
+.t-badge[data-open="false"] .t-badge-dot {
+  transform: scale(0);
+  opacity: 0;
+  filter: blur(var(--badge-blur));
+  transition:
+    transform var(--badge-pop-close-dur) var(--badge-close-ease),
+    opacity var(--badge-fade-close-dur) var(--badge-close-ease),
+    filter var(--badge-pop-close-dur) var(--badge-close-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-badge,
+  .t-badge-dot {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/src/animations/page-side-by-side.css

@@ -0,0 +1,63 @@
+/* Transitions.dev — Page side-by-side */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    <div class="t-page-slide" data-page="1">
+      <section class="t-page" data-page-id="1">…</section>
+      <section class="t-page" data-page-id="2">…</section>
+    </div>
+
+  State:
+    Set data-page="1" or "2" on .t-page-slide.
+    Page 1 exits to the left, page 2 exits to the right.
+    --page-exit-enabled (0/1) disables the outgoing slide.
+*/
+
+:root {
+  --page-slide-dur: 200ms;
+  --page-fade-dur: 200ms;
+  --page-slide-distance: var(--distance-base, 8px);
+  --page-blur: var(--blur-medium, 3px);
+  --page-stagger: 0ms;
+  --page-exit-enabled: 1;
+  --page-slide-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --page-fade-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-page-slide {
+  position: relative;
+}
+.t-page-slide .t-page[data-page-id="1"] {
+  --t-page-from-x: calc(var(--page-slide-distance) * -1);
+}
+.t-page-slide .t-page[data-page-id="2"] {
+  --t-page-from-x: var(--page-slide-distance);
+}
+.t-page-slide .t-page {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
+  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+  transition:
+    opacity var(--page-fade-dur) var(--page-fade-ease),
+    transform var(--page-slide-dur) var(--page-slide-ease),
+    filter var(--page-slide-dur) var(--page-slide-ease);
+  will-change: opacity, transform, filter;
+}
+.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
+.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  filter: blur(0);
+  transition-delay: var(--page-stagger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-page-slide .t-page {
+    transition: none !important;
+  }
+}

package/src/animations/panel.css

@@ -0,0 +1,86 @@
+/* Transitions.dev — Side panel */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+:root {
+  --panel-open-dur: var(--duration-slow, 400ms);
+  --panel-close-dur: var(--duration-medium, 350ms);
+  --panel-translate-y: calc(187px * 0.5);
+  --panel-blur: var(--blur-small, 2px);
+  --panel-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-panel-slide {
+  transform: translateY(var(--panel-translate-y));
+  opacity: 0;
+  filter: blur(var(--panel-blur));
+  pointer-events: none;
+  transition:
+    transform var(--panel-close-dur) var(--panel-ease),
+    opacity var(--panel-close-dur) var(--panel-ease),
+    filter var(--panel-close-dur) var(--panel-ease);
+  will-change: transform, opacity, filter;
+}
+
+.t-panel-slide[data-open="true"] {
+  transform: translateY(0);
+  opacity: 1;
+  filter: blur(0);
+  pointer-events: auto;
+  transition:
+    transform var(--panel-open-dur) var(--panel-ease),
+    opacity var(--panel-open-dur) var(--panel-ease),
+    filter var(--panel-open-dur) var(--panel-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-panel-slide {
+    transition: none !important;
+  }
+}
+
+:root {
+  --sheet-open-dur: 300ms;
+  --sheet-close-dur: 250ms;
+  --sheet-translate: 100%;
+  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.t-sheet {
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--sheet-close-dur) var(--sheet-ease),
+    opacity var(--sheet-close-dur) var(--sheet-ease);
+  will-change: transform, opacity;
+}
+
+.t-sheet[data-side="right"] {
+  transform: translateX(var(--sheet-translate));
+}
+
+.t-sheet[data-side="left"] {
+  transform: translateX(calc(-1 * var(--sheet-translate)));
+}
+
+.t-sheet[data-side="top"] {
+  transform: translateY(calc(-1 * var(--sheet-translate)));
+}
+
+.t-sheet[data-side="bottom"] {
+  transform: translateY(var(--sheet-translate));
+}
+
+.t-sheet[data-state="open"] {
+  transform: translate(0, 0);
+  opacity: 1;
+  pointer-events: auto;
+  transition:
+    transform var(--sheet-open-dur) var(--sheet-ease),
+    opacity var(--sheet-open-dur) var(--sheet-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-sheet {
+    transition: none !important;
+  }
+}

package/src/animations/plus-menu-morph.css

@@ -0,0 +1,97 @@
+/* Plus to menu morph — transitions.dev `dropdown-menu-morph`.
+   The trigger becomes the surface: width, height and radius animate while the
+   plus and the menu cross-fade through a blur. Set the open footprint on the
+   consumer side; the two sizes here are the upstream demo's. Use `dropdown.css`
+   instead when the surface is a separate popover that merely grows. */
+:root {
+  --morph-open-dur: var(--duration-medium, 350ms);
+  --morph-close-dur: var(--duration-fast, 250ms);
+  --morph-ease: var(--ease-smooth-out);
+  --morph-close-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --morph-r-closed: 40px;
+  --morph-r-open: 20px;
+  --morph-size-closed: 40px;
+  --morph-w-open: 183px;
+  --morph-h-open: 172px;
+  --morph-fade-dur: 200ms;
+  --morph-slide: 40px;
+  --morph-rotate: 45deg;
+  --morph-scale: var(--scale-medium, 0.97);
+  --morph-blur: var(--blur-small, 2px);
+}
+
+.t-morph {
+  position: relative;
+  width: var(--morph-size-closed);
+  height: var(--morph-size-closed);
+  border-radius: var(--morph-r-closed);
+  overflow: hidden;
+  transition:
+    width var(--morph-close-dur) var(--morph-close-ease),
+    height var(--morph-close-dur) var(--morph-close-ease),
+    border-radius var(--morph-close-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] {
+  width: var(--morph-w-open);
+  height: var(--morph-h-open);
+  border-radius: var(--morph-r-open);
+  transition:
+    width var(--morph-open-dur) var(--morph-ease),
+    height var(--morph-open-dur) var(--morph-ease),
+    border-radius var(--morph-open-dur) var(--morph-ease);
+}
+
+.t-morph-plus {
+  position: absolute;
+  inset: auto 0 0 auto;
+  width: var(--morph-size-closed);
+  height: var(--morph-size-closed);
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  transition:
+    opacity var(--morph-fade-dur) var(--morph-close-ease),
+    transform var(--morph-open-dur) var(--morph-close-ease),
+    filter var(--morph-fade-dur) var(--morph-close-ease);
+}
+.t-morph-plus svg {
+  transition: transform var(--morph-open-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] .t-morph-plus {
+  opacity: 0;
+  transform: translateX(calc(-1 * var(--morph-slide)));
+  filter: blur(var(--morph-blur));
+  pointer-events: none;
+}
+.t-morph[data-open="true"] .t-morph-plus svg {
+  transform: scale(var(--morph-scale)) rotate(var(--morph-rotate));
+}
+
+.t-morph-menu {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transform: translateX(var(--morph-slide)) scale(var(--morph-scale));
+  filter: blur(var(--morph-blur));
+  pointer-events: none;
+  transition:
+    opacity var(--morph-fade-dur) var(--morph-close-ease),
+    transform var(--morph-open-dur) var(--morph-close-ease),
+    filter var(--morph-fade-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] .t-morph-menu {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+  filter: blur(0);
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-morph,
+  .t-morph-plus,
+  .t-morph-menu {
+    transition: none !important;
+  }
+}

package/src/animations/reasoning-stream.css

@@ -0,0 +1,49 @@
+/* Reasoning stream — transitions.dev 29.
+   A card that clips a tall transcript and steps it upward while a model thinks.
+   JS moves the scroll --reason-lines lines every --reason-hold and clones the
+   text once, so the offset can wrap by one copy's height mid-hold and the loop
+   never shows a seam. The edge fades are a mask on the viewport, not gradients
+   painted over the text, so the card background can be anything. */
+:root {
+  --reason-hold: 840ms;
+  --reason-step: var(--duration-very-slow, 500ms);
+  --reason-lines: 2;
+  --reason-fade: 28px;
+  --reason-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-reason {
+  position: relative;
+  overflow: hidden;
+}
+.t-reason-viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(
+    transparent 0,
+    black var(--reason-fade),
+    black calc(100% - var(--reason-fade)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    transparent 0,
+    black var(--reason-fade),
+    black calc(100% - var(--reason-fade)),
+    transparent 100%
+  );
+}
+.t-reason-scroll {
+  position: absolute;
+  left: 0;
+  right: 0;
+  transform: translateY(0);
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-reason-scroll {
+    transition: none !important;
+    transform: none !important;
+  }
+}