:root{--motion-fast:160ms;--motion-ease:cubic-bezier(.2,.75,.25,1)}
button,a,input,select{transition:background-color 180ms,border-color 180ms,box-shadow 180ms,transform var(--motion-fast) var(--motion-ease),color 180ms}
button:active:not(:disabled){transform:scale(.975)}
.envelope,.goalcard,.summarybox,.insight-stat,.landing-features article{transition:transform 220ms var(--motion-ease),border-color 220ms,box-shadow 220ms}
@media(hover:hover) and (pointer:fine){.envelope:hover,.goalcard:hover{transform:translateY(-4px);border-color:var(--lavender);box-shadow:0 9px 22px #29263e09}.summarybox:hover,.insight-stat:hover{transform:translateY(-2px)}.landing-features article:hover{transform:translateY(-4px)}.public-cta:hover,.quickaction:hover,.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px #7762df24}.nav button:hover{transform:translateX(3px)}.public-link:hover,.textbtn:hover{color:var(--ink)}}
.field input:focus,.field select:focus,.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7762df12}
.toggle span{transition:margin-left 200ms var(--motion-ease),transform 200ms}.toggle:active span{transform:scale(.88)}
.progress span{transition:width 550ms var(--motion-ease),background-color 220ms;transform-origin:left}
.barcol div{transition:height 500ms var(--motion-ease);transform-origin:bottom}
.preview-dashboard{animation:ratio-float 7s ease-in-out infinite}.preview-sticker{animation:ratio-sticker-float 6s ease-in-out infinite}
.landing-visual:hover .preview-dashboard,.landing-visual:hover .preview-sticker{animation-play-state:paused}
dialog[open]{animation:ratio-dialog-in 230ms var(--motion-ease)}dialog[open]::backdrop{animation:ratio-backdrop-in 180ms ease-out}
#toast{animation:ratio-toast-in 220ms var(--motion-ease)}
.ratio-route-enter{animation:ratio-content-in 350ms var(--motion-ease) both}
.ratio-progress-enter{animation:ratio-fill-in 650ms var(--motion-ease) both}
.ratio-bar-enter{animation:ratio-bars-in 550ms var(--motion-ease) both}
.ratio-saved-pulse{animation:ratio-saved 600ms ease-out}
.ratio-motion-choice{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--rule);margin-top:15px;padding-top:16px;font-size:12px}.ratio-motion-choice small{display:block;color:var(--muted);font-size:10px;margin-top:5px;line-height:1.7}.ratio-motion-choice button{white-space:nowrap}
@keyframes ratio-content-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ratio-fill-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ratio-bars-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ratio-dialog-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ratio-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes ratio-toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes ratio-float{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes ratio-sticker-float{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-5px) rotate(-5deg)}}
@keyframes ratio-saved{0%{box-shadow:0 0 0 0 #7762df30}100%{box-shadow:0 0 0 10px #7762df00}}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
