/* brand-motion.css — primitif motion untuk NASSA & ORION.
 *
 * Permintaan user 2026-08-05: "di stellar hub, setiap section kayak ada animasi
 * 3d parallax gitu kan, saya mau juga ada di NASSA dan ORION per section nya."
 * Direvisi hari yang sama: "per card aja deh, jangan per section, jelek!"
 * dan "per text juga yah!" — jadi yang terbang masuk adalah KARTU dan TEKS di
 * dalam section, bukan section-nya sebagai satu balok.
 *
 * Sepupu dari stellar-hub-assets/stellar-motion.css, TAPI bukan salinannya:
 * file Hub ikut membawa layar-muat, logo menempel, intro otomatis, dan tarikan
 * balik — semuanya khusus halaman Hub. Yang diambil ke sini hanya dua primitif
 * yang benar-benar diminta: MASUK 3D dan PARALLAX KEDALAMAN.
 *
 * ATURAN PENTING (pelajaran dari Hub, jangan diulang salahnya): keadaan
 * tersembunyi HANYA berlaku setelah JS memasangnya. JANGAN pernah menulis
 * opacity:0 langsung ke selector isi halaman — satu error JS akan meninggalkan
 * halaman kosong permanen untuk semua pengunjung.
 *
 * OPACITY SENGAJA TIDAK ADA DI FILE INI SAMA SEKALI — ia ditulis brand-motion.js
 * sebagai inline style (0 -> 1 -> DIHAPUS). Bukan selera; ini bug yang sudah
 * tertangkap saat verifikasi. Aturan `.sm-rv.is-in { opacity: 1 }` berspesifisitas
 * dua kelas, jadi ia MENGALAHKAN opacity milik desain: `.ox-rule` yang sengaja
 * .55 berubah jadi putih penuh dan garis pemisahnya tampil lebih terang daripada
 * seharusnya. CSS tidak punya cara "kembalikan ke aturan sebelah" — `unset`
 * menghitung ke nilai awal 1, bukan ke .55 — sedangkan inline style yang dihapus
 * mengembalikan persis apa pun yang aslinya berlaku. Berlaku untuk elemen mana
 * pun yang punya opacity sendiri, bukan cuma .ox-rule.
 *
 * Markup Nassa & Orion TIDAK diubah sama sekali: brand-motion.js yang memasang
 * kelas-kelas di bawah saat runtime, jadi tidak ada satu pun baris
 * `_elementor_data` yang perlu disentuh. */

/* ===================== MASUK 3D PER KARTU / PER TEKS ===================== */
/* Kartu berangkat dari jauh (translateZ negatif) sambil sedikit di bawah
 * posisi akhirnya, lalu maju ke bidang layar.
 *
 * ANGKANYA SENGAJA LEBIH KECIL DARIPADA HUB (-180px, bukan -320px). Hub
 * menerbangkan SECTION utuh, jadi jarak sejauh itu terbaca sebagai kedalaman.
 * Di sini yang terbang satu judul atau satu kartu foto; pada objek sekecil itu
 * -320px membuatnya mengecil sampai seperempat lalu melesat — persis yang
 * ditolak user sebagai "jelek". Perspektif juga dirapatkan (1200 vs 1500) supaya
 * kedalamannya tetap terasa meski jaraknya pendek.
 *
 * translate3d dipakai, bukan translateY terpisah, supaya seluruh gerakan masuk
 * tetap SATU fungsi transform. Properti `translate` sudah dipakai parallax
 * (lihat pembagian properti di bawah) dan tidak boleh dipinjam ke sini. */
.sm-rv          { transform: perspective(1200px) translate3d(0, 22px, -180px); }
.sm-rv-anim {
  transition:
    opacity   .7s  cubic-bezier(.22, .61, .36, 1),
    transform .95s cubic-bezier(.22, .61, .36, 1);
}
.sm-rv.is-in    { transform: perspective(1200px) translate3d(0, 0, 0); }

/* SELESAI = TRANSFORM DILEPAS TOTAL, dan ini bukan kerapian kosmetik.
 *
 * Elemen ber-transform jadi CONTAINING BLOCK untuk anak `position: fixed` dan
 * membuat stacking context permanen. Selama versi per-section masih dipakai,
 * itu MEMATAHKAN #orionFbModal (viewer PDF, position:fixed inset:0, ada di
 * dalam #our-menu): modalnya berhenti mengacu ke viewport. Sekarang yang
 * ber-transform tinggal kartu-kartu kecil dan modal itu bukan anak salah
 * satunya — tapi aturan ini tetap dipertahankan sebagai jaring pengaman, dan
 * karena membiarkan puluhan elemen memegang layer komposit selamanya tidak ada
 * gunanya begitu animasinya usai.
 *
 * !important dipakai karena `.sm-rv.is-in` di atas berspesifisitas lebih tinggi
 * (dua kelas) daripada `.sm-done` sendirian. */
.sm-rv.sm-done { transform: none !important; }

/* ===================== PARALLAX KEDALAMAN ===================== */
/* PEMBAGIAN PROPERTI YANG PENTING — persis alasan yang sama seperti di Hub:
 *   translate  -> deviasi parallax, ditulis JS TIAP FRAME, tanpa transisi
 *   transform  -> gerakan masuk 3D, dianimasikan transisi CSS
 * Keduanya properti terpisah (translate sudah properti sendiri sejak
 * Chrome 104 / Safari 14.1 / Firefox 72), jadi bisa jalan bersamaan pada elemen
 * yang SAMA tanpa saling memutus — dan memang ada elemen yang menjadi kartu
 * sekaligus lapisan (mis. .ox-h2). Kalau ditumpuk di `transform`, tulisan JS
 * tiap frame membuat transisi CSS-nya tidak pernah selesai.
 *
 * Tidak ada kelas .sm-px/.sm-px-layer seperti Hub. Bingkai kliping itu hanya
 * perlu untuk gambar FULL-BLEED yang harus menutupi tepi ke tepi — di sini
 * lapisan yang digeser sengaja dibatasi ke blok konten yang mengambang di atas
 * latar polos (judul, paragraf, carousel, peta), jadi geseran tegaknya tidak
 * pernah menyingkap celah. Pita foto full-bleed (.nx-interior/.ox-interior,
 * .nx-pe-strip/.ox-pe-strip, latar Contact) SENGAJA tidak diberi lapisan —
 * lihat PLAN di brand-motion.js. */

/* ===================== DEGRADASI ===================== */
/* Opacity tidak perlu disebut di sini: jalur reduced-motion di brand-motion.js
 * memasang dan langsung menghapus inline opacity dalam satu langkah sinkron,
 * jadi tidak pernah ada frame yang tergambar dalam keadaan transparan. */
@media (prefers-reduced-motion: reduce) {
  .sm-rv,
  .sm-rv.is-in { transform: none; }
  .sm-rv-anim  { transition: none !important; }
  .sm-layer    { translate: none !important; }
}