:root { --sw-theme-duration: calc(var(--sw-dur-slow) * 3); }
/* Local token-derived steps; see README.md flow addendum and docs/motion-flow.md. */
:root {
  --sw-local-duration-420: calc(var(--sw-dur-slow) * 1.75000000);
}
/* Space Works theme switch: the new theme grows from the toggle as a circle (720 ms, set in theme-reveal.js).
   Mirror of frontend/src/lib/themeTransition.css in the SpaceWorks app. Only active while the transition
   classes are on <html>, so other view transitions keep their own animation. */
@property --sw-reveal {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.sw-theme-reveal::view-transition-old(root),
.sw-theme-reveal::view-transition-new(root),
.sw-theme-reveal-soft::view-transition-old(root),
.sw-theme-reveal-soft::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.sw-theme-reveal::view-transition-new(root),
.sw-theme-reveal-soft::view-transition-new(root) {
  z-index: 1;
}

/* Soft edge: a 160 px feather. Used where a registered custom property can animate inside a mask. */
.sw-theme-reveal-soft::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--sw-reveal-x) var(--sw-reveal-y), #000 calc(var(--sw-reveal) - 160px), transparent var(--sw-reveal));
  mask-image: radial-gradient(circle at var(--sw-reveal-x) var(--sw-reveal-y), #000 calc(var(--sw-reveal) - 160px), transparent var(--sw-reveal));
}

/* Fallback without View Transitions: every colour cross-fades together. */
.sw-theme-fade,
.sw-theme-fade *,
.sw-theme-fade *::before,
.sw-theme-fade *::after {
  transition-property: ;
  transition-duration: var(--sw-local-duration-420) !important;
  transition-timing-function: var(--sw-ease-standard) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sw-theme-fade, .sw-theme-fade *, .sw-theme-fade *::before, .sw-theme-fade *::after { transition: none; }
}

/* Decision 399: reduced motion reaches the identical state immediately. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}