@keyframes skeleton-sweep{
  from{background-position:100% 0}
  to{background-position:-100% 0}
}

@keyframes surface-enter{
  from{opacity:.55;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes line-enter{
  from{stroke-dashoffset:900}
  to{stroke-dashoffset:0}
}

.skeleton-line{animation-name:skeleton-sweep;animation-duration:900ms;animation-timing-function:ease-out;animation-iteration-count:1;animation-fill-mode:both}
.metric-card,.risk-card,.readiness-summary-card{animation:surface-enter 260ms ease-out 1 both}
.trend-line-current,.trend-line-previous{stroke-dasharray:900;stroke-dashoffset:900;animation:line-enter 500ms ease-out 1 both}
.motion-count-complete{transition:color 180ms ease-out;color:var(--color-primary)}
.motion-draw-complete{stroke-dashoffset:0}
.motion-highlight{transition:background-color 220ms ease-out;background-color:var(--color-primary-soft)}
.motion-transition{animation:surface-enter 240ms ease-out 1 both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .motion-count-complete,.motion-draw-complete,.motion-highlight,.motion-transition{transform:none!important;opacity:1!important}
}