:root {
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-medium: 200ms;
  --motion-normal: 200ms;
  --motion-slow: 280ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, .8, .2, 1);
}

@keyframes widget-enter {
  from { opacity: 0; transform: translateY(8px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes focus-enter {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

html { scroll-behavior: smooth; }
.dvs-widget { animation: widget-enter var(--motion-normal) var(--ease-standard) both; }
.widget-workspace[data-focus="true"] .dvs-widget { animation-name: focus-enter; animation-duration: var(--motion-slow); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: .01ms;
    --motion-fast: .01ms;
    --motion-medium: .01ms;
    --motion-normal: .01ms;
    --motion-slow: .01ms;
  }

  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}