/* ===== Hybrid-SPA: NProgress + View Transitions ===== */
#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  background: #f39c12;
  position: fixed;
  z-index: 20000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
}
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #f39c12, 0 0 5px #f39c12;
  opacity: 1;
  transform: rotate(3deg) translate(0, -4px);
}
#nprogress .spinner {
  display: none !important;
}

/* Beri nama elemen shell agar View Transitions hanya menganimasikan konten.
 *
 * CATATAN PENTING: `view-transition-name` membuat stacking context. Tanpa
 * z-index eksplisit, context #site-header (z:auto, lebih dulu di DOM) kalah
 * dari #site-main sehingga konten menutupi navbar/dropdown saat scroll.
 * Header harus selalu berada di atas konten. */
#site-header {
  position: relative;
  z-index: 2000;
  view-transition-name: site-header;
}
#site-footer {
  position: relative;
  z-index: 1;
  view-transition-name: site-footer;
}
#site-main {
  position: relative;
  z-index: 0;
  view-transition-name: site-main;
}

::view-transition-old(site-main) {
  animation: rpm-spa-fade-out 140ms ease both;
}
::view-transition-new(site-main) {
  animation: rpm-spa-fade-in 220ms ease both;
}
@keyframes rpm-spa-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes rpm-spa-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(site-main),
  ::view-transition-new(site-main) {
    animation: none !important;
  }
}