/* ==========================================================================
   LaporanWee — Motion Layer (CSS)
   Lapisan animasi non-invasif: tidak mengubah layout/warna yang sudah ada.
   ========================================================================== */

/* ---------- 1. Font POPFUN ---------- */
@font-face {
  font-family: "POPFUN";
  src: url("./POPFUN.woff2") format("woff2"),
       url("./POPFUN.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --lw-font-display: "POPFUN", 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --lw-font: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Easing */
  --lw-ease-out: cubic-bezier(.22, 1, .36, 1);      /* masuk: cepat lalu mengendap halus */
  --lw-ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* transisi halaman */
  --lw-ease-spring: cubic-bezier(.34, 1.56, .64, 1);/* feedback klik */

  --lw-fast: 160ms;
  --lw-base: 260ms;
  --lw-slow: 520ms;
}

html {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* POPFUN hanya untuk display heading, decorative heading, visual accent, selected large titles */
.display-heading,
.page-head h1,
.stat-chip .num,
[data-motion-font="display"] {
  font-family: var(--lw-font-display);
}

/* ---------- 2. Transisi halus untuk elemen interaktif (hover/focus/press) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  :where(a, button, [role="button"], [role="tab"], [role="menuitem"], summary, label,
         input, select, textarea, [class*="btn"], [class*="card"]:not([role="dialog"] *), [class*="item"]:not([role="dialog"] *)) {
    transition-property: color, background-color, border-color, box-shadow, opacity, translate, scale;
    transition-duration: var(--lw-base);
    transition-timing-function: var(--lw-ease-out);
  }

  /* Press feedback */
  :where(button, [role="button"], [role="tab"], a[class*="btn"], a[class*="button"], [class*="btn"], summary):active {
    scale: .98;
    transition-duration: var(--lw-fast);
    transition-timing-function: var(--lw-ease-spring);
  }
  :where(button, [role="button"], [class*="btn"]):is(:disabled, [aria-disabled="true"]):active { scale: 1; }

  /* Kartu yang bisa diklik: sedikit terangkat saat hover */
  @media (hover: hover) {
    :where(a[class*="card"], button[class*="card"], [class*="card"][tabindex], [class*="card"][onclick],
           [data-motion~="lift"]):not([role="dialog"] *):hover {
      translate: 0 -2px;
    }
    :where(a[class*="card"], button[class*="card"], [class*="card"][tabindex], [class*="card"][onclick],
           [data-motion~="lift"]):not([role="dialog"] *):active {
      translate: 0 -1px;
      scale: .995;
    }
  }

  /* Bar progres */
  :where([role="progressbar"] > *, progress, [class*="progress"] > [style*="width"], [class*="bar-fill"], [class*="progress-fill"]) {
    transition: width .8s var(--lw-ease-out), inline-size .8s var(--lw-ease-out);
  }
}

/* ---------- 3. Keyframes ---------- */
@keyframes lw-reveal {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes lw-view-in {
  from { opacity: 0; translate: 0 6px; scale: .994; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes lw-pop {
  from { opacity: 0; translate: 0 8px; scale: .98; }
  to   { opacity: 1; translate: 0 0;   scale: 1; }
}
@keyframes lw-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lw-ripple {
  from { scale: 0; opacity: .22; }
  to   { scale: 1; opacity: 0; }
}
@keyframes lw-bar {
  0%   { scale: 0 1;   opacity: 1; }
  60%  { scale: .85 1; opacity: 1; }
  100% { scale: 1 1;   opacity: 0; }
}

/* ---------- 4. Kelas yang dipasang oleh laporanwe-motion.js ---------- */
.lw-reveal { opacity: 0; translate: 0 16px; }
.lw-reveal.lw-in {
  animation: lw-reveal 480ms var(--lw-ease-out) var(--lw-d, 0ms) both;
}

.lw-view-in { animation: lw-view-in 300ms var(--lw-ease-out) both; }
.lw-pop     { animation: lw-pop 250ms var(--lw-ease-out) both; transform-origin: 50% 50%; }
.lw-fade    { animation: lw-fade 220ms var(--lw-ease-out) both; }

/* Bar progres tipis saat pindah halaman/dashboard */
.lw-bar {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 2147483000;
  pointer-events: none; transform-origin: 0 50%;
  background: var(--violet, #6a54f0);
  scale: 0 1; opacity: 0;
}
.lw-bar.run { animation: lw-bar 650ms var(--lw-ease-out) forwards; }

/* Ripple klik */
.lw-ripple {
  position: fixed; overflow: hidden; pointer-events: none; z-index: 2147483000;
}
.lw-ripple > i {
  position: absolute; border-radius: 50%; background: currentColor;
  opacity: 0; scale: 0;
  animation: lw-ripple 500ms var(--lw-ease-out) forwards;
}

/* Parallax opsional */
[data-parallax]:not([role="dialog"] *) { translate: 0 var(--lw-py, 0px); will-change: translate; }

/* CRITICAL: Strict modal and image preview isolation against flicker and blur */
[data-motion="none"],
[data-motion="none"] *,
[role="dialog"] img,
[class*="lightbox"] img,
[class*="viewer"] img,
.lightbox-img,
.media-image-display {
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  animation-name: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .lw-reveal, .lw-reveal.lw-in { opacity: 1 !important; translate: none !important; animation: none !important; }
  .lw-view-in, .lw-pop, .lw-fade { animation: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}