/*
 * Ilustrasi bergerak.
 *
 * Semuanya SVG sebaris: bisa mewarisi token tema, tajam di layar berapa pun,
 * dan tidak menambah satu pun permintaan jaringan. Gerakannya digerakkan CSS,
 * bukan JavaScript — peramban menganimasikannya di thread penyusun, jadi ia
 * tetap halus saat halaman sedang digulir.
 *
 * Setiap animasi berhenti sendiri bila orangnya meminta gerak dikurangi;
 * aturan globalnya ada di klopt.css, dan yang di sini hanya menambahkan
 * keadaan akhir supaya ilustrasi tetap terbaca saat diam.
 */

.ilus {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.ilus text {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  fill: var(--ink-muted);
  letter-spacing: 0.01em;
}

.ilus .mono-kecil {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--ink-subtle);
  font-weight: 400;
}

.ilus .judul-kecil {
  font-size: 10px;
  fill: var(--ink);
  font-weight: 650;
}

.ilus .kotak {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1;
}

.ilus .kotak-sunken {
  fill: var(--sunken);
  stroke: var(--line);
  stroke-width: 1;
}

.ilus .kotak-aksen {
  fill: var(--accent-soft);
  stroke: color-mix(in oklch, var(--accent) 30%, transparent);
  stroke-width: 1;
}

.ilus .kotak-sukses {
  fill: var(--success-soft);
  stroke: color-mix(in oklch, var(--success) 30%, transparent);
}

.ilus .kotak-perhatian {
  fill: var(--attention-soft);
  stroke: color-mix(in oklch, var(--attention) 30%, transparent);
}

.ilus .kotak-draft {
  fill: var(--draft-soft);
  stroke: var(--draft);
  stroke-dasharray: 3 3;
}

.ilus .garis {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.25;
}

.ilus .garis-putus {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
}

.ilus .garis-aksen {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* ── Garis yang menggambar dirinya sendiri ───────────────────────────────── */

.ilus .tarik {
  stroke-dasharray: var(--panjang, 400);
  stroke-dashoffset: var(--panjang, 400);
}

.tampil .ilus .tarik,
.ilus.jalan .tarik {
  animation: ilus-tarik 1400ms var(--ease-out-expo) forwards;
  animation-delay: var(--tunda-tarik, 0ms);
}

@keyframes ilus-tarik {
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Partikel yang berjalan di sepanjang jalur ───────────────────────────── */

.ilus .partikel {
  fill: var(--accent);
  r: 2.6;
  offset-distance: 0%;
  animation: ilus-alir 2600ms linear infinite;
  animation-delay: var(--tunda-alir, 0ms);
}

.ilus .partikel.hangat {
  fill: var(--series-2);
}
.ilus .partikel.hijau {
  fill: var(--success);
}

@keyframes ilus-alir {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* ── Denyut ──────────────────────────────────────────────────────────────── */

.ilus .denyut {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilus-denyut 2400ms var(--ease-out-quart) infinite;
  animation-delay: var(--tunda-denyut, 0ms);
}

@keyframes ilus-denyut {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }
  40% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

.ilus .halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ilus-halo 2800ms var(--ease-out-expo) infinite;
  animation-delay: var(--tunda-halo, 0ms);
}

@keyframes ilus-halo {
  0% {
    opacity: 0.55;
    transform: scale(0.6);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* ── Naik-turun lembut ───────────────────────────────────────────────────── */

.ilus .melayang {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilus-melayang 5200ms ease-in-out infinite;
  animation-delay: var(--tunda-layang, 0ms);
}

@keyframes ilus-melayang {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ── Muncul berurutan ────────────────────────────────────────────────────── */

.ilus .muncul {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(8px) scale(0.97);
}

.tampil .ilus .muncul,
.ilus.jalan .muncul {
  animation: ilus-muncul 620ms var(--ease-out-expo) forwards;
  animation-delay: var(--tunda-muncul, 0ms);
}

@keyframes ilus-muncul {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Batang tumbuh ───────────────────────────────────────────────────────── */

.ilus .tumbuh {
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
}

.tampil .ilus .tumbuh,
.ilus.jalan .tumbuh {
  animation: ilus-tumbuh 900ms var(--ease-out-expo) forwards;
  animation-delay: var(--tunda-tumbuh, 0ms);
}

@keyframes ilus-tumbuh {
  to {
    transform: scaleY(1);
  }
}

/* ── Berputar pelan ──────────────────────────────────────────────────────── */

.ilus .putar {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilus-putar 26s linear infinite;
}

.ilus .putar-balik {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilus-putar 34s linear infinite reverse;
}

@keyframes ilus-putar {
  to {
    transform: rotate(360deg);
  }
}

/* ── Kedip kursor ────────────────────────────────────────────────────────── */

.ilus .kursor {
  animation: ilus-kedip 1100ms steps(2, start) infinite;
}

@keyframes ilus-kedip {
  50% {
    opacity: 0;
  }
}

/* ── Pensil menulis lalu menjadi tinta ───────────────────────────────────── */

.ilus .grafit {
  stroke: var(--draft);
  stroke-dasharray: 3 3;
}

.tampil .ilus .jadi-tinta,
.ilus.jalan .jadi-tinta {
  animation: ilus-jadi-tinta 4200ms var(--ease-out-quart) infinite;
}

@keyframes ilus-jadi-tinta {
  0%,
  35% {
    stroke: var(--draft);
    stroke-dasharray: 3 3;
  }
  55%,
  88% {
    stroke: var(--accent);
    stroke-dasharray: 60 0;
  }
  100% {
    stroke: var(--draft);
    stroke-dasharray: 3 3;
  }
}

/* ── Pembungkus ilustrasi ────────────────────────────────────────────────── */

.panggung {
  position: relative;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--surface);
  padding: 26px 24px;
  overflow: hidden;
}

.panggung::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 78%);
  pointer-events: none;
}

.panggung > * {
  position: relative;
}

.panggung-sunken {
  background: var(--sunken);
}

.panggung-judul {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .ilus .tarik {
    stroke-dashoffset: 0;
  }
  .ilus .muncul {
    opacity: 1;
    transform: none;
  }
  .ilus .tumbuh {
    transform: scaleY(1);
  }
  .ilus .partikel,
  .ilus .denyut,
  .ilus .halo,
  .ilus .melayang,
  .ilus .putar,
  .ilus .putar-balik,
  .ilus .kursor,
  .ilus .jadi-tinta {
    animation: none;
  }
  .ilus .halo {
    opacity: 0;
  }
  .ilus .denyut {
    opacity: 0.8;
  }
}