/* ========================================================================== Motion — scroll reveal Dua pola: block wipe (H1/H2/H3) dan panel expand (kartu). State awal hanya dipasang kalau JS aktif (.js-motion di ), jadi tanpa JS seluruh konten tetap tampil penuh. ========================================================================== */ :root { --ease-reveal: cubic-bezier(.16, 1, .3, 1); --ease-wipe: cubic-bezier(.65, 0, .35, 1); --dur-wipe: 520ms; --stagger-word: 70ms; --dur-panel: 700ms; --stagger-panel: 120ms; --dur-btn-fill: 280ms; --ease-btn-fill: var(--ease-wipe); } /* --- 1. H1 / H2 / H3 — block wipe ---------------------------------------- */ .wipe__w { position: relative; display: inline-block; } .js-motion .wipe__w::after { content: ""; position: absolute; inset: 0; background: var(--c-ink); transform: scaleX(0); transform-origin: left center; pointer-events: none; } .section--dark .wipe__w::after { background: var(--c-on-dark); } .js-motion .wipe__t { display: inline-block; opacity: 0; } .js-motion .wipe.is-in .wipe__w::after { animation: wipe-block var(--dur-wipe) var(--ease-wipe) var(--d, 0ms) both; } .js-motion .wipe.is-in .wipe__t { animation: wipe-text var(--dur-wipe) var(--ease-wipe) var(--d, 0ms) both; } @keyframes wipe-block { 0% { transform: scaleX(0); transform-origin: left center; } 50% { transform: scaleX(1); transform-origin: left center; } 50.01% { transform: scaleX(1); transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } } @keyframes wipe-text { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } } /* --- 2. Kartu — panel expand --------------------------------------------- */ .js-motion .panel { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-panel) var(--ease-reveal); transition-delay: var(--d, 0ms); } .js-motion .panel.is-in { clip-path: inset(0); } .js-motion .panel__content { opacity: 0; transition: opacity 400ms ease; transition-delay: calc(var(--d, 0ms) + var(--dur-panel) * 0.6); } .js-motion .panel.is-in .panel__content { opacity: 1; } /* --- Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .js-motion .wipe__w::after { display: none; } .js-motion .wipe__t { opacity: 1; animation: none; } .js-motion .wipe.is-in .wipe__w::after, .js-motion .wipe.is-in .wipe__t { animation: none; } .js-motion .panel { clip-path: none; transition: none; } .js-motion .panel__content { opacity: 1; transition: none; } .btn::before { transition: none; } .btn { transition: color 1ms, border-color 1ms, background-color 1ms; } .site-header, .site-header__logo-img { transition: none; } .nav-overlay, .nav-overlay.is-open, .site-header__menu { transition: none; } }