/* -------------------------------------------------------------------------
   KKMI — motion.css
   Animasi masuk berbasis CSS scroll-driven; fallback IntersectionObserver
   ditangani motion.js (≤ 1,5 KB). Tanpa library.
   ------------------------------------------------------------------------- */

/* View Transitions: progressive enhancement, browser lama mengabaikan. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* Jalur utama: scroll-driven animation tanpa JavaScript. */
  @supports (animation-timeline: view()) {
    .kkmi-reveal {
      animation: kkmi-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    @keyframes kkmi-fade-up {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }

  /* Fallback hanya aktif bila motion.js menandai <html class="kkmi-io">.
     Tanpa JS, konten tetap terlihat (tidak ada konten tersembunyi). */
  @supports not (animation-timeline: view()) {
    .kkmi-io .kkmi-reveal {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 320ms cubic-bezier(0.2, 0, 0, 1),
        transform 320ms cubic-bezier(0.2, 0, 0, 1);
    }

    .kkmi-io .kkmi-reveal.is-visible {
      opacity: 1;
      transform: none;
    }
  }
}

/* Hormati preferensi pengguna: tidak ada animasi maupun transisi. */
@media (prefers-reduced-motion: reduce) {
  .kkmi-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}