/** * assets/motion.css * ============================================================ * LAYER MOTION TAMBAHAN — Perkasa Hosting Indonesia * ------------------------------------------------------------ * File ini HANYA menambah animasi & micro-interaction di atas * design system neumorphism + glassmorphism yang sudah ada di * includes/style.php. Tidak ada warna, radius, shadow dasar, * atau layout yang diubah di sini — murni transform & opacity * (GPU-friendly, tidak memicu layout shift/reflow berat). * * Dimuat SETELAH /assets/app-style.php di , jadi aturan di * sini melengkapi/menghaluskan transisi yang sudah ada lewat cascade * normal (tanpa !important, kecuali menimpa reveal state di JS). * * prefers-reduced-motion sudah ditangani global di style.php: * @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}} * jadi semua efek di file ini otomatis nonaktif untuk user yang minta itu. * ============================================================ */ :root{ --motion-spring: cubic-bezier(.34,1.56,.64,1); /* spring dengan sedikit overshoot, natural */ --motion-spring-soft: cubic-bezier(.22,1,.36,1); /* spring halus tanpa overshoot berlebihan */ --motion-out: cubic-bezier(.4,0,.2,1); } /* ================= Reveal stagger (dipakai bareng data-reveal-i dari motion.js) ================= */ [data-reveal]{ transition-delay: calc(var(--motion-i, 0) * 60ms); } /* ================= Hover & tap micro-interaction ================= */ .btn:hover{ transform: translateY(-2px) scale(1.015); } .btn:active{ transform: translateY(0) scale(.96); transition-duration:.12s; } a.card:hover, .card.hoverable:hover{ transform: translateY(-4px) scale(1.008); } a.card:active, .card.hoverable:active{ transform: translateY(-1px) scale(.985); transition-duration:.12s; } .sidebar-link{ transition: transform .25s var(--motion-out), background .25s var(--motion-out), color .25s var(--motion-out); } .sidebar-link:hover{ transform: translateX(4px); } .nav ul li a{ transition: transform .22s var(--motion-out), background .22s var(--motion-out); } .nav ul li a:hover{ transform: translateY(-1px); } .nav-toggle, .back-to-top, .wa-float, .sidebar-close, .pwa-toast-close, .ftr-contact-card, .ftr-social a{ transition: transform .3s var(--motion-spring); } .nav-toggle:hover, .back-to-top:hover, .wa-float:hover, .ftr-social a:hover{ transform: scale(1.08); } .nav-toggle:active, .back-to-top:active, .wa-float:active{ transform: scale(.92); } .ftr-contact-card:hover{ transform: translateY(-3px); } /* ================= Antigravity: elevation saat cursor mendekat ================= */ /* --tilt-x / --tilt-y / --tilt-lift di-set oleh motion.js lewat mousemove (throttled, rAF) */ [data-tilt]{ transform: perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--tilt-lift,0px)); transition: transform .4s var(--motion-spring-soft), box-shadow .35s var(--motion-out); } [data-tilt]:hover{ box-shadow: var(--shadow-lg); } /* ================= Antigravity: floating halus untuk elemen dekoratif opsional ================= */ [data-float]{ animation: motionFloat 6s ease-in-out infinite; will-change: transform; } [data-float="slow"]{ animation-duration: 9s; } [data-float="fast"]{ animation-duration: 4s; } @keyframes motionFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } } /* ================= Modal — spring open/close (mendeteksi display:flex inline, tanpa ubah JS tiap file) ================= */ .modal-overlay{ opacity:0; transition: opacity .3s var(--motion-out); } .modal-overlay[style*="flex"]{ opacity:1; } .modal-box{ transform: translateY(18px) scale(.96); transition: transform .38s var(--motion-spring), opacity .3s var(--motion-out); } .modal-overlay[style*="flex"] .modal-box{ transform: translateY(0) scale(1); } /* ================= Dropdown generik (kalau dipakai di halaman manapun) ================= */ .dropdown-menu{ transform-origin: top center; transform: translateY(-6px) scale(.97); opacity:0; pointer-events:none; transition: transform .25s var(--motion-spring), opacity .2s var(--motion-out); } .dropdown-menu.open, .dropdown.open .dropdown-menu{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; } /* ================= Sidebar & overlay — perhalus easing yang sudah ada ================= */ .premium-sidebar{ transition-timing-function: var(--motion-spring-soft); } .sidebar-overlay{ transition-timing-function: var(--motion-out); } /* ================= Page transition (melengkapi @view-transition bawaan di style.php) ================= */ ::view-transition-old(root){ animation-name: motionPageOut; animation-timing-function: var(--motion-out); } ::view-transition-new(root){ animation-name: motionPageIn; animation-timing-function: var(--motion-spring-soft); animation-duration: .32s; } @keyframes motionPageOut{ to{ opacity:0; transform: translateY(-6px); } } @keyframes motionPageIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } } /* ================= Nonaktifkan tilt & hover-lift di perangkat sentuh (tidak ada hover asli) ================= */ @media (hover:none){ [data-tilt]{ transform:none !important; } }