/* Scoped to this control's snapshots; other page transitions keep their CSS. */
html.fg-theme-reveal::view-transition {
  pointer-events: none;
}
html.fg-theme-reveal::view-transition-group(root) {
  animation: none;
}
html.fg-theme-reveal::view-transition-image-pair(root) {
  isolation: auto;
}
html.fg-theme-reveal::view-transition-old(root),
html.fg-theme-reveal::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.fg-theme-reveal::view-transition-old(root) { z-index: 1; }
html.fg-theme-reveal::view-transition-new(root) {
  z-index: 2;
  animation: fg-theme-reveal 560ms cubic-bezier(.2, .72, .16, 1) both;
}
@keyframes fg-theme-reveal {
  from { clip-path: circle(0px at var(--fg-theme-x) var(--fg-theme-y)); }
  to { clip-path: circle(var(--fg-theme-radius) at var(--fg-theme-x) var(--fg-theme-y)); }
}

/* JS appends palette transitions to each element's existing transition list.
   No geometry, opacity or focus styles are replaced by the fallback. */
html.fg-theme-fade [data-fg-theme-fade-target] {
  transition: var(--fg-theme-base-transition),
    background-color 360ms ease, color 360ms ease,
    border-color 360ms ease, outline-color 360ms ease,
    box-shadow 360ms ease, fill 360ms ease, stroke 360ms ease,
    filter 360ms ease !important;
}
html.fg-theme-fade [data-fg-theme-fade-target]::before {
  transition: var(--fg-theme-before-transition),
    background-color 360ms ease, color 360ms ease,
    border-color 360ms ease, outline-color 360ms ease,
    box-shadow 360ms ease, fill 360ms ease, stroke 360ms ease,
    filter 360ms ease !important;
}
html.fg-theme-fade [data-fg-theme-fade-target]::after {
  transition: var(--fg-theme-after-transition),
    background-color 360ms ease, color 360ms ease,
    border-color 360ms ease, outline-color 360ms ease,
    box-shadow 360ms ease, fill 360ms ease, stroke 360ms ease,
    filter 360ms ease !important;
}
html.fg-theme-fade dialog[data-fg-theme-fade-target]::backdrop {
  transition: var(--fg-theme-backdrop-transition),
    background-color 360ms ease, color 360ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.fg-theme-reveal::view-transition-new(root) { animation: none !important; }
  html.fg-theme-fade [data-fg-theme-fade-target],
  html.fg-theme-fade [data-fg-theme-fade-target]::before,
  html.fg-theme-fade [data-fg-theme-fade-target]::after,
  html.fg-theme-fade dialog[data-fg-theme-fade-target]::backdrop {
    transition-duration: 0s !important;
  }
}