/* Generated from ui/styles/ui-motion.css. Edit the source, then npm run build:styles. */
/* Shared motion roles. React reads generated --ds-* tokens; public pages read --ui-*. */
:root {
  --motion-drawer: var(--ds-ui-motion-duration-drawer, var(--ui-motion-duration-drawer));
  --motion-ease-drawer: var(--ds-ui-motion-ease-drawer, var(--ui-motion-ease-drawer));
  --motion-segment: var(--ds-ui-motion-duration-segment, var(--ui-motion-duration-segment));
  --motion-ease-segment: var(--ds-ui-motion-ease-segment, var(--ui-motion-ease-segment));
  --motion-fast: var(--ds-ui-motion-duration-fast, var(--ui-motion-duration-fast));
  --motion-base: var(--ds-ui-motion-duration-base, var(--ui-motion-duration-base));
  --motion-enter: var(--ds-ui-motion-duration-medium, var(--ui-motion-duration-medium));
  --motion-media: var(--ds-ui-motion-duration-slow, var(--ui-motion-duration-slow));
  --motion-ease: var(--ds-ui-ease-emphasized, var(--ui-ease-emphasized));
  --motion-ease-standard: var(--ds-ui-ease, var(--ui-ease));
  --motion-distance: var(--ds-ui-motion-distance, var(--ui-motion-distance));
  --motion-press: var(--ds-ui-motion-press, var(--ui-motion-press));
  --motion-zoom: var(--ds-ui-motion-zoom, var(--ui-motion-zoom));
}
/* Fade leaves fixed descendants in the viewport. No transform on page or layer roots. */
.ui-motion-enter, [data-ui-layer="dialog"], [data-ui-layer="popover"] {
  animation: ui-motion-fade var(--motion-enter) var(--motion-ease);
}
.ui-motion-feedback { animation: ui-motion-feedback var(--motion-enter) var(--motion-ease); }
@keyframes ui-motion-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-motion-feedback { from { opacity: 0; translate: 0 var(--motion-distance); } to { opacity: 1; translate: 0 0; } }
/* The reference switch only reduces motion; it can never override the OS preference. */
[data-motion="reduced"] {
  --motion-drawer: 0ms; --motion-segment: 0ms; --motion-fast: 0ms; --motion-base: 0ms; --motion-enter: 0ms; --motion-media: 0ms;
  --motion-distance: 0px; --motion-press: 1; --motion-zoom: 1;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-drawer: 0ms; --motion-segment: 0ms; --motion-fast: 0ms; --motion-base: 0ms; --motion-enter: 0ms; --motion-media: 0ms;
    --motion-distance: 0px; --motion-press: 1; --motion-zoom: 1;
  }
  .ui-motion-enter, .ui-motion-feedback, [data-ui-layer] { animation: none; }
}
@media (forced-colors: active) {
  .ui-motion-enter, .ui-motion-feedback, [data-ui-layer] { animation: none; }
}