/* One motion system (task 2.7): one curve, 180 ms for state, 320 ms for entering content.
   Only what is listed here animates. prefers-reduced-motion turns all of it off. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--dur-state:180ms;--dur-enter:320ms}

/* State: hover, focus, pressed and selection changes on controls. */
.button,.icon-button,.text-link,.primary-nav a,.mobile-nav>a,.okonomi-subnav a,.okonomi-tile,.row-list__row,.segmented>button,.toggle,.drawer-links>a,.drawer-links>button,.vakta-trigger{
  transition-property:background-color,border-color,color,box-shadow,opacity,transform;
  transition-duration:var(--dur-state);transition-timing-function:var(--ease)}

/* Enter: a page and a dialog arrive once. */
.page{animation:svisj-enter var(--dur-enter) var(--ease) both}
.modal{animation:svisj-enter var(--dur-enter) var(--ease)}

/* Skeleton to content: the skeleton fades in after a beat (no flash on fast loads); the page that
   replaces it fades in over the same duration, so the swap reads as a crossfade. */
.loading-screen{animation:svisj-fade var(--dur-enter) var(--ease) 120ms both}

/* A work item that resolved on Hjem: the check draws itself, then the line leaves. */
.work-resolved{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:var(--green);font-weight:600;animation:svisj-enter var(--dur-enter) var(--ease) both}
.draw-check{flex:0 0 auto}
.draw-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:svisj-draw 480ms var(--ease) 80ms forwards}

@keyframes svisj-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes svisj-fade{from{opacity:0}to{opacity:1}}
@keyframes svisj-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .draw-check path{stroke-dashoffset:0}
}