/* Juice das ferramentas (public/js/juice.js): classes de movimento e a partícula do confete.
   Tudo some quando as Animações estão desligadas (html[data-motion="reduced"]) ou o sistema pede menos movimento. */
.jx-p { position: fixed; z-index: 9999; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }
.jx-p:nth-child(3n) { border-radius: 50%; }
.jx-p:nth-child(5n) { width: 5px; height: 12px; }

.jx-pop { animation: jx-pop .38s cubic-bezier(.3, 1.6, .5, 1) both; }
.jx-shake { animation: jx-shake .36s ease-in-out both; }
.jx-flash { animation: jx-flash .5s ease-out both; }
@keyframes jx-pop { 0% { transform: scale(1); } 35% { transform: scale(1.14, .9); } 65% { transform: scale(.95, 1.06); } 100% { transform: scale(1); } }
@keyframes jx-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes jx-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #fff) 70%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }

html[data-motion="reduced"] .jx-p { display: none; }
html[data-motion="reduced"] .jx-pop, html[data-motion="reduced"] .jx-shake, html[data-motion="reduced"] .jx-flash { animation: none; }
@media (prefers-reduced-motion: reduce) { .jx-pop, .jx-shake, .jx-flash { animation: none; } }