/* ===== La Souris Motion System =====
   Central, lightweight animation layer.
   No shadows, no heavy blur, no bounce. Motion is subtle and disabled for reduced-motion users.
*/
:root{
  --motion-fast:120ms;
  --motion-med:180ms;
  --motion-slow:260ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);
  --motion-distance:8px;
}

@keyframes lsFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lsFadeUp{from{opacity:0;transform:translateY(var(--motion-distance))}to{opacity:1;transform:translateY(0)}}
@keyframes lsSlideInLeft{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes lsScaleIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes lsProgress{0%{transform:translateX(-100%)}100%{transform:translateX(240%)}}
@keyframes lsPulseSoft{0%,100%{opacity:.55}50%{opacity:1}}

/* App/page routing */
.view{transition:opacity var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
.view.is-leaving{opacity:0;transform:translateY(4px)}
.view-ready{animation:lsFadeUp var(--motion-med) var(--motion-ease) both}
.view-ready .module-head{animation:lsFadeUp var(--motion-med) var(--motion-ease) both}
.view-ready .card,
.view-ready .panel,
.view-ready .kpi,
.view-ready .sync-card,
.view-ready .wc-card,
.view-ready .training-card,
.view-ready .cijfer-card{
  animation:lsFadeUp var(--motion-med) var(--motion-ease) both;
}
.view-ready .card:nth-of-type(1),.view-ready .kpi:nth-of-type(1){animation-delay:20ms}
.view-ready .card:nth-of-type(2),.view-ready .kpi:nth-of-type(2){animation-delay:40ms}
.view-ready .card:nth-of-type(3),.view-ready .kpi:nth-of-type(3){animation-delay:60ms}
.view-ready .card:nth-of-type(4),.view-ready .kpi:nth-of-type(4){animation-delay:80ms}
.view-ready .card:nth-of-type(5),.view-ready .kpi:nth-of-type(5){animation-delay:100ms}
.view-ready .card:nth-of-type(6),.view-ready .kpi:nth-of-type(6){animation-delay:120ms}

/* Sidebar + topbar */
.sidebar{animation:lsSlideInLeft var(--motion-slow) var(--motion-ease) both}
.nav button,.logout,.icon-button,.btn{transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
.nav button:active,.logout:active,.icon-button:active,.btn:active{transform:translateY(1px) scale(.995)}
.nav button.active{transition:background var(--motion-med) var(--motion-ease),border-color var(--motion-med) var(--motion-ease),color var(--motion-med) var(--motion-ease)}
.user-chip{transition:border-color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease)}

/* Forms */
input,select,textarea{transition:border-color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}

/* Modals */
.modal-backdrop{animation:lsFadeIn var(--motion-med) var(--motion-ease) both}
.modal{animation:lsScaleIn var(--motion-med) var(--motion-ease) both;transform-origin:center}

/* Toasts */
.toast{animation:lsFadeUp var(--motion-med) var(--motion-ease) both}

/* Progress bars */
.progress-line,
.sync-progress,
.drive-progress,
.cijfer-progress,
.training-progress,
.wc-progress{position:relative;overflow:hidden}
.progress-line span,
.sync-progress span,
.drive-progress span,
.cijfer-progress span,
.training-progress span,
.wc-progress span{transition:width var(--motion-slow) var(--motion-ease)}
.progress-line.is-active::after,
.sync-progress.is-active::after,
.drive-progress.is-active::after,
.cijfer-progress.is-active::after,
.training-progress.is-active::after,
.wc-progress.is-active::after{
  content:"";position:absolute;inset:0;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:lsProgress 1.15s var(--motion-ease) infinite;pointer-events:none;
}
:root[data-theme='dark'] .progress-line.is-active::after,
:root[data-theme='dark'] .sync-progress.is-active::after,
:root[data-theme='dark'] .drive-progress.is-active::after,
:root[data-theme='dark'] .cijfer-progress.is-active::after,
:root[data-theme='dark'] .training-progress.is-active::after,
:root[data-theme='dark'] .wc-progress.is-active::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}

/* Loading placeholders */
.skeleton{position:relative;overflow:hidden;background:var(--panel-soft);border-radius:var(--radius-sm);min-height:14px}
.skeleton::after{content:"";position:absolute;inset:0;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);animation:lsProgress 1.25s var(--motion-ease) infinite}
:root[data-theme='dark'] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}

