/* Efek: tilt 3D + kilau, kedalaman, animasi masuk, denyut SLA, transisi halaman, skeleton.
   Semua dimatikan bila pengguna memilih "kurangi gerakan" di sistem operasinya. */

/* ---------- tilt 3D (nilai --rx/--ry/--mx/--my/--px/--py dihitung di app.js) ---------- */
.tilt{position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ease),box-shadow .35s}
.tilt.tilting{transition:transform .08s linear,box-shadow .2s;box-shadow:0 22px 44px color-mix(in srgb,var(--brand) 16%,transparent),0 4px 10px rgba(15,27,45,.06)}
.tilt::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--glare),transparent 55%);opacity:0;transition:opacity .3s}
.tilt.tilting::before{opacity:1}
/* lapisan "melayang": ikon & angka bergeser lebih jauh dari kartu */
.tilt .kic{transform:translate(calc(var(--px,0) * 10px),calc(var(--py,0) * 10px));transition:transform .45s var(--ease),box-shadow .3s}
.tilt.tilting .kic{transition:transform .08s linear;box-shadow:calc(var(--px,0) * -8px) calc(6px + var(--py,0) * -8px) 14px color-mix(in srgb,var(--pri) 25%,transparent)}
.tilt b{transform:translate(calc(var(--px,0) * 5px),calc(var(--py,0) * 5px));transition:transform .45s var(--ease)}
.tilt.tilting b{transition:transform .08s linear}
.tilt .col b,.tilt .bar b{transform:none}

/* ---------- animasi masuk berurutan ---------- */
.kpis>*,.quick-actions>*,.grid2>*,main>.card,.kb-col{animation:rise .55s var(--ease) both}
.kpis>:nth-child(2),.quick-actions>:nth-child(2),.grid2>:nth-child(2),.kb-col:nth-child(2){animation-delay:.05s}
.kpis>:nth-child(3),.quick-actions>:nth-child(3),.grid2>:nth-child(3),.kb-col:nth-child(3){animation-delay:.1s}
.kpis>:nth-child(4),.quick-actions>:nth-child(4),.grid2>:nth-child(4),.kb-col:nth-child(4){animation-delay:.15s}
.kpis>:nth-child(5),.quick-actions>:nth-child(5),.kb-col:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ---------- denyut untuk hal yang perlu perhatian (SLA, urgent) ---------- */
.kpi.warn .kic{position:relative}
.kpi.warn .kic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 55%,transparent);animation:ring 2s ease-out infinite}
.badge.p-urgent{animation:glow 1.6s ease-in-out infinite}
.badge.late{background:var(--err-soft);color:var(--err);animation:glow 1.6s ease-in-out infinite}
@keyframes ring{70%,100%{box-shadow:0 0 0 12px transparent}}
@keyframes glow{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--err) 22%,transparent)}}

/* ---------- transisi antarhalaman (Chrome/Edge; browser lain langsung pindah) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .16s ease-in both}
::view-transition-new(root){animation:vt-in .3s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- skeleton (placeholder saat memuat) ---------- */
.skel{position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--surface) 70%,transparent) 50%,transparent 80%);transform:translateX(-100%);animation:shimmer 1.1s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

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

/* ---------- kanvas 3D (fx3d.js) ---------- */
.fx3d canvas{display:block;width:100%!important;height:100%!important}