/* ========================================================================== 07 — ANIMATIONS Keyframes, state scroll-reveal, dan penghormatan prefers-reduced-motion. ========================================================================== */ /* ========================================================================== KEYFRAMES ========================================================================== */ @keyframes kn-ping { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes kn-float-slow { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -14px, 0) scale(1.04); } } @keyframes kn-sweep { 0% { inset-inline-start: -40%; } 55% { inset-inline-start: 120%; } 100% { inset-inline-start: 120%; } } @keyframes kn-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3vw, 4vh, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @keyframes kn-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(4vw, -3vh, 0) scale(1); } 100% { transform: translate3d(0, 0, 0) scale(1.05); } } /* Blob bergerak sangat lambat supaya latar "hidup" tanpa mengganggu baca. */ .kn-blob--1 { animation: kn-drift-a 26s ease-in-out infinite; } .kn-blob--2 { animation: kn-drift-b 32s ease-in-out infinite; } .kn-blob--3 { animation: kn-drift-a 38s ease-in-out infinite reverse; } .kn-blob--4 { animation: kn-drift-b 30s ease-in-out infinite reverse; } /* ========================================================================== SCROLL REVEAL State awal hanya diterapkan bila JS aktif (class .kn-js pada ), supaya konten tetap terlihat kalau JS gagal dimuat. ========================================================================== */ .kn-js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 700ms var(--kn-ease-out), transform 700ms var(--kn-ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .kn-js [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); } /* Varian arah — dipakai lewat data-reveal="left|right|scale" bila perlu. */ .kn-js [data-reveal="left"] { transform: translate3d(-26px, 0, 0); } .kn-js [data-reveal="right"] { transform: translate3d(26px, 0, 0); } .kn-js [data-reveal="scale"] { transform: scale(0.96); } .kn-js [data-reveal="left"].is-revealed, .kn-js [data-reveal="right"].is-revealed { transform: translate3d(0, 0, 0); } .kn-js [data-reveal="scale"].is-revealed { transform: scale(1); } /* Setelah animasi selesai will-change dilepas oleh kn-reveal.js (class .is-settled) agar tidak membebani compositor. */ .kn-js [data-reveal].is-settled { will-change: auto; } /* ========================================================================== PRELOAD — hindari "flash" animasi saat halaman baru dibuka ========================================================================== */ .kn-body.is-preload .kn-blob, .kn-body.is-preload .cta-banner__shine, .kn-body.is-preload .hero__aura { animation-play-state: paused; } /* Sekuens masuk hero saat halaman pertama kali dimuat. */ .kn-js .hero__visual { transition-duration: 900ms; } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .kn-js [data-reveal] { opacity: 1 !important; transform: none !important; } .mockup__device { transform: rotateX(3deg) rotateY(-11deg) !important; } .kn-blob { animation: none !important; } }