/* ==========================================================================
   SCROLL REVEAL — animasi masuk viewport dari bawah / samping / diagonal

   Contoh pakai manual:
     <div class="reveal">                 arah dipilih otomatis oleh JS
     <div class="reveal reveal-left">     arah manual: up / down / left /
     <div class="reveal reveal-right">            right / diag / zoom
     <div class="reveal reveal-diag">
     <div data-reveal="zoom">
     <div class="no-reveal">              tidak pernah dianimasikan

   Animasi bisa berulang: scroll ke bawah -> naik lagi -> turun lagi,
   elemen yang sudah terlewati akan diulang dari awal.
   Hormati prefers-reduced-motion.
   ========================================================================== */

html.js-reveal {
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --reveal-time: .68s;
  --reveal-dist-x: 46px;
  --reveal-dist-y: 34px;

  /* Elemen yang masih digeser ke samping tidak boleh memunculkan scroll
     horizontal. clip (bukan hidden) supaya position: sticky tetap bekerja. */
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html.js-reveal {
    overflow-x: hidden;
  }
}

/* ---------- Arah gerak ---------- */
html.js-reveal .reveal-up,
html.js-reveal [data-reveal='up'] {
  --reveal-x: 0;
  --reveal-y: var(--reveal-dist-y);
  --reveal-scale: .985;
}

html.js-reveal .reveal-down,
html.js-reveal [data-reveal='down'] {
  --reveal-x: 0;
  --reveal-y: calc(-1 * var(--reveal-dist-y));
  --reveal-scale: .985;
}

html.js-reveal .reveal-left,
html.js-reveal [data-reveal='left'] {
  --reveal-x: var(--reveal-dist-x);
  --reveal-y: calc(var(--reveal-dist-y) * .65);
  --reveal-scale: .985;
}

html.js-reveal .reveal-right,
html.js-reveal [data-reveal='right'] {
  --reveal-x: calc(-1 * var(--reveal-dist-x));
  --reveal-y: calc(var(--reveal-dist-y) * .65);
  --reveal-scale: .985;
}

html.js-reveal .reveal-diag,
html.js-reveal [data-reveal='diag'] {
  --reveal-x: calc(var(--reveal-dist-x) * .75);
  --reveal-y: var(--reveal-dist-y);
  --reveal-scale: .97;
}

html.js-reveal .reveal-zoom,
html.js-reveal [data-reveal='zoom'] {
  --reveal-x: 0;
  --reveal-y: calc(var(--reveal-dist-y) * .6);
  --reveal-scale: .9;
}

/* ---------- Base: elemen tersembunyi ---------- */
html.js-reveal .reveal,
html.js-reveal .reveal-stagger,
html.js-reveal [data-reveal] {
  opacity: 0;
  translate: var(--reveal-x, 0) var(--reveal-y, var(--reveal-dist-y));
  scale: var(--reveal-scale, .985);
  transition:
    opacity var(--reveal-time) var(--reveal-ease),
    translate var(--reveal-time) var(--reveal-ease),
    scale var(--reveal-time) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0s);
}

/* ---------- Opsi berhenti: tetap terlihat apa adanya ---------- */
html.js-reveal [data-reveal='off'],
html.js-reveal .no-reveal {
  opacity: 1;
  translate: none;
  scale: 1;
  transition: none;
}

/* ---------- Saat masuk viewport ---------- */
html.js-reveal .reveal.reveal-active,
html.js-reveal .reveal-stagger.reveal-active,
html.js-reveal [data-reveal].reveal-active {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* ---------- Elemen yang sudah di layar saat halaman dimuat: ---------- */
/* ---------- langsung tampil, tanpa animasi (hanya sekali) ---------- */
html.js-reveal .reveal-silent,
html.js-reveal .reveal-stagger.reveal-silent,
html.js-reveal .reveal-stagger.reveal-silent > *,
html.js-reveal [data-reveal].reveal-silent {
  transition: none !important;
  transition-delay: 0s !important;
}

/* ---------- Fallback untuk browser tanpa properti translate/scale ---------- */
@supports not (translate: 0 0) {
  html.js-reveal .reveal,
  html.js-reveal .reveal-stagger,
  html.js-reveal [data-reveal] {
    transform: translate3d(
      var(--reveal-x, 0),
      var(--reveal-y, var(--reveal-dist-y)),
      0
    ) scale(var(--reveal-scale, .985));
  }

  html.js-reveal .reveal.reveal-active,
  html.js-reveal .reveal-stagger.reveal-active,
  html.js-reveal [data-reveal].reveal-active {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ---------- Kompatibilitas .reveal-stagger (isi grid) ---------- */
html.js-reveal .reveal-stagger > * {
  opacity: 0;
  translate: 0 calc(var(--reveal-dist-y) * .7);
  scale: .985;
  transition:
    opacity .58s var(--reveal-ease),
    translate .58s var(--reveal-ease),
    scale .58s var(--reveal-ease);
}

html.js-reveal .reveal-stagger.reveal-active > * {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

@supports not (translate: 0 0) {
  html.js-reveal .reveal-stagger > * {
    transform: translate3d(0, calc(var(--reveal-dist-y) * .7), 0) scale(.985);
  }

  html.js-reveal .reveal-stagger.reveal-active > * {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

html.js-reveal .reveal-stagger.reveal-active > *:nth-child(1) { transition-delay: .04s; }
html.js-reveal .reveal-stagger.reveal-active > *:nth-child(2) { transition-delay: .09s; }
html.js-reveal .reveal-stagger.reveal-active > *:nth-child(3) { transition-delay: .14s; }
html.js-reveal .reveal-stagger.reveal-active > *:nth-child(4) { transition-delay: .19s; }
html.js-reveal .reveal-stagger.reveal-active > *:nth-child(5) { transition-delay: .24s; }
html.js-reveal .reveal-stagger.reveal-active > *:nth-child(6) { transition-delay: .29s; }
html.js-reveal .reveal-stagger.reveal-active > *:nth-child(n+7) { transition-delay: .34s; }

/* ---------- Footer selalu tampil utuh ---------- */
html.js-reveal footer .reveal,
html.js-reveal footer .reveal-stagger,
html.js-reveal footer .reveal-stagger > *,
html.js-reveal footer [data-reveal] {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* ---------- Layar kecil: jarak geser dikecilkan ---------- */
@media (max-width: 700px) {
  html.js-reveal {
    --reveal-dist-x: 22px;
    --reveal-dist-y: 24px;
    --reveal-time: .55s;
  }
}

/* ---------- Kurangi gerakan ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal,
  html.js-reveal .reveal-stagger,
  html.js-reveal .reveal-stagger > *,
  html.js-reveal [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}