/* ========================================================================== Motion — scroll reveals, hero entrance, CTA glow/pulse, scroll cue. Enter = ease-out, under 300ms for UI, longer for marketing/explanatory. prefers-reduced-motion strips all transform-based motion (opacity only). ========================================================================== */ /* * Reveal-hiding only applies once .hgh-js confirms the reveal script is * actually running (set synchronously in , see header.php) — content * stays visible by default for no-JS and any environment where the observer * never gets a chance to fire, per the "enhance an already-visible default" * rule (main.js also force-reveals everything after a timeout as a backstop). */ .hgh-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .hgh-hero__eyebrow[data-reveal] { transition-delay: 40ms; } .hgh-hero__headline[data-reveal] { transition-delay: 100ms; } .hgh-hero__sub[data-reveal] { transition-delay: 160ms; } .hgh-hero__ctas[data-reveal] { transition-delay: 220ms; } .hgh-services__grid [data-reveal]:nth-child(1) { transition-delay: 0ms; } .hgh-services__grid [data-reveal]:nth-child(2) { transition-delay: 60ms; } .hgh-services__grid [data-reveal]:nth-child(3) { transition-delay: 120ms; } .hgh-services__grid [data-reveal]:nth-child(4) { transition-delay: 180ms; } .hgh-services__grid [data-reveal]:nth-child(5) { transition-delay: 240ms; } .hgh-services__grid [data-reveal]:nth-child(6) { transition-delay: 300ms; } .hgh-stats__grid [data-reveal]:nth-child(1) { transition-delay: 0ms; } .hgh-stats__grid [data-reveal]:nth-child(2) { transition-delay: 70ms; } .hgh-stats__grid [data-reveal]:nth-child(3) { transition-delay: 140ms; } /* Hero entrance on page load (independent of scroll) */ .hgh-hero__content > * { animation: hgh-hero-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } .hgh-hero__eyebrow { animation-delay: 80ms; } .hgh-hero__headline { animation-delay: 160ms; } .hgh-hero__sub { animation-delay: 260ms; } .hgh-hero__ctas { animation-delay: 360ms; } @keyframes hgh-hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes hgh-cta-pulse { 0%, 100% { box-shadow: 0 8px 20px -8px rgba(27, 36, 29, 0.35), 0 0 0 0 rgba(204, 139, 60, 0.45); } 50% { box-shadow: 0 8px 20px -8px rgba(27, 36, 29, 0.35), 0 0 0 10px rgba(204, 139, 60, 0); } } @keyframes hgh-scroll-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } @media (prefers-reduced-motion: reduce) { [data-reveal] { transform: none; transition: opacity 300ms ease; } .hgh-hero__content > * { animation: none; opacity: 1; transform: none; } .hgh-btn--glow, .hgh-hero__scroll { animation: none; } .hgh-hero__slide { transition: opacity 300ms ease; } }