/* Login */
.login-photo{animation:lsFadeIn var(--motion-slow) var(--motion-ease) both}
.login-card{animation:lsFadeUp var(--motion-slow) var(--motion-ease) both;animation-delay:40ms}
.login-progress:not(.hidden){animation:lsFadeUp var(--motion-med) var(--motion-ease) both}
.step.done{transition:color var(--motion-fast) var(--motion-ease)}

/* Image/profile loading */
.profile-avatar img,.avatar-mini img{transition:opacity var(--motion-med) var(--motion-ease)}
.profile-avatar.profile-loading::after{animation:spin .7s linear infinite}

/* Utility classes for modules */
.motion-fade-in{animation:lsFadeIn var(--motion-med) var(--motion-ease) both}
.motion-fade-up{animation:lsFadeUp var(--motion-med) var(--motion-ease) both}
.motion-scale-in{animation:lsScaleIn var(--motion-med) var(--motion-ease) both}
.motion-pulse{animation:lsPulseSoft 1.25s var(--motion-ease) infinite}

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

/* Snapshot/export safety: freeze all motion and force final render state before capture. */
:root.snapshot-mode *,
:root.snapshot-mode *::before,
:root.snapshot-mode *::after,
:root.no-motion *,
:root.no-motion *::before,
:root.no-motion *::after{
  animation:none!important;
  transition:none!important;
  transform:none!important;
  animation-delay:0ms!important;
  transition-delay:0ms!important;
}
:root.snapshot-mode .view,
:root.snapshot-mode .view-ready,
:root.snapshot-mode .module-head,
:root.snapshot-mode .card,
:root.snapshot-mode .panel,
:root.snapshot-mode .kpi,
:root.snapshot-mode .sync-card,
:root.snapshot-mode .training-card,
:root.snapshot-mode .wc-card,
:root.snapshot-mode .cijfer-card,
:root.no-motion .view,
:root.no-motion .view-ready,
:root.no-motion .module-head,
:root.no-motion .card,
:root.no-motion .panel,
:root.no-motion .kpi,
:root.no-motion .sync-card,
:root.no-motion .training-card,
:root.no-motion .wc-card,
:root.no-motion .cijfer-card{
  opacity:1!important;
  transform:none!important;
}

/* Chart/progress motion helpers */
.trend-line-svg .line,
.trend-line-svg .trend-line,
.trend-line,
.mini-line path{will-change:stroke-dashoffset}
.trend-line-svg circle,
.mini-line circle{will-change:opacity,transform}
.progress-line span,.progress-bar span,.sync-progress span,.drive-progress span,.cijfer-progress span,.training-progress span,.wc-progress span,.eval-progress span,.score-bar span,.target-bar span,.ranking-bar span{will-change:width}

/* Snapshot safety for charts: always capture final chart state. */
:root.snapshot-mode svg path,
:root.snapshot-mode svg polyline,
:root.snapshot-mode svg circle,
:root.no-motion svg path,
:root.no-motion svg polyline,
:root.no-motion svg circle{
  stroke-dashoffset:0!important;
  opacity:1!important;
  transform:none!important;
}
@keyframes motionPop{from{opacity:0;transform:translateY(5px) scale(.99)}to{opacity:1;transform:none}}

/* Motion style presets */
:root[data-motion='smooth']{--ls-motion-duration:520ms;--ls-motion-ease:cubic-bezier(.2,.8,.2,1)}
:root[data-motion='spring']{--ls-motion-duration:680ms;--ls-motion-ease:cubic-bezier(.18,1.18,.24,1)}
:root[data-motion='calm']{--ls-motion-duration:360ms;--ls-motion-ease:cubic-bezier(.4,0,.2,1)}
:root[data-motion='spring'] .card,
:root[data-motion='spring'] .btn,
:root[data-motion='spring'] .kpi{transition:transform var(--ls-motion-duration) var(--ls-motion-ease), border-color .18s ease, background .18s ease}
:root[data-motion='spring'] .card:hover{transform:translateY(-2px)}
:root[data-motion='calm'] *{scroll-behavior:smooth}