/* ═══════════════════════════════════════════════════════════════════
   iso.css — gambar isometrik di halaman publik (config/iso_art.php).
   Nilai warna HANYA var(--iso-…) dari tokens.css.

   ANIMASI
   - Semua animasi diam (paused) sampai gambarnya terlihat di layar.
     assets/js/iso.js memasang kelas .is-run lewat IntersectionObserver,
     lalu --run berubah jadi running. Gambar di luar layar tidak memakan
     baterai HP.
   - Bagian di dalam simbol (<use>), misalnya kepala ayam, tidak bisa
     dijangkau pemilih bertingkat seperti ".iso .x". Gerakan yang memutar
     atau membesarkan (telur menggelinding/muncul) juga WAJIB di dalam
     simbol: pada <use> ber-x/y, Chrome menghitung titik putarnya keliru. Karena itu kendalinya
     lewat variabel yang DIWARISKAN: --run (jalan/diam), --pd (lama satu
     patukan), --dl (jeda awal). Kelas .p1…p6 di <use> membuat tiap ayam
     mematuk di waktu yang berbeda.
   - prefers-reduced-motion: semua animasi dimatikan (Protokol 03 §6.4).
     Keadaan diamnya sengaja sudah gambar yang utuh.
   ═══════════════════════════════════════════════════════════════════ */

.iso-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.iso { display: block; width: 100%; height: auto; overflow: visible; --run: paused; }
.iso.is-run { --run: running; }

/* ── Penempatan di halaman ─────────────────────────────────────────
   .sec-split : judul bagian kiri, gambar kanan; turun ke bawah di HP.
   Ukuran gambar dibatasi max-width supaya ayam & telur tidak pecah
   menjadi raksasa di layar lebar. */
.sec-split {
  display: grid; align-items: center; gap: var(--s7); margin-bottom: var(--s8);
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
}
.sec-split > .sec-head { margin-bottom: 0; }
.sec-art { width: 100%; max-width: 360px; justify-self: center; }
.sec-art.besar { max-width: 470px; }
.sec-art.kecil { max-width: 200px; }
.card-art { position: relative; width: 170px; margin: calc(var(--s2) * -1) 0 var(--s3) calc(var(--s2) * -1); }
.cta-art { width: 100%; max-width: 240px; margin: calc(var(--s5) * -1) auto var(--s2); }
.price-art { width: 100%; max-width: 560px; margin: calc(var(--s3) * -1) auto var(--s7); }
.e404-art { width: 100%; max-width: 210px; margin: 0 auto; }
@media (max-width: 900px) {
  .sec-split { grid-template-columns: 1fr; gap: var(--s4); }
  .sec-art, .sec-art.besar { max-width: 340px; justify-self: start; }
  .sec-art.kecil { max-width: 180px; }
}

