/* ============================================================
   [UI-8] Cambio de tema: líquido que se derrama desde el botón
   (réplica de ARASYS, css/transiciones-v14.css parte 2). La forma la
   anima tema-liquido.js sobre ::view-transition-new(root) con
   clip-path; aquí se apaga el fundido por defecto y se oculta la vista
   nueva hasta que arranca el líquido.
   ============================================================ */

/* Mientras se derrama, los colores no se animan por su cuenta */
html.liq-tema *, html.liq-tema *::before, html.liq-tema *::after { transition: none !important; }
html.liq-tema::view-transition-old(root) { animation: none; z-index: 1; }
html.liq-tema::view-transition-new(root) {
  animation: none; z-index: 2;
  clip-path: circle(0px at var(--liq-x, 50%) var(--liq-y, 0px));
}

@media (prefers-reduced-motion: reduce) {
  html.liq-tema::view-transition-new(root) { clip-path: none; }
}