/* ============================================================================ assets/css/animasi.css — Gerak & micro-interaction paperlesmodul.id ---------------------------------------------------------------------------- Prinsip yang dipegang (rujukan: skill ui-ux-pro-max, prioritas 2/3/7): 1. Hanya `transform` dan `opacity` yang dianimasikan. Keduanya diproses GPU dan tidak memicu reflow, jadi tidak ada layout thrashing maupun CLS. Lebar, tinggi, padding, dan margin TIDAK PERNAH dianimasikan. 2. Dua kecepatan berbeda untuk dua tujuan berbeda — jangan disamakan: - Micro-interaction (tekan tombol, dsb.): 90–200ms, harus terasa instan, langsung menjawab sentuhan. - Entrance/scroll-reveal (konten & kartu muncul saat digulir): sengaja LEBIH LAMBAT (~750ms desktop / 550ms mobile) dan lembut — permintaan eksplisit supaya kemunculan konten terasa smooth & tidak terburu-buru, bukan sekadar "muncul". Jangan dipercepat balik ke ~300ms tanpa diminta lagi. 3. Gerak harus bermakna — menandai elemen baru masuk, menegaskan sentuhan, atau menunjukkan halaman sudah tergulir. Tidak ada animasi hias. 4. Efek hover hanya aktif di perangkat yang benar-benar punya kursor (`@media (hover: hover)`), supaya di ponsel tidak ada "hover nyangkut". 5. Semua gerak mati total saat pengguna menyalakan "reduce motion" di OS. Semua CSS di sini, tidak ada satu baris pun di Blade. ========================================================================== */ :root { /* Easing khas iOS: cepat di awal, melandai halus di akhir */ --ease-ios: cubic-bezier(.22, 1, .36, 1); /* Sengaja lambat & lembut (bukan 320ms lama) — permintaan eksplisit agar konten & kartu muncul perlahan saat digulir, lihat catatan prinsip #2 di atas. */ --durasi-masuk: 750ms; --durasi-mikro: 180ms; --jarak-masuk: 26px; --tunda-tahap: 90ms; } /* -------------------------------------------------------- Scroll reveal --- */ /* * Elemen disembunyikan HANYA kalau JavaScript hidup (kelas .js-aktif dipasang * di ). Tanpa JS, konten tampil normal apa adanya — animasi tidak boleh * jadi penyebab konten hilang. */ .js-aktif [data-reveal], .js-aktif [data-reveal-anak] > * { opacity: 0; transform: translateY(var(--jarak-masuk)); transition: opacity var(--durasi-masuk) var(--ease-ios), transform var(--durasi-masuk) var(--ease-ios); } .js-aktif [data-reveal].tampil, .js-aktif [data-reveal-anak].tampil > * { opacity: 1; transform: none; } /* * Stagger antar-anak. Ditulis sebagai nth-child supaya JS tidak perlu menyentuh * properti style satu per satu — cukup menambah satu kelas ke induknya. * Sembilan tahap cukup: grid terpanjang di situs ini 9 kartu per halaman. */ .js-aktif [data-reveal-anak].tampil > *:nth-child(2) { transition-delay: calc(var(--tunda-tahap) * 1); } .js-aktif [data-reveal-anak].tampil > *:nth-child(3) { transition-delay: calc(var(--tunda-tahap) * 2); } .js-aktif [data-reveal-anak].tampil > *:nth-child(4) { transition-delay: calc(var(--tunda-tahap) * 3); } .js-aktif [data-reveal-anak].tampil > *:nth-child(5) { transition-delay: calc(var(--tunda-tahap) * 4); } .js-aktif [data-reveal-anak].tampil > *:nth-child(6) { transition-delay: calc(var(--tunda-tahap) * 5); } .js-aktif [data-reveal-anak].tampil > *:nth-child(7) { transition-delay: calc(var(--tunda-tahap) * 6); } .js-aktif [data-reveal-anak].tampil > *:nth-child(8) { transition-delay: calc(var(--tunda-tahap) * 7); } .js-aktif [data-reveal-anak].tampil > *:nth-child(n+9) { transition-delay: calc(var(--tunda-tahap) * 8); } /* Varian arah: masuk dari samping untuk kolom hero kanan */ .js-aktif [data-reveal="kanan"] { transform: translateX(24px); } .js-aktif [data-reveal="kanan"].tampil { transform: none; } /* ------------------------------------------------------------- Navbar ----- */ /* * Bayangan navbar menebal setelah halaman tergulir — penanda spasial bahwa * konten sudah bergerak di bawahnya. Padding sengaja tidak ikut berubah agar * tidak memicu reflow. */ .navbar-neuro { transition: box-shadow var(--durasi-mikro) ease, background-color var(--durasi-mikro) ease; } .navbar-neuro.tergulir { box-shadow: 0 6px 22px rgba(160, 170, 190, .34); background-color: var(--np-bg-elevated); } /* * Penanda 1px di puncak halaman, disisipkan animasi.js. Diposisikan absolut * supaya tidak menggeser tata letak sedikit pun. */ .sentinel-gulir { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; } /* Logo mengecil sedikit saat tergulir — pakai scale, bukan width/height */ .logo-merek { transform-origin: left center; transition: transform var(--durasi-mikro) var(--ease-ios); } .navbar-neuro.tergulir .logo-merek { transform: scale(.88); } /* -------------------------------------------------- Umpan balik sentuhan --- */ /* * Setiap elemen yang bisa ditekan memberi respons dalam <200ms. Ini berlaku di * ponsel juga (bukan hover), sesuai aturan "jangan andalkan hover saja". */ .card-klik, .btn-ios-primary, .btn-ios-ghost, .btn-ios-danger, .btn-ios-success, .btn-bulat, .pilihan-kartu { -webkit-tap-highlight-color: transparent; } .card-klik:active { transform: translateY(0) scale(.985); transition-duration: 90ms; } .btn-ios-primary:active, .btn-ios-success:active, .btn-ios-danger:active { transform: scale(.97); transition-duration: 90ms; } .btn-bulat:active { transform: scale(.92); } .pilihan-kartu { transition: box-shadow var(--durasi-mikro) var(--ease-ios), transform var(--durasi-mikro) var(--ease-ios), color var(--durasi-mikro) ease; } .pilihan-kartu:active { transform: scale(.98); } /* Efek hover hanya untuk perangkat berkursor */ @media (hover: none) { .card-klik:hover { transform: none; box-shadow: var(--shadow-naik); } .btn-ios-primary:hover, .btn-ios-ghost:hover, .btn-ios-danger:hover, .btn-ios-success:hover { transform: none; } } /* Ikon panah di kartu produk bergeser saat kartunya disentuh/hover */ .card-klik .btn-bulat ion-icon { transition: transform var(--durasi-mikro) var(--ease-ios); } .card-klik:hover .btn-bulat ion-icon, .card-klik:active .btn-bulat ion-icon { transform: translateX(3px); } /* --------------------------------------------------------- Stepper hero --- */ /* * Titik tahap yang sedang aktif berdenyut halus. Ini satu-satunya animasi * berulang di situs, dipakai untuk menarik mata ke posisi alur saat ini. */ .stepper-neuro .langkah.kini .titik { animation: denyut-titik 2.4s var(--ease-ios) infinite; } @keyframes denyut-titik { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } /* --------------------------------------------------------------- Fokus --- */ /* * Cincin fokus keyboard TIDAK PERNAH dihapus (aturan aksesibilitas prioritas 1), * hanya diselaraskan dengan gaya neumorphism. */ :focus-visible { outline: 3px solid rgba(74, 141, 255, .55); outline-offset: 3px; border-radius: var(--radius-sm); } /* ------------------------------------------------------------ Responsif --- */ @media (max-width: 767.98px) { /* Tetap sedikit lebih ringkas dari desktop (scroll flick di ponsel lebih cepat), tapi tetap lembut — bukan kembali ke gesit/instan seperti sebelumnya. */ :root { --jarak-masuk: 18px; --durasi-masuk: 550ms; --tunda-tahap: 70ms; } /* Gerak menyamping dimatikan di layar sempit — rawan memicu scroll horizontal */ .js-aktif [data-reveal="kanan"] { transform: translateY(var(--jarak-masuk)); } } /* ------------------------------------------------------- Hormati setelan --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Konten tetap harus terlihat, bukan sekadar transisinya yang dipercepat */ .js-aktif [data-reveal], .js-aktif [data-reveal-anak] > * { opacity: 1 !important; transform: none !important; } }