/* ── Warna bidang (t = atas, l = sisi kiri, r = sisi kanan) ── */
.i-grass-t { fill: var(--iso-grass-t); }
.i-grass-l { fill: var(--iso-grass-l); }
.i-grass-r { fill: var(--iso-grass-r); }
.i-soil-l { fill: var(--iso-soil-l); }
.i-soil-r { fill: var(--iso-soil-r); }
.i-soil-2 { fill: var(--iso-soil-2); }
.i-soil-3 { fill: var(--iso-soil-3); }
.i-path { fill: var(--iso-path); }
.i-cement-t { fill: var(--iso-cement-t); }
.i-cement-l { fill: var(--iso-cement-l); }
.i-cement-r { fill: var(--iso-cement-r); }
.i-wall-t { fill: var(--iso-wall-t); }
.i-wall-l { fill: var(--iso-wall-l); }
.i-wall-r { fill: var(--iso-wall-r); }
.i-wall-in { fill: var(--iso-wall-in); }
.i-post-t { fill: var(--iso-post-t); }
.i-post-l { fill: var(--iso-post-l); }
.i-post-r { fill: var(--iso-post-r); }
.i-roof-t { fill: var(--iso-roof-t); }
.i-roof-t2 { fill: var(--iso-roof-t2); }
.i-roof-l { fill: var(--iso-roof-l); }
.i-roof-r { fill: var(--iso-roof-r); }
.i-tarp-l { fill: var(--iso-tarp-l); }
.i-cage-in { fill: var(--iso-cage-in); }
.i-cage-side { fill: var(--iso-cage-side); }
.i-cage-top { fill: var(--iso-cage-top); }
.i-lip-t { fill: var(--iso-lip-t); }
.i-lip-l { fill: var(--iso-lip-l); }
.i-trough-t { fill: var(--iso-trough-t); }
.i-trough-l { fill: var(--iso-trough-l); }
.i-feed { fill: var(--iso-feed); }
.i-tray-t { fill: var(--iso-tray-t); }
.i-tray-l { fill: var(--iso-tray-l); }
.i-tray-r { fill: var(--iso-tray-r); }
.i-cup { fill: var(--iso-cup); }
.i-pallet-t { fill: var(--iso-pallet-t); }
.i-pallet-l { fill: var(--iso-pallet-l); }
.i-pallet-r { fill: var(--iso-pallet-r); }
.i-sack-t { fill: var(--iso-sack-t); }
.i-sack-l { fill: var(--iso-sack-l); }
.i-sack-r { fill: var(--iso-sack-r); }
.i-sack-band { fill: var(--iso-sack-band); }
.i-door { fill: var(--iso-door); }
.i-door-2 { fill: var(--iso-door-2); }
.i-sign { fill: var(--iso-sign); }
.i-sign-t { fill: var(--iso-sign-t); font: 700 7px var(--font); text-anchor: middle; }
.i-phone-t { fill: var(--iso-phone-t); }
.i-phone-l { fill: var(--iso-phone-l); }
.i-phone-r { fill: var(--iso-phone-r); }
.i-screen { fill: var(--iso-screen); }
.i-ui-1 { fill: var(--iso-ui-1); }
.i-ui-ok { fill: var(--iso-ui-ok); }
.i-ui-warn { fill: var(--iso-ui-warn); }
.i-ui-row { fill: var(--iso-ui-row); }
.i-ui-dim { fill: var(--iso-ui-dim); }
.i-ui-tx { fill: var(--iso-ui-tx); }
.i-ui-btn { fill: var(--iso-ui-1); }
.i-sun { fill: var(--iso-sun); }
.i-sun-halo { fill: url(#iso-halo); }
.i-halo0 { stop-color: var(--iso-sun-glow); }
.i-halo1 { stop-color: var(--iso-sun-glow-2); }
.i-halo2 { stop-color: var(--iso-sun-glow-0); }
.i-cloud { fill: var(--iso-cloud); }
.i-cloud-2 { fill: var(--iso-cloud-2); }
.i-shadow { fill: var(--iso-shadow); }
.i-shadow-soft { fill: var(--iso-shadow-soft); }

/* simbol: ayam, telur, sawit, semak */
.i-hen { fill: var(--iso-hen); }
.i-hen-2 { fill: var(--iso-hen-2); }
.i-hen-3 { fill: var(--iso-hen-3); }
.i-hen-ink { stroke: var(--iso-hen-ink); stroke-width: .8; stroke-linejoin: round; }
.i-hen-line { fill: none; stroke: var(--iso-hen-line); stroke-width: .9; stroke-linecap: round; }
.i-comb { fill: var(--iso-comb); }
.i-beak { fill: var(--iso-beak); }
.i-eye { fill: var(--iso-eye); }
.i-glint { fill: var(--iso-glint); }
.i-leg { fill: none; stroke: var(--iso-leg); stroke-width: 1.4; stroke-linecap: round; }
.i-egg { fill: var(--iso-egg); }
.i-egg-2 { fill: var(--iso-egg-2); }
.i-egg-hi { fill: var(--iso-egg-hi); }
.i-trunk { fill: var(--iso-trunk); }
.i-trunk-2 { fill: var(--iso-trunk-2); stroke: var(--iso-trunk-2); stroke-width: 1; stroke-linecap: round; }
.i-frond { fill: var(--iso-frond); }
.i-frond-2 { fill: var(--iso-frond-2); }
.i-frond-3 { fill: var(--iso-frond-3); }
.i-rib { fill: none; stroke: var(--iso-rib); stroke-width: .8; }
.i-bush { fill: var(--iso-bush); }
.i-bush-2 { fill: var(--iso-bush-2); }
.i-bush-3 { fill: var(--iso-bush-3); }
.i-bar { fill: var(--iso-wire); }

/* gambar kecil: alas, layar, mesin, grafik, uang, lembar kerja */
.i-plat-t { fill: var(--iso-plat-t); }
.i-plat-l { fill: var(--iso-plat-l); }
.i-plat-r { fill: var(--iso-plat-r); }
.i-ui-cell { fill: none; stroke: var(--iso-ui-1); stroke-width: .04; }
.i-ui-off { fill: var(--iso-ui-off); }
.i-badge { fill: var(--iso-ui-1); }
.i-badge-t, .i-check { fill: none; stroke: var(--iso-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-check { stroke-width: .09; }
.i-mach-t { fill: var(--iso-mach-t); }
.i-mach-l { fill: var(--iso-mach-l); }
.i-mach-r { fill: var(--iso-mach-r); }
.i-mach-in-l, .i-mach-in { fill: var(--iso-mach-in); }
.i-gear { fill: var(--iso-gear); }
.i-gear-2 { fill: var(--iso-gear-2); }
.i-tile-t { fill: var(--iso-tile-t); }
.i-tile-l { fill: var(--iso-tile-l); }
.i-tile-r { fill: var(--iso-tile-r); }
.i-tile-x { fill: var(--iso-tile-x); font: 800 9px var(--font); text-anchor: middle; }
.i-bar1-t { fill: var(--iso-bar1-t); } .i-bar1-l { fill: var(--iso-bar1-l); } .i-bar1-r { fill: var(--iso-bar1-r); }
.i-bar2-t { fill: var(--iso-bar2-t); } .i-bar2-l { fill: var(--iso-bar2-l); } .i-bar2-r { fill: var(--iso-bar2-r); }
.i-bar3-t { fill: var(--iso-bar3-t); } .i-bar3-l { fill: var(--iso-bar3-l); } .i-bar3-r { fill: var(--iso-bar3-r); }
.i-coin { fill: var(--iso-coin); }
.i-coin-2 { fill: var(--iso-coin-2); }
.i-coin-3 { fill: var(--iso-coin-3); }
.i-string { fill: none; stroke: var(--iso-string); stroke-width: 1; }
.i-tag { fill: var(--iso-ui-1); }
.i-tag-hole { fill: var(--iso-tag-hole); }
.i-tag-t { fill: var(--iso-white); font: 800 8px var(--font); text-anchor: middle; }
.i-sheet-t { fill: var(--iso-sheet-t); }
.i-sheet-l { fill: var(--iso-sheet-l); }
.i-sheet-r { fill: var(--iso-sheet-r); }
.i-sheet-h { fill: var(--iso-sheet-h); }
.i-sheet-g { fill: var(--iso-sheet-g); }
.i-sheet-hl { fill: var(--iso-sheet-hl); }
.i-sync { fill: none; stroke: var(--iso-flow); stroke-width: 2.6; stroke-linecap: round; }
.i-sync-h { fill: var(--iso-flow); }
.i-tower { fill: none; stroke: var(--iso-tower); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i-wave { fill: none; stroke: var(--iso-ui-warn); stroke-width: 1.6; stroke-linecap: round; }

/* bangunan mini, rumah jaga, tandon, gelembung tanya */
.i-tarpbox-l { fill: var(--iso-tarpbox-l); }
.i-tarpbox-r { fill: var(--iso-tarpbox-r); }
.i-house-t { fill: var(--iso-house-t); }
.i-house-l { fill: var(--iso-house-l); }
.i-house-r { fill: var(--iso-house-r); }
.i-window { fill: var(--iso-window); }
.i-tank { fill: var(--iso-tank); }
.i-tank-2 { fill: var(--iso-tank-2); }
.i-tank-t { fill: var(--iso-tank-t); }
.i-sign-s { fill: var(--iso-sign-t); font: 700 5.5px var(--font); text-anchor: middle; }
.i-bubble { fill: var(--iso-bubble); }
.i-bubble-t { fill: var(--iso-bubble-t); font: 800 15px var(--font); text-anchor: middle; }

/* meja catatan */
.i-desk-t { fill: var(--iso-desk-t); }
.i-desk-l { fill: var(--iso-desk-l); }
.i-desk-r { fill: var(--iso-desk-r); }
.i-lap-t { fill: var(--iso-lap-t); }
.i-lap-l { fill: var(--iso-lap-l); }
.i-lap-r { fill: var(--iso-lap-r); }
.i-key { fill: var(--iso-key); }
.i-err { fill: var(--iso-err); }
.i-err-x { fill: none; stroke: var(--iso-white); stroke-width: .05; stroke-linecap: round; }
.i-paper { fill: var(--iso-paper); }
.i-paper-2 { fill: var(--iso-paper-2); }
.i-inkl { fill: var(--iso-inkl); }
.i-ink { fill: none; stroke: var(--iso-ink); stroke-width: .045; stroke-linecap: round; }
.i-cover-t { fill: var(--iso-cover-t); }
.i-cover-l { fill: var(--iso-cover-l); }
.i-cover-r { fill: var(--iso-cover-r); }
.i-pen { fill: none; stroke: var(--iso-pen); stroke-width: 3; stroke-linecap: round; }
.i-pen-tip { fill: var(--iso-beak); }
.i-calc-t { fill: var(--iso-calc-t); }
.i-calc-l { fill: var(--iso-calc-l); }
.i-calc-r { fill: var(--iso-calc-r); }
.i-calc-b { fill: var(--iso-calc-b); }
.i-calc-d { fill: var(--iso-calc-d); }

/* sarang, cangkang, papan arah, obrolan, amplop */
.i-nest-2 { fill: var(--iso-nest-2); }
.i-nest-in { fill: var(--iso-nest-in); }
.i-straw { fill: none; stroke: var(--iso-straw); stroke-width: 1.4; stroke-linecap: round; }
.i-shell { fill: var(--iso-shell); }
.i-shell-2 { fill: var(--iso-shell-2); }
.i-chev { fill: none; stroke: var(--iso-flow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.i-chat-1 { fill: var(--iso-chat-1); }
.i-chat-2 { fill: var(--iso-ui-1); }
.i-env { fill: var(--iso-white); }
.i-env-2 { fill: none; stroke: var(--iso-env-2); stroke-width: 1.4; stroke-linejoin: round; }
.i-signb { fill: var(--iso-signb); }
.i-signb-2 { fill: var(--iso-signb-2); }
.i-sign-q { fill: var(--iso-white); font: 800 9px var(--font); text-anchor: middle; }

/* garis */
.i-roof-line { fill: none; stroke: var(--iso-roof-line); stroke-width: 1; }
.i-tarp-line { fill: none; stroke: var(--iso-tarp-line); stroke-width: 1; }
.i-tarp-roll { fill: none; stroke: var(--iso-tarp-roll); stroke-width: 5; stroke-linecap: round; }
.i-tarp-hi { fill: none; stroke: var(--iso-tarp-hi); stroke-width: 1.2; stroke-linecap: round; }
.i-rafter { fill: none; stroke: var(--iso-rafter); stroke-width: 2.4; stroke-linecap: round; }
.i-purlin { fill: none; stroke: var(--iso-rafter); stroke-width: 1.4; stroke-linecap: round; }
.i-tuft { fill: none; stroke: var(--iso-grass-r); stroke-width: 1.3; stroke-linecap: round; }
.i-frame { fill: none; stroke: var(--iso-frame); stroke-width: 1.1; }
.i-ui-axis { fill: none; stroke: var(--iso-ui-axis); stroke-width: .03; }
.i-ui-l1 { fill: none; stroke: var(--iso-ui-1); stroke-width: .07; stroke-linecap: round; stroke-linejoin: round; }
.i-ui-l2 { fill: none; stroke: var(--iso-ui-2); stroke-width: .06; stroke-linecap: round; stroke-linejoin: round; }
.i-flow-bg { fill: none; stroke: var(--iso-flow-bg); stroke-width: 6; stroke-linecap: round; }
.i-flow { fill: none; stroke: var(--iso-flow); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 7.9; }
.i-ping { fill: none; stroke: var(--iso-flow); stroke-width: 1.6; }

/* ── Animasi ─────────────────────────────────────────────────────── */
/* Patukan cepat (±0,8 dtk) di ujung siklus yang panjang: sebagian besar
   waktu ayamnya diam, jadi kandang terasa hidup tanpa jadi ramai. */
@keyframes iso-peck {
  0%, 80%, 100% { transform: none; }
  84% { transform: rotate(-32deg) translate(-.4px, 1.3px); }
  87% { transform: rotate(-8deg); }
  90% { transform: rotate(-30deg) translate(-.4px, 1.3px); }
  94% { transform: none; }
}
@keyframes iso-bob   { 0%, 100% { transform: none; } 50% { transform: translateY(.6px); } }
@keyframes iso-sway  { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes iso-roll  {
  0%       { transform: translate(2.6px, -1.5px) rotate(-70deg); opacity: 0; }
  8%       { opacity: 1; }
  20%, 80% { transform: none; opacity: 1; }
  92%, 100% { transform: none; opacity: 0; }
}
@keyframes iso-pop   {
  0%, 6%   { transform: scale(0); }
  12%      { transform: scale(1.2); }
  16%, 88% { transform: scale(1); }
  96%, 100% { transform: scale(0); }
}
@keyframes iso-flow  { to { stroke-dashoffset: -32; } }
@keyframes iso-float { 0%, 100% { transform: none; } 50% { transform: translateY(-3.5px); } }
@keyframes iso-shade { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.88); opacity: .7; } }
@keyframes iso-row   { 0%, 30%, 100% { opacity: .72; } 12% { opacity: 1; } }
@keyframes iso-draw  {
  0%        { stroke-dasharray: 1; stroke-dashoffset: 1; }
  35%, 100% { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes iso-ping  { 0% { transform: scale(.4); opacity: .95; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes iso-glow  { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.12); opacity: .6; } }
@keyframes iso-cloud { 0%, 100% { transform: none; } 50% { transform: translateX(16px); } }

@keyframes iso-blink  { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes iso-drop   { 0% { transform: translateY(-16px); opacity: 0; } 15% { opacity: 1; }
                        45% { transform: none; opacity: 1; } 60%, 100% { transform: none; opacity: 0; } }
@keyframes iso-spin   { to { transform: rotate(360deg); } }
@keyframes iso-slide  { 0%, 20% { transform: translate(5px, -3px); opacity: 0; } 35% { opacity: 1; }
                        55%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes iso-grow   { 0% { transform: scaleY(.2); } 30%, 85% { transform: none; } 100% { transform: scaleY(.2); } }
@keyframes iso-swing  { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes iso-swing2 { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes iso-wave   { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }
@keyframes iso-pulse  { 0%, 100% { transform: none; } 50% { transform: scale(1.14); } }
@keyframes iso-bub    { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.05); } }
@keyframes iso-flutter {
  0%, 100% { transform: none; }
  30% { transform: translate(2px, -3px) rotate(3.5deg); }
  65% { transform: translate(-1.5px, -4.5px) rotate(-2.5deg); }
}
@keyframes iso-soft   { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes iso-nudge  { 0%, 100% { transform: none; opacity: .55; } 50% { transform: translateX(4px); opacity: 1; } }
@keyframes iso-typing { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.ia-blink { animation: iso-blink 1.4s steps(1) infinite; }
.ia-soft  { animation: iso-soft 3s ease-in-out infinite; }
.ia-drop  { animation: iso-drop 4.2s ease-in infinite; }
.ia-spin  { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-spin 9s linear infinite; }
.ia-spin2 { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-spin 6s linear infinite reverse; }
.ia-spin3 { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-spin 7s linear infinite; }
.ia-slide { animation: iso-slide 5.5s ease-out infinite; }
.ia-grow  { transform-box: fill-box; transform-origin: 50% 100%; animation: iso-grow 6.5s ease-in-out -2.6s infinite; }
.ia-swing { transform-box: fill-box; transform-origin: 50% 0%; animation: iso-swing 4s ease-in-out infinite; }
.ia-swing2 { transform-box: fill-box; transform-origin: 50% 100%; animation: iso-swing2 4s ease-in-out infinite; }
.ia-wave  { animation: iso-wave 3.2s ease-in-out infinite; }
.ia-pulse { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-pulse 3.2s ease-in-out infinite; }
.ia-pulse2 { transform-box: fill-box; transform-origin: 30% 100%; animation: iso-bub 4.5s ease-in-out infinite; }
.ia-flutter { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-flutter 8s ease-in-out infinite; }
.ia-nudge { animation: iso-nudge 2.6s ease-in-out infinite; }
.ty1, .ty2, .ty3 { animation: iso-typing 1.2s ease-in-out infinite; }

.ia-peck { transform-box: fill-box; transform-origin: 88% 80%;
           animation: var(--pn, iso-peck) var(--pd, 5.5s) ease-in-out var(--dl, 0s) infinite; }
.ia-bob  { animation: var(--bn, none) 2.8s ease-in-out var(--dl, 0s) infinite; }
.ia-sway { transform-box: fill-box; transform-origin: 50% 54%;
           animation: iso-sway 8s ease-in-out infinite; }
.ia-eggroll { transform-box: fill-box; transform-origin: 50% 70%;
               animation: iso-roll 9s ease-out var(--dl, 0s) infinite; }
.ia-eggpop  { transform-box: fill-box; transform-origin: 50% 90%;
               animation: iso-pop 10s ease-out var(--dl, 0s) infinite; }
.ia-flow { animation: iso-flow 2.6s linear infinite; }
.ia-float { animation: iso-float 6.5s ease-in-out infinite; }
.ia-shade { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-shade 6.5s ease-in-out infinite; }
.ia-row  { animation: iso-row 6s ease-in-out infinite; }
.ia-draw { animation: iso-draw 9s ease-in-out -4.5s infinite; }
.ia-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-ping 3.6s ease-out infinite; }
.ia-glow { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-glow 7s ease-in-out infinite; }
.ia-cloud { animation: iso-cloud 18s ease-in-out infinite; }

.ia-peck, .ia-bob, .ia-sway, .ia-eggroll, .ia-eggpop, .ia-flow, .ia-float, .ia-shade,
.ia-row, .ia-draw, .ia-ping, .ia-glow, .ia-cloud, .ia-blink, .ia-drop, .ia-spin, .ia-spin2,
.ia-spin3, .ia-slide, .ia-grow, .ia-swing, .ia-swing2, .ia-wave, .ia-pulse, .ia-pulse2,
.ia-flutter, .ia-nudge, .ia-soft, .ty1, .ty2, .ty3 { animation-play-state: var(--run, paused); }

/* jeda & tempo berbeda supaya tidak bergerak serempak */
.p0 { --pn: none; }                       /* ayam yang diam saja */
.bob { --bn: iso-bob; }                    /* napas halus, hanya ayam di halaman */
.p1 { --pd: 4.6s; --dl: -.3s; }  .p2 { --pd: 5.8s; --dl: -1.9s; }
.p3 { --pd: 5.2s; --dl: -3.1s; } .p4 { --pd: 6.6s; --dl: -.9s; }
.p5 { --pd: 4.9s; --dl: -2.6s; } .p6 { --pd: 7.2s; --dl: -4.4s; }
.e1 { --dl: -1.8s; } .e2 { --dl: -4.8s; } .e3 { --dl: -7.1s; }
.q1 { --dl: -.8s; }  .q2 { --dl: -4.1s; } .q3 { --dl: -7.4s; }
.r2 { animation-delay: -1.5s; } .r3 { animation-delay: -3s; } .r4 { animation-delay: -4.5s; }
.d2 { animation-delay: -6.3s; }
.c2 { animation-delay: -9s; animation-duration: 23s; }
.g2 { animation-delay: -2.9s; } .g3 { animation-delay: -3.2s; } .g4 { animation-delay: -3.5s; }
.w2 { animation-delay: .45s; } .w3 { animation-delay: .9s; }
.fl2 { animation-delay: -2.7s; animation-duration: 9.5s; } .fl3 { animation-delay: -5.2s; animation-duration: 7.2s; }
.ty2 { animation-delay: .2s; } .ty3 { animation-delay: .4s; }

/* Kartu fitur beranda: enam gambar bergerak bersamaan terlalu ramai di
   layar lebar. Di perangkat bertetikus gambarnya diam dan baru bergerak
   saat kartunya disorot atau isinya difokus (keyboard). Di HP tidak ada
   hover dan kartunya tersusun ke bawah (1–2 terlihat), jadi tetap bergerak
   saat terlihat seperti gambar lain.
   animation:none (bukan sekadar dijeda) supaya diamnya selalu di posisi
   awal yang utuh, bukan beku di tengah gerakan. Bagian di dalam simbol
   (ayam) tidak terjangkau pemilih ini → cukup dijeda lewat --run. */
@media (hover: hover) and (pointer: fine) {
  .card:not(:hover):not(:focus-within) .iso-spot { --run: paused; }
  .card:not(:hover):not(:focus-within) .iso-spot [class*="ia-"] { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-peck, .ia-bob, .ia-sway, .ia-eggroll, .ia-eggpop, .ia-flow, .ia-float, .ia-shade,
  .ia-row, .ia-draw, .ia-ping, .ia-glow, .ia-cloud, .ia-blink, .ia-drop, .ia-spin, .ia-spin2,
  .ia-spin3, .ia-slide, .ia-grow, .ia-swing, .ia-swing2, .ia-wave, .ia-pulse, .ia-pulse2,
  .ia-flutter, .ia-nudge, .ia-soft, .ty1, .ty2, .ty3 { animation: none !important; }
}