/* ============================================================
   Gerak (motion) — dimuat setelah theme-apple.css. Kelas mo-* dipasang
   oleh motion.js hanya saat pindah halaman. Dimatikan otomatis untuk
   pengguna "Kurangi gerakan" dan saat dicetak.
   ============================================================ */
@keyframes mo-up{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mo-pop{0%{opacity:0;transform:translateY(16px) scale(.9)}60%{opacity:1;transform:translateY(-2px) scale(1.025)}100%{opacity:1;transform:none}}
@keyframes mo-row{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes mo-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mo-draw{to{stroke-dashoffset:0}}
@keyframes mo-fadein{from{opacity:0}to{opacity:1}}
@keyframes mo-slice{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes mo-shimmer{to{background-position:-200% 0}}
@keyframes mo-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 11px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
@keyframes mo-ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.8);opacity:0}}
@keyframes mo-blink{0%,100%{opacity:1}50%{opacity:.3}}

.mo-in{animation:mo-up .65s cubic-bezier(.2,.8,.2,1) var(--d,0ms) backwards}
.kpi.mo-in{animation-name:mo-pop;animation-duration:.75s;animation-timing-function:cubic-bezier(.2,1,.3,1)}
.pcard.mo-in,.tile.mo-in{animation-name:mo-pop;animation-duration:.55s}
.mo-row{animation:mo-row .42s ease var(--d,0ms) backwards}
.bar-fill.mo-grow{transform-origin:left center;animation:mo-grow 1s cubic-bezier(.2,.8,.2,1) var(--d,0ms) backwards}
.mo-rise{transform-box:fill-box;transform-origin:50% 100%;animation:mo-rise .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms) backwards}
.mo-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:mo-draw 1.4s cubic-bezier(.3,.6,.2,1) .15s forwards}
.mo-fade{animation:mo-fadein .9s ease var(--d,700ms) backwards}
.mo-slice{transform-box:fill-box;transform-origin:center;animation:mo-slice .65s cubic-bezier(.2,1.1,.3,1) var(--d,0ms) backwards}

/* kerangka berkilau selama halaman dimuat */
.empty.mo-loading{position:relative;color:transparent;font-size:0;padding:0;min-height:230px}
.empty.mo-loading::before,.empty.mo-loading::after{content:"";display:block;border-radius:var(--r);background:linear-gradient(100deg,var(--fill) 30%,rgba(255,255,255,.55) 50%,var(--fill) 70%) 0 0/200% 100%;animation:mo-shimmer 1.3s linear infinite}
.empty.mo-loading::before{height:34px;width:42%;margin-bottom:16px;border-radius:10px}
.empty.mo-loading::after{height:170px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .empty.mo-loading::before,:root:not([data-theme="light"]) .empty.mo-loading::after{background-image:linear-gradient(100deg,var(--fill) 30%,rgba(255,255,255,.10) 50%,var(--fill) 70%)}}
:root[data-theme="dark"] .empty.mo-loading::before,:root[data-theme="dark"] .empty.mo-loading::after{background-image:linear-gradient(100deg,var(--fill) 30%,rgba(255,255,255,.10) 50%,var(--fill) 70%)}

/* bilah progres di tepi atas */
#moTop{position:fixed;top:0;left:0;right:0;height:3px;z-index:99999;transform-origin:left;transform:scaleX(0);opacity:0;pointer-events:none;background:linear-gradient(90deg,#0a84ff,#5ac8fa 60%,#34c759);box-shadow:0 0 12px rgba(10,132,255,.65)}

/* kartu KPI: lengkungan 3D + kilau mengikuti kursor */
.kpi{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s;will-change:transform}
.kpi.tilt{transition:transform .09s linear,box-shadow .3s;box-shadow:var(--shadow-lg)}
.kpi::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(120,165,255,.20),transparent 62%)}
.kpi:hover::before{opacity:1}
.kpi .k-ic,.h-ic{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.kpi:hover .k-ic{transform:scale(1.14) rotate(-7deg)}
.kpi.bd .k-ic{animation:mo-pulse 2.4s ease-out infinite}
.k-delta{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.kpi:hover .k-delta{transform:scale(1.08)}

/* navigasi */
.nav a{transition:background .15s,color .15s,transform .25s cubic-bezier(.2,.8,.2,1)}
.nav a:hover{transform:translateX(3px)}
.nav a.active:hover{transform:none}
.nav a .ic{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.nav a:hover .ic{transform:scale(1.18) rotate(-6deg)}
.nav a.active .ic{transform:none}

/* tombol utama: kilau menyapu saat disorot */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%)}
.btn.primary:hover::after{transform:translateX(130%);transition:transform .75s ease}

/* tabel, kartu produk, indikator */
table.tbl tbody tr td:first-child{transition:box-shadow .2s}
table.tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.pcard .pimg{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pimg{transform:scale(1.06)}
.tb-ic .dot-n::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--bad);z-index:-1;animation:mo-ping 1.9s ease-out infinite}
.chip.bd .dot{animation:mo-blink 1.6s ease-in-out infinite}
.bar-fill{transition:width .6s cubic-bezier(.2,.8,.2,1)}
.chip,.k-delta{transition:transform .2s}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-iteration-count:1 !important}#moTop{display:none}}
@media print{.mo-in,.mo-row,.mo-grow,.mo-rise,.mo-draw,.mo-fade,.mo-slice{animation:none !important}.mo-draw{stroke-dashoffset:0 !important}}

.tile-ic{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.tile:hover .tile-ic{transform:scale(1.1) rotate(-6deg)}