/* ========================================================================== Trico Motion & Reduced Motion Styles Sesuai PRD_Desain_UI_UX_Website_Trico.md Section 14 & DUX-07, DUX-08 ========================================================================== */ /* Default: Elements are visible in plain HTML so if JS fails, nothing is hidden */ .reveal-on-scroll { opacity: 1; transform: none; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* When JS is enabled, .js-motion-ready is added to , then initial state becomes prepared */ html.js-motion-ready .reveal-on-scroll { opacity: 0; transform: translateY(16px); } html.js-motion-ready .reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); } /* Stagger delay classes */ .delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-400 { transition-delay: 400ms; } /* DUX-08: Complete disable of motion for prefers-reduced-motion: reduce */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.js-motion-ready .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } }