/* * Mode Transitions — observatorio-cero-theme * Global transitions for smooth color mode changes. * * Activated dynamically by view-color-modes.js via the .oc-is-switching-theme * class on during theme switches. * * Respects prefers-reduced-motion. */ /* ── Dynamic mode transition window ── */ html.oc-is-switching-theme, html.oc-is-switching-theme *, html.oc-is-switching-theme *::before, html.oc-is-switching-theme *::after { transition: background-color var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease), color var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease), border-color var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease), box-shadow var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease), fill var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease), stroke var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease) !important; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { html.oc-is-switching-theme, html.oc-is-switching-theme *, html.oc-is-switching-theme *::before, html.oc-is-switching-theme *::after { transition: none !important; } }