/* Reveal-on-scroll — dikongsi oleh Option 1 dan Option 2. Setiap elemen yang bertanda [data-reveal] bermula lut sinar dan naik sedikit ke tempatnya apabila masuk ke dalam skrin. Sekali sahaja: setelah muncul ia kekal muncul, jadi menatal ke atas semula tidak mengulang animasi. Dua perkara yang menentukan bentuk fail ini: 1. Tiada apa-apa yang tersembunyi sehingga js/reveal.js mengesahkan yang ia boleh menunjukkannya semula. Kelas .reveal-ready pada itulah suis utamanya — tanpanya semua pemilih di bawah tidak sepadan dengan apa-apa, jadi halaman tanpa JavaScript kekal terbaca sepenuhnya. 2. transform TIDAK PERNAH diletakkan pada moyang kepada elemen sticky. .o-tabs__list (Option 1) dan .p-card (Option 2) kedua-duanya melekat, dan transform pada moyangnya akan menjadikannya kotak pembendung — sticky dan juga .site-nav/.wa-fab yang position:fixed akan terperangkap di dalamnya. Sebab itu tanda [data-reveal] hanya jatuh pada KANDUNGAN kad tindanan, bukan pada kad itu sendiri. */ :root { /* Perlahan di hujung, bukan di permulaan — elemen yang masuk sepatutnya sampai dan berhenti, bukan tersentak bermula. */ --reveal-ease: cubic-bezier(.22, 1, .36, 1); --reveal-dur: 620ms; --reveal-rise: 20px; } .reveal-ready [data-reveal] { opacity: 0; transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms); } .reveal-ready [data-reveal="up"] { transform: translateY(var(--reveal-rise)); } /* Untuk elemen yang tidak boleh digerakkan langsung — apa-apa yang duduk di dalam susunan sticky dan akan bergoyang jika ia beralih. Pudar sahaja. */ .reveal-ready [data-reveal="fade"] { transform: none; } /* Keadaan akhir memaksa opacity ke 1. Itu bermakna elemen yang MEMANG direka dengan opacity kurang daripada 1 tidak boleh ditanda [data-reveal] — ia akan kekal cerah selepas muncul dan warna asalnya hilang. .p-card__index (nombor 01–05 pada kad tindanan Option 2) ialah kesnya: ia direka pada 0.65, jadi nombor itu sengaja dibiarkan tanpa tanda. */ .reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; } /* Jika pengguna meminta gerakan dikurangkan, js/reveal.js tidak pernah menambah .reveal-ready, jadi peraturan di atas tidak aktif. Baris ini adalah jaring kedua sekiranya kelas itu sempat ditambah. */ @media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }