/* ============================================================================ Nusantika AI: gaya pendukung gerak (dipakai bersama assets/gerak.js) Kelas .gerak dipasang di hanya bila animasi benar-benar berjalan. ========================================================================== */ /* Lenis mengambil alih gulir halus; scroll-behavior bawaan harus mati. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Judul per kata: tiap kata punya jendela sendiri untuk naik dari bawah. */ .kata { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; } .kata-isi { display: inline-block; will-change: transform; } .gerak .hero h1 em::after { animation-delay: 1.25s; } /* Di mode gerak, GSAP yang memunculkan isi; transisi CSS lama dimatikan. */ .gerak .muncul { transition: none !important; opacity: 1; transform: none; } /* Panel yang naik: sudutnya dibentuk clip-path, isinya tetap di tempat. */ .gerak #cerita, .gerak #agen, .gerak .cta { will-change: clip-path; } /* Garis progres linimasa dan titik yang terisi setelah dilewati. */ .linimasa-garis { position: absolute; left: 7px; top: 12px; bottom: 150px; width: 2px; background: var(--tf-tinta); transform-origin: top; transform: scaleY(0); z-index: 0; } html:not(.gerak) .linimasa-garis { display: none; } .gerak .linimasa::before { background: var(--tf-rambut); } .linimasa li::before { z-index: 1; transition: background .35s, box-shadow .35s, transform .35s; } .gerak .linimasa li.lewat::before { background: var(--tf-tinta); transform: scale(1.1); } .gerak .linimasa li.selesai.lewat::before { background: var(--tf-hijau); box-shadow: 0 0 0 7px rgba(9, 248, 117, .22); } /* Pita peran berjalan tanpa henti, berhenti saat disentuh kursor. */ .peran.berjalan { display: block; overflow: hidden; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .peran-jalur { display: flex; gap: 10px; width: max-content; animation: pita-jalan 38s linear infinite; } .peran.berjalan:hover .peran-jalur { animation-play-state: paused; } @keyframes pita-jalan { to { transform: translateX(calc(-50% - 5px)); } } @media (prefers-reduced-motion: reduce) { .peran-jalur { animation: none; } } /* item linimasa masuk dari kanan; luapannya dipotong tanpa mematikan sticky di kolom kiri */ .gerak .cerita-grid { overflow-x: clip; }