/* static/css/motion.css: motion layer. Decorations live in #os-fx; windows keep their own CSS. */
#os-fx { position:fixed; inset:0; pointer-events:none; z-index:2147483000; overflow:hidden; contain:strict; color:var(--fx, var(--rvls-color-accent-magenta)); }
#os-fx svg { position:absolute; overflow:visible; }
#os-fx .fx-ring { filter:drop-shadow(0 0 4px var(--fx, var(--rvls-color-accent-magenta))); }
#os-fx .fx-crack .ember { stroke:var(--fx, var(--rvls-color-accent-magenta)); opacity:.55; }
#os-fx .fx-crack .core { stroke:var(--ink, #0b0b0b); }
html[data-skin="noir"] #os-fx .fx-crack .core { stroke:#f2efe6; }
#os-fx .fx-idle { color:var(--ink, #0b0b0b); mix-blend-mode:multiply; opacity:0; }
html[data-skin="noir"] #os-fx .fx-idle { color:#d8d4c8; mix-blend-mode:screen; }

/* icons: no perpetual breathing; a short glow on hover and keyboard focus (lite + full) */
html:is([data-motion="lite"],[data-motion="full"]) .icon .glyph img { transition:filter var(--rvls-motion-duration-fast) var(--rvls-motion-ease-standard); }
html:is([data-motion="lite"],[data-motion="full"]) .icon:is(:hover,:focus-visible) .glyph img {
  filter:drop-shadow(1px 1px 0 var(--hi)) drop-shadow(0 0 5px var(--fx, var(--rvls-color-accent-magenta))); }

/* start menu: unfolds from the start button (full only) */
html[data-motion="full"] .startmenu:not([hidden]) { animation:fx-unfold var(--rvls-motion-duration-fast) var(--rvls-motion-ease-standard); transform-origin:0 100%; }
@keyframes fx-unfold { from { opacity:0; transform:scaleY(.6); } }

/* still tier: belt and braces, nothing moves */
html[data-motion="still"] #os-fx { display:none; }
@media (prefers-reduced-motion:reduce) { #os-fx { display:none; } .startmenu { animation:none !important; } }

/* icons on hover/focus. lite: a 2px lift. full: one short stepped twitch.
   The icon settles; no hover loop keeps running. still / reduced: nothing. */
html[data-motion="lite"] .icon .glyph img { transition:transform var(--rvls-motion-duration-fast) var(--rvls-motion-ease-standard), filter var(--rvls-motion-duration-fast) var(--rvls-motion-ease-standard); }
html[data-motion="lite"] .icon:is(:hover, :focus-visible) .glyph img { transform:translateY(-2px); }
html[data-motion="full"] .icon:is(:hover, :focus-visible) .glyph img { animation:icon-twitch var(--rvls-motion-duration-slow) steps(1, end); }
@keyframes icon-twitch {
  0% { transform:none; } 15% { transform:translate(-1px, -2px) rotate(-6deg) scale(1.06); } 30% { transform:translate(2px, 0) rotate(5deg) scale(1.1); }
  45% { transform:translate(-1px, 1px) rotate(-3deg) scale(1.04); } 60% { transform:translate(1px, -3px) rotate(2deg) scale(1.12); } 80% { transform:translateY(-3px) scale(1.08); } 100% { transform:translateY(-3px) scale(1.08); } }
@media (prefers-reduced-motion:reduce) { .icon .glyph img { animation:none !important; transform:none !important; transition:none !important; } }