/* ================================================================= NWADO SOLUTIONS — ANIMATIONS Scroll-reveal (driven by animations.js / IntersectionObserver) and ambient motion. All gated behind prefers-reduced-motion. ================================================================= */ /* Scroll-reveal base state. JS adds .is-visible when in viewport. If JS is disabled, .no-js fallback (set in ) keeps everything visible. */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } /* Directional + scale variants */ [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal="fade"] { transform: none; } /* Stagger: children reveal one after another */ [data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-reveal-group].is-visible > * { opacity: 1; transform: none; } [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.02s; } [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.10s; } [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.18s; } [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.26s; } [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.34s; } [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.42s; } /* Ambient float for hero/mockup visuals */ @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .float-soft { animation: float-soft 6s ease-in-out infinite; } @keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 0.7; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } } .pulse-ring { transform-origin: center; animation: pulse-ring 2.6s ease-out infinite; } /* Animated bars inside dashboard mockups */ @keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } } .mockup-bar { transform-origin: bottom; animation: grow-bar 1.1s var(--ease) both; } .is-visible .mockup-bar:nth-child(1) { animation-delay: 0.1s; } .is-visible .mockup-bar:nth-child(2) { animation-delay: 0.25s; } .is-visible .mockup-bar:nth-child(3) { animation-delay: 0.4s; } .is-visible .mockup-bar:nth-child(4) { animation-delay: 0.55s; } .is-visible .mockup-bar:nth-child(5) { animation-delay: 0.7s; } /* Line drawing for charts */ @keyframes draw-line { to { stroke-dashoffset: 0; } } .draw-line { stroke-dasharray: 600; stroke-dashoffset: 600; } .is-visible .draw-line { animation: draw-line 1.8s var(--ease) forwards; } /* Count-up numbers (JS toggles, but keep a baseline) */ .stat__num[data-count] { font-variant-numeric: tabular-nums; } /* Link underline sweep */ .link-sweep { position: relative; } .link-sweep::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--c-teal); transform: scaleX(0); transform-origin: right; transition: transform var(--t); } .link-sweep:hover::after { transform: scaleX(1); transform-origin: left; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; } .float-soft, .pulse-ring, .mockup-bar, .draw-line { animation: none !important; } .draw-line { stroke-dashoffset: 0; } }