/* Stable width before, during and after each independently held motion lock. */
html {
  scrollbar-gutter: stable;
}
html[data-motion-lock="active"] {
  overflow: hidden;
  overscroll-behavior: none;
}

html[data-theme-transition="active"] *,
html[data-theme-transition="active"] *::before,
html[data-theme-transition="active"] *::after {
  view-transition-name: none !important;
  transition: none !important;
}
html[data-theme-transition="active"]::view-transition {
  pointer-events: none;
}
html[data-theme-transition="active"]::view-transition-group(root) {
  animation-duration: 500ms;
}
html[data-theme-transition="active"]::view-transition-image-pair(root) {
  isolation: auto;
}
html[data-theme-transition="active"]::view-transition-old(root),
html[data-theme-transition="active"]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html[data-theme-transition="active"]::view-transition-old(root) {
  z-index: 1;
}
html[data-theme-transition="active"]::view-transition-new(root) {
  z-index: 2;
  clip-path: circle(0 at var(--theme-x) var(--theme-y));
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  html::view-transition-group(root) {
    animation: none !important;
  }
}