/* Motion — tokens and rules copied from hrms-interactions.html (Dev settings) */
:root{
  --dur-instant:80ms;--dur-fast:120ms;--dur-base:200ms;--dur-medium:240ms;--dur-slow:320ms;--dur-page:280ms;
  --ease-standard:cubic-bezier(.2,0,0,1);--ease-emphasized:cubic-bezier(.2,.8,.2,1);--ease-enter:cubic-bezier(0,0,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}

/* CTAs: hover / press / focus / disabled */
.btn{transition:background-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard)}
.btn.primary:hover{box-shadow:0 6px 16px -6px rgba(15,118,110,.45)}
.btn:active:not([disabled]){transform:scale(.98);box-shadow:none}
.btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.btn .ir{transition:transform var(--dur-base) var(--ease-emphasized)}
.btn:hover .ir{transform:translateX(3px)}
.btn.link:hover{text-decoration:underline;text-underline-offset:3px}
.btn[disabled]{pointer-events:none}

/* Segment: hover on inactive option; selection cross-fade */
.seg{transition:background-color var(--dur-medium) var(--ease-emphasized),color var(--dur-medium) var(--ease-emphasized)}
.seg .count{transition:background-color var(--dur-medium) var(--ease-emphasized),color var(--dur-medium)}

/* Page content swap: fade + rise 6px */
.swap{animation:swapIn var(--dur-base) var(--ease-enter)}
@keyframes swapIn{from{opacity:0;transform:translateY(6px)}}

/* Table rows */
.tbl td{transition:background-color var(--dur-instant) linear}

/* Toggles, checkboxes, inputs */
.toggle{transition:background-color var(--dur-base) var(--ease-emphasized)}
.toggle::after{transition:transform var(--dur-base) var(--ease-emphasized)}
.cb{transition:background-color var(--dur-fast),box-shadow var(--dur-fast)}
.input{transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.input:focus,.input:focus-within{box-shadow:0 0 0 3px rgba(20,184,166,.18),inset 0 0 0 1px var(--border-focus)}

/* Pop-up: scrim 200ms; panel fades in, scales .96 → 1 and rises 2% */
.scrim{animation:scrimIn var(--dur-base) var(--ease-standard)}
@keyframes scrimIn{from{opacity:0}}
.popup{animation:popIn var(--dur-base) var(--ease-enter)}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-48%) scale(.96)}}
/* Drawer: slides in from the right 320ms drawer-ease; fields fade + rise 6px, stagger 40ms (max 8) */
.drawer{animation:drawerIn var(--dur-slow) var(--ease-drawer)}
@keyframes drawerIn{from{transform:translateX(100%)}}
.drawer .ov-body>*{animation:fieldIn var(--dur-base) var(--ease-enter) both}
.drawer .ov-body>*:nth-child(1){animation-delay:40ms}.drawer .ov-body>*:nth-child(2){animation-delay:80ms}.drawer .ov-body>*:nth-child(3){animation-delay:120ms}.drawer .ov-body>*:nth-child(4){animation-delay:160ms}
.drawer .ov-body>*:nth-child(5){animation-delay:200ms}.drawer .ov-body>*:nth-child(6){animation-delay:240ms}.drawer .ov-body>*:nth-child(7){animation-delay:280ms}.drawer .ov-body>*:nth-child(n+8){animation-delay:320ms}
@keyframes fieldIn{from{opacity:0;transform:translateY(6px)}}
.noanim .scrim,.noanim .drawer,.noanim .popup,.noanim .drawer .ov-body>*{animation:none}
/* Close: reverse, faster */
.closing .scrim{animation:scrimOut var(--dur-fast) var(--ease-exit) forwards}
.closing .popup{animation:popOut var(--dur-fast) var(--ease-exit) forwards}
.closing .drawer{animation:drawerOut var(--dur-medium) var(--ease-exit) forwards}
@keyframes scrimOut{to{opacity:0}}@keyframes popOut{to{opacity:0;transform:translate(-50%,-48%) scale(.96)}}@keyframes drawerOut{to{transform:translateX(100%)}}
body.locked{position:fixed;left:0;right:0;width:100%}

/* Toast: bottom 24 centre, translateY 24 → 0 + fade, 240ms emphasized */
.toast{animation:toastIn var(--dur-medium) var(--ease-emphasized)}
@keyframes toastIn{from{opacity:0;transform:translateY(24px)}}

/* Validation: shake ±4px twice, 320ms */
.shake{animation:shake var(--dur-slow) var(--ease-standard)}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-4px)}}

/* Prototype panel — outside the product screen */
.proto-bar{position:sticky;top:0;z-index:80;height:52px;background:#141412;color:#fff;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:12px}
.proto-bar b{font-weight:700;letter-spacing:.02em}
.proto-bar select,.proto-bar button{background:#2A2D28;color:#fff;border:0;border-radius:8px;height:32px;padding:0 10px;font:inherit;font-size:12px;cursor:pointer}
.proto-bar select{max-width:420px}
.proto-bar button:hover{background:#43473F}
.proto-bar .sep{width:1px;height:24px;background:#43473F}
.proto-bar .frame-no{color:#9CA09A}
.proto-bar .note{color:#FFEAAC;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-go]{cursor:pointer}
.hint-go{box-shadow:0 0 0 2px rgba(190,223,74,.0)}
body.show-hotspots [data-go]{box-shadow:0 0 0 2px #BEDF4A!important}
.proto{display:none}

/* Frame-to-frame changes */
tr.changed td{animation:rowChanged 1.6s var(--ease-standard)}
.list-row.changed{animation:rowChanged 1.6s var(--ease-standard)}
@keyframes rowChanged{0%,30%{background:var(--success-bg)}}
.step.advanced .mk,.vstep.advanced .mk{animation:stepPop var(--dur-medium) var(--ease-emphasized)}
@keyframes stepPop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.step.advanced::before{animation:lineFill var(--dur-slow) var(--ease-standard);transform-origin:left}
@keyframes lineFill{from{transform:scaleX(0)}}
.infobar.bar-in{animation:barIn var(--dur-medium) var(--ease-emphasized)}
@keyframes barIn{from{opacity:0;transform:translateY(-6px)}}
/* Async submit: spinner 700ms / rev; button keeps its width */
.btn.busy{pointer-events:none;justify-content:center}
.spin{width:14px;height:14px;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:spin 700ms linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}