/* ========================================================================== IGNAN — Motion primitives Pasangan dari assets/js/ignan-motion.js. Hanya berisi hal umum yang dipakai banyak halaman: reveal, parallax, sticky section, image sequence, kursor scroll. Gaya khusus per halaman ditulis di sigit.css. Catatan: keadaan awal reveal hanya diberlakukan saat kelas .has-motion sudah dipasang oleh JS. Jadi kalau JS gagal dimuat, konten tetap terlihat penuh. ========================================================================== */ :root { --mo-dur: 780ms; --mo-ease: cubic-bezier(0.22, 1, 0.36, 1); --mo-shift: 34px; } /* ------------------------------------------------------------------------- Smooth scrolling Dipasang di (kelas .has-motion dari JS) supaya berlaku untuk lompatan anchor DAN scrollIntoView di seluruh situs. Tidak bertumpuk dengan animasi jQuery milik tema: penggerak tema memakai .animate() yang sudah preventDefault, jadi tidak lewat jalur scroll bawaan browser. ------------------------------------------------------------------------- */ html.has-motion { scroll-behavior: smooth; } /* ------------------------------------------------------------------------- Reveal ------------------------------------------------------------------------- */ .has-motion [data-reveal] { opacity: 0; transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease), filter var(--mo-dur) var(--mo-ease); will-change: opacity, transform; } .has-motion [data-reveal="up"] { transform: translate3d(0, var(--mo-shift), 0); } .has-motion [data-reveal="down"] { transform: translate3d(0, calc(var(--mo-shift) * -1), 0); } .has-motion [data-reveal="left"] { transform: translate3d(calc(var(--mo-shift) * -1.4), 0, 0); } .has-motion [data-reveal="right"] { transform: translate3d(calc(var(--mo-shift) * 1.4), 0, 0); } .has-motion [data-reveal="zoom"] { transform: scale(0.92); } .has-motion [data-reveal="blur"] { transform: translate3d(0, calc(var(--mo-shift) * 0.6), 0); filter: blur(10px); } .has-motion [data-reveal="fade"] { transform: none; } .has-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; will-change: auto; } /* Reveal MENDATAR dibuat menegak di layar sempit. `translate3d` ke samping ikut menambah lebar dokumen: elemen selebar kolomnya digeser 1,4 × --mo-shift, dan di layar sempit tidak ada sisa ruang untuk menyerapnya, jadi seluruh halaman bisa digulir ke samping. Terukur di /gallery: `.gl-event-head` (data-reveal="right") membuat scrollWidth lebih 38px dari viewport pada 360, 400, 480, dan 768px — hilang di >= 1024px yang kolomnya masih punya sisa ruang. Geser menegak tidak pernah menambah lebar, dan di ponsel efeknya justru lebih pantas. PEMBARUAN sesi 19f: pembatasan `max-width: 1023px` TIDAK CUKUP. Asumsinya "di >= 1024px kolomnya masih punya sisa ruang" — dan itu keliru tepat di 1024px: `.pl-incl-grid` di /price-list mengisi 1004 dari 1024px (sisa hanya 10px padding), jadi geseran 1,4 × 34px = 47,6px membuat scrollWidth 1062 — dokumen lebih 38px dari viewport, terukur. Tidak ada lebar viewport yang bisa dijamin punya "sisa ruang", karena itu tergantung isi halaman. Jadi geseran mendatar ditiadakan di SEMUA lebar. Kalau efek masuk-dari-samping ingin dihidupkan lagi, cara yang benar bukan menebak breakpoint melainkan memasang `overflow-x: clip` pada seksi yang memuatnya (`clip`, BUKAN `hidden` — `hidden` membuat wadah scroll baru dan merusak `position: sticky` yang dipakai seksi cerita). */ .has-motion [data-reveal="left"], .has-motion [data-reveal="right"] { transform: translate3d(0, var(--mo-shift), 0); } /* ------------------------------------------------------------------------- Parallax ------------------------------------------------------------------------- */ [data-parallax] { will-change: transform; } /* ------------------------------------------------------------------------- Sticky section / scroll track Track dibuat tinggi (beberapa layar); panelnya sticky sehingga isi berganti sementara halaman terus di-scroll. --sp (0..1) diisi JS. ------------------------------------------------------------------------- */ [data-sticky-track] { position: relative; --sp: 0; } .mo-sticky-panel { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } /* ------------------------------------------------------------------------- Image sequence — tumpukan gambar yang silih berganti mengikuti --sp ------------------------------------------------------------------------- */ [data-sequence] { position: relative; width: 100%; height: 100%; } [data-sequence] > * { position: absolute; inset: 0; opacity: 0; display: flex; align-items: center; justify-content: center; /* Frame-nya dipromosikan ke layer sendiri: opacity & transform-nya ditulis tiap frame animasi oleh ignan-motion.js, jadi jangan sampai memicu repaint seluruh panel. */ transform: translateZ(0); will-change: opacity, transform; backface-visibility: hidden; } [data-sequence] > *:first-child { opacity: 1; } [data-sequence] img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ------------------------------------------------------------------------- Petunjuk scroll ------------------------------------------------------------------------- */ .mo-scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); } .mo-scroll-cue::after { content: ""; width: 1px; height: 46px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); animation: mo-cue 2.2s var(--mo-ease) infinite; transform-origin: top center; } @keyframes mo-cue { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(46px); opacity: 0; } } /* ------------------------------------------------------------------------- Bilah kemajuan baca (dipakai halaman panjang) ------------------------------------------------------------------------- */ .mo-readbar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1080; background: transparent; pointer-events: none; } .mo-readbar > span { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, #109aec, #f5a623); } /* ------------------------------------------------------------------------- Hormati preferensi pengguna ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.has-motion { scroll-behavior: auto; } .has-motion [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } [data-parallax] { transform: none !important; } .mo-scroll-cue::after { animation: none; } }