/* article-motion.css — Techindo article micro-motion v1 (20260930) * * TUJUAN: motion kecil yang bikin artikel enak diikutin (UX), BUKAN animasi pamer. * ATURAN KERAS: * 1. Cuma `transform` + `opacity` -> nggak menggeser layout (CLS aman), ringan di HP. * 2. Elemen disamarkan HANYA kalau class `js-motion` ada di (dipasang oleh * article-motion.js). Kalau JS gagal dimuat / dimatikan -> konten tetap kelihatan. * 3. `prefers-reduced-motion: reduce` = TIDAK ADA gerakan sama sekali (konten normal). * 4. Sekali jalan per elemen (JS unobserve), bukan ngulang tiap scroll. */ /* ---- state awal: hanya saat engine-nya aktif, dan hanya kalau BELUM di-reveal ---- `:not(.is-in)` WAJIB: tanpa itu, selector 3-kelas (mis. .js-motion .art-steps .art-step atau .js-motion .article-body-content h2) mengalahkan rule reveal `.js-motion .is-in` (2 kelas) -> elemen dapat class is-in TAPI tetap opacity 0 alias invisible permanen. */ .js-motion .answer-box:not(.is-in), .js-motion .article-body-content h2:not(.is-in), .js-motion .art-steps .art-step:not(.is-in), .js-motion .art-card-item:not(.is-in), .js-motion .art-stat-item:not(.is-in), .js-motion .art-warn-box:not(.is-in), .js-motion .art-highlight-box:not(.is-in), .js-motion .art-tip-box:not(.is-in), .js-motion .founder-note:not(.is-in), .js-motion .table-responsive:not(.is-in), .js-motion .art-chart-wrap:not(.is-in), .js-motion .art-source-card:not(.is-in), .js-motion .art-prompt-list:not(.is-in) { opacity: 0; transform: translateY(10px); } /* ---- state muncul ---- */ .js-motion .is-in { opacity: 1; transform: none; transition: opacity 480ms ease, transform 480ms cubic-bezier(.2, .7, .2, 1); } /* garis penghubung `art-steps` "digambar" halus (kalau ada elemen garisnya) */ .js-motion .art-steps .art-step-line:not(.is-in), .js-motion .art-step-line:not(.is-in) { transform: scaleY(0); transform-origin: top center; } .js-motion .art-step-line.is-in { transform: scaleY(1); transition: transform 520ms ease; } /* ---- SVG inline di dalam artikel (contoh: docs/contoh-svg-animasi.html) ---- KENAPA di sini, bukan di dalam SVG: satu sumber untuk semua artikel, bisa di-gate, dan SVG konten tetap bersih dari