/* CPM motion, batch 1: page transitions, view entrances, skeleton loading, modal pop, toast polish.
   Everything is scoped to html.uic-on (set by ui-cpm.js; absent when motion is switched off or reduced) except the page-transition rule, which the script cancels. Only transform and opacity are animated. */

/* ---- 1. Moving between CPM pages (Cover, BSC tool, Performance Report, EFQM): a quick cross-fade instead of a white flash ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:uicOut .14s ease-in both}
::view-transition-new(root){animation:uicIn .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes uicOut{to{opacity:0}}
@keyframes uicIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---- 2. A view you switch to eases in (small blocks only; the big KPI tables are never animated) ---- */
@keyframes uicRise{from{opacity:0;transform:translateY(8px)}}
@keyframes uicFade{from{opacity:0}}
html.uic-on body.view-dashboard .view-dashboard-only{animation:uicRise .32s cubic-bezier(.2,.8,.2,1) backwards}
html.uic-on body.view-validation #validationStatsBlock,
html.uic-on body.view-validation #statsStripUnderFilters,
html.uic-on body.view-dashboard #statsStripUnderFilters{animation:uicRise .3s cubic-bezier(.2,.8,.2,1) backwards}

/* ---- 4. Loading: a skeleton of the page and a slim progress line instead of a spinner on a dark wall ---- */
html.uic-on #loadingOverlay .loading-spinner,html.uic-on #loadingOverlay .spinner{display:none}
html.uic-on #loading{flex-direction:column;gap:18px;background:rgba(240,243,246,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#333F48}
html.uic-on .loading-overlay{background:rgba(240,243,246,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.uic-on .loading-overlay .loading-text,html.uic-on .loading .txt{color:#333F48}
html.uic-on #loadingOverlay,html.uic-on #loading{animation:uicFade .18s ease-out}
.uic-prog{display:none;width:220px;height:3px;border-radius:2px;background:rgba(51,63,72,.12);overflow:hidden;position:relative}
html.uic-on #loadingOverlay .uic-prog,html.uic-on #loading .uic-prog{display:block}
.uic-prog::after{content:"";position:absolute;inset:0;background:var(--terracotta,#B6735C);border-radius:2px;transform:translateX(-100%);animation:uicProg 1.15s cubic-bezier(.4,0,.2,1) infinite}
@keyframes uicProg{to{transform:translateX(100%)}}
.uic-skel{display:none;position:relative;overflow:hidden;width:min(1080px,88vw);box-sizing:border-box;padding:18px 20px 8px;border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 10px 40px rgba(51,63,72,.12)}
html.uic-on:not(.uic-loaded) #loadingOverlay .uic-skel,html.uic-on:not(.uic-loaded) #loading .uic-skel{display:block}
.uic-skel i{display:block;border-radius:6px;background:#e3e7ec}
.uic-skel .r1{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}.uic-skel .r1 i{height:46px}
.uic-skel .r2{height:28px;width:58%;margin-bottom:14px}
.uic-skel .r3 i{height:15px;margin-bottom:11px}.uic-skel .r3 i:nth-child(3n){width:84%}.uic-skel .r3 i:nth-child(3n+1){width:93%}.uic-skel .r3 i:nth-child(4n){width:71%}
.uic-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-100%);animation:uicSheen 1.6s ease-in-out infinite}
@keyframes uicSheen{to{transform:translateX(100%)}}

/* ---- 6. Dialogs grow out of the button that opened them; toasts get a countdown line, a swipe and a repeat counter ---- */
@keyframes uicPop{from{opacity:0;transform:translateY(10px) scale(.93)}}
html.uic-on .modal-card,html.uic-on .confirm-modal,html.uic-on .acc-card,html.uic-on .tm-md{animation:uicPop .28s cubic-bezier(.2,.9,.3,1.15) backwards}
html.uic-on .modal-overlay,html.uic-on .acc-overlay,html.uic-on .tm-ov{animation:uicFade .18s ease-out}
@keyframes uicToastIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}}
html.uic-on .tm-toast{overflow:hidden;animation:uicToastIn .26s cubic-bezier(.2,.9,.3,1.1)}
html.uic-on .toast{position:relative;overflow:hidden;touch-action:pan-y}
.uic-tbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.55);transform-origin:left center;animation:uicBar var(--uic-dur,5s) linear forwards}
.toast:hover .uic-tbar{animation-play-state:paused}
@keyframes uicBar{to{transform:scaleX(0)}}
.uic-n{margin-left:4px;padding:0 7px;border-radius:9px;background:rgba(255,255,255,.22);font-size:11px;font-weight:700;animation:uicBump .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes uicBump{from{transform:scale(.6)}}

/* ---- 7. Saving feels alive: the counter ticks, an edited row settles, a saved button pulses ---- */
html.uic-on .btn-top.uic-tick,html.uic-on .btn-mini.uic-tick{animation:uicTick .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes uicTick{0%{transform:scale(.9)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
html.uic-on .btn-top.uic-saved,html.uic-on .btn-mini.uic-saved{animation:uicSaved 1s ease-out}
@keyframes uicSaved{0%{box-shadow:0 0 0 0 rgba(46,125,67,.65)}100%{box-shadow:0 0 0 10px rgba(46,125,67,0)}}
html.uic-on .kpi-table tbody tr.uic-just td{animation:uicEdit 1.1s ease-out}
@keyframes uicEdit{from{box-shadow:inset 0 -2px 0 var(--terracotta,#B6735C)}to{box-shadow:inset 0 -2px 0 rgba(182,115,92,0)}}

/* ---- 8. A full score gets one soft ring (not confetti) ---- */
html.uic-on .epc-gauge.uic-glow::before{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 rgba(46,125,67,.6);animation:uicRing 2.2s ease-out 3}
@keyframes uicRing{0%{box-shadow:0 0 0 0 rgba(46,125,67,.6)}60%{box-shadow:0 0 0 12px rgba(46,125,67,.25)}100%{box-shadow:0 0 0 18px rgba(46,125,67,0)}}
html.uic-on .epc-kpi-bar .fill[style*="width:100%"]{animation:uicBarGlow 1.6s ease-out 1}
@keyframes uicBarGlow{0%{box-shadow:0 0 0 0 rgba(46,125,67,.5)}100%{box-shadow:0 0 0 7px rgba(46,125,67,0)}}

/* ---- 9. Scrolling: a table header lifts with a shadow once the rows move under it; the top bar does too ---- */
html.uic-on .uic-sc th{box-shadow:0 7px 10px -7px rgba(51,63,72,.5)}
html.uic-on .topbar{transition:box-shadow .25s}
html.uic-on.uic-pgsc .topbar{box-shadow:0 6px 18px rgba(0,0,0,.28)}

/* ---- 10. Cover tiles: a light follows the pointer and the tile leans a few degrees toward it (real pointers only) ---- */
@media (hover:hover) and (pointer:fine){
  html.uic-on .nav-card:not(.soon):hover{transform:translateY(-4px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  html.uic-on .nav-card:not(.soon)::after{background:radial-gradient(440px circle at var(--mx,30%) var(--my,0%),rgba(214,132,92,.30),transparent 55%),linear-gradient(135deg,rgba(184,98,61,.12) 0%,transparent 60%)}
}

@media (prefers-reduced-motion:reduce){
  html.uic-on body .view-dashboard-only,html.uic-on #statsStripUnderFilters,html.uic-on #validationStatsBlock,html.uic-on .modal-card,html.uic-on .confirm-modal,html.uic-on .acc-card,html.uic-on .tm-md,html.uic-on .modal-overlay,html.uic-on .acc-overlay,html.uic-on .tm-ov,html.uic-on .tm-toast,html.uic-on #loadingOverlay,html.uic-on #loading{animation:none}
  .uic-skel::after,.uic-prog::after,.uic-tbar,.uic-n{animation:none}
  html.uic-on .btn-top.uic-tick,html.uic-on .btn-mini.uic-tick,html.uic-on .btn-top.uic-saved,html.uic-on .btn-mini.uic-saved,html.uic-on .kpi-table tbody tr.uic-just td,html.uic-on .epc-gauge.uic-glow::before,html.uic-on .epc-kpi-bar .fill{animation:none}
}