/* ========================================================================== ANIMATIONS -------------------------------------------------------------------------- Progressive enhancement contract: Reveal elements are VISIBLE by default. JS adds `data-anim-ready` to , which is what hides them prior to entry. So with JS disabled or broken, every word of content still renders. Nothing is ever hidden by CSS alone. ========================================================================== */ /* ---- Entrance reveals ---------------------------------------------------- */ [data-reveal] { opacity: 1; transform: none; } html[data-anim-ready] [data-reveal] { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html[data-anim-ready] [data-reveal][data-revealed="true"] { opacity: 1; transform: none; } /* Directional variants */ html[data-anim-ready] [data-reveal="left"] { transform: translateX(-34px); } html[data-anim-ready] [data-reveal="right"] { transform: translateX(34px); } html[data-anim-ready] [data-reveal="scale"] { transform: scale(.93); } html[data-anim-ready] [data-reveal="left"][data-revealed="true"], html[data-anim-ready] [data-reveal="right"][data-revealed="true"], html[data-anim-ready] [data-reveal="scale"][data-revealed="true"] { transform: none; } /* ---- Hero word-by-word rise --------------------------------------------- */ .word { display: inline-block; overflow: hidden; vertical-align: bottom; } .word > span { display: inline-block; will-change: transform; } html[data-anim-ready] .word > span { transform: translateY(105%); transition: transform 780ms var(--ease-out); transition-delay: var(--word-delay, 0ms); } html[data-anim-ready] .hero[data-revealed="true"] .word > span { transform: none; } /* ---- Parallax ------------------------------------------------------------ JS writes --py (px). Depth is set per element via data-depth. */ [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* ---- Floating drift ------------------------------------------------------ */ @keyframes drift { from { transform: translateY(0); } to { transform: translateY(-14px); } } .float { animation: drift 7s var(--ease-in-out) infinite alternate; } .float--slow { animation-duration: 10s; } .float--delay { animation-delay: -3.5s; } /* ---- Pulse ring (mobile call button) ------------------------------------- */ @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--a-amber-35); } 70% { box-shadow: 0 0 0 14px rgba(232,88,13,0); } 100% { box-shadow: 0 0 0 0 rgba(232,88,13,0); } } /* ---- Scroll-drawn process line ------------------------------------------- */ .process__line { position: absolute; left: 27px; top: 0; bottom: 0; width: 1px; background: var(--a-ink-12); } .process__line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-amber), var(--c-cyan)); transform: scaleY(var(--draw, 0)); transform-origin: 50% 0; transition: transform 120ms linear; } /* ---- Marquee-free ticker (industries) ------------------------------------ */ @keyframes slide-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== REDUCED MOTION Kill parallax, tilt, drift, counters and word-rise. Keep a short fade so the interface still acknowledges state changes. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 60ms !important; scroll-behavior: auto !important; } /* Reveals become instant and unconditionally visible */ html[data-anim-ready] [data-reveal], html[data-anim-ready] [data-reveal][data-revealed="true"] { opacity: 1 !important; transform: none !important; transition: none !important; } html[data-anim-ready] .word > span { transform: none !important; } /* No parallax displacement */ [data-parallax] { transform: none !important; } /* No tilt, no drift */ .card--tilt { transform: none !important; } .float { animation: none !important; } .mobilebar__btn--call::before { animation: none !important; } .btn::after { display: none !important; } .process__line::after { transform: scaleY(1) !important; } }