/* Same-document colour-scheme change. Every rule is scoped to an attribute the
   runtime sets for the length of one theme toggle, so none of it can reach the
   cross-document `@view-transition` used for MPA navigation — that transition
   needs the UA cross-fade left alone. */

/* The circle is drawn by clipping one snapshot over the other, so the UA
   cross-fade has to stop first: two half-opacity snapshots would show the clip
   through the layer beneath it. */
:root[data-ox-theme-transition]::view-transition-old(root),
:root[data-ox-theme-transition]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Whichever snapshot the circle is drawn on has to sit on top of the other. */
:root[data-ox-theme-transition="expand"]::view-transition-old(root) {
  z-index: 1;
}
:root[data-ox-theme-transition="expand"]::view-transition-new(root) {
  z-index: 2;
}
:root[data-ox-theme-transition="shrink"]::view-transition-old(root) {
  z-index: 2;
}
:root[data-ox-theme-transition="shrink"]::view-transition-new(root) {
  z-index: 1;
}

/* An element with its own `view-transition-name`, such as a header kept still
   across navigation, would be captured as a separate group and cross-faded
   above both root snapshots, switching theme ahead of the circle. The whole
   page stays in the root snapshot for the length of a toggle. */
:root[data-ox-theme-transition] *,
:root[data-ox-theme-transition] *::before,
:root[data-ox-theme-transition] *::after {
  view-transition-name: none !important;
}

/* Element-level colour transitions would animate underneath the snapshot and
   bleed the old palette into the new one. The runtime holds this attribute
   only while the theme is mutated, and drops it once both snapshots exist. */
:root[data-ox-theme-transition-suppress],
:root[data-ox-theme-transition-suppress] *,
:root[data-ox-theme-transition-suppress] *::before,
:root[data-ox-theme-transition-suppress] *::after {
  transition: none !important;
}