/* Keyframes — motion everywhere, all flat and solid. */
@keyframes pop{0%{transform:scale(.5)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastIn{from{transform:translateY(-16px) scale(.8)}to{transform:translateY(0) scale(1)}}
@keyframes toastOut{to{transform:translateY(-10px) scale(.85);opacity:0}}
@keyframes drawline{to{stroke-dashoffset:0}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes flashPulse{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes spinIn{from{transform:rotate(-90deg) scale(.6)}to{transform:rotate(0) scale(1)}}

.wiggle{animation:wiggle .3s}
.pulse{animation:flashPulse .3s}
.spin-in{animation:spinIn .35s cubic-bezier(.34,1.56,.64,1)}

/* tap ripple: solid dot that scales & fades */
.ripple{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:90;animation:rippleGo .45s ease-out forwards}
@keyframes rippleGo{from{transform:translate(-50%,-50%) scale(1);opacity:1}
  to{transform:translate(-50%,-50%) scale(5);opacity:0}}

/* magnet snap pulse on overlay handled in canvas; this is the panel badge */
@keyframes magnetHum{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}

.splash-dot{transform-origin:84px 30px;animation:pop .5s 1s both cubic-bezier(.34,1.7,.64,1)}

:where(button,input,select):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}