@charset "UTF-8"; /* Onsites marketing site — tasteful motion layer. transform/opacity only, gated behind html.js (added in ), and fully disabled under prefers-reduced-motion. */ /* —— Scroll reveal (single block) —— */ html.js .reveal{ opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0s); } html.js .reveal.is-in{ opacity: 1; transform: none; } /* —— Scroll reveal (staggered children, for grids) —— */ html.js .reveal--stagger > *{ opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } html.js .reveal--stagger.is-in > *{ opacity: 1; transform: none; } html.js .reveal--stagger.is-in > *:nth-child(1){ transition-delay: .0s } html.js .reveal--stagger.is-in > *:nth-child(2){ transition-delay: .08s } html.js .reveal--stagger.is-in > *:nth-child(3){ transition-delay: .16s } html.js .reveal--stagger.is-in > *:nth-child(4){ transition-delay: .24s } html.js .reveal--stagger.is-in > *:nth-child(5){ transition-delay: .32s } html.js .reveal--stagger.is-in > *:nth-child(6){ transition-delay: .40s } html.js .reveal--stagger.is-in > *:nth-child(7){ transition-delay: .48s } html.js .reveal--stagger.is-in > *:nth-child(8){ transition-delay: .56s } /* —— Hero entrance: staggered fade-up on load —— */ html.js .hero-inner > :not(.hero-side){ opacity: 0; animation: hero-in .6s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--hero-delay, 0s); } html.js .hero-inner > :nth-child(1){ --hero-delay: .04s } html.js .hero-inner > :nth-child(2){ --hero-delay: .10s } html.js .hero-inner > :nth-child(3){ --hero-delay: .16s } html.js .hero-inner > :nth-child(4){ --hero-delay: .22s } html.js .hero-inner > :nth-child(5){ --hero-delay: .28s } html.js .hero-inner > :nth-child(6){ --hero-delay: .34s } html.js .hero-inner > :nth-child(7){ --hero-delay: .40s } html.js .hero-inner > :nth-child(8){ --hero-delay: .46s } html.js .hero-inner > :nth-child(9){ --hero-delay: .52s } @keyframes hero-in{ to{ opacity: 1; transform: none; } } /* —— Reduced motion: force everything visible & static —— */ @media (prefers-reduced-motion: reduce){ html.js .reveal, html.js .reveal--stagger > *, html.js .hero-inner > *{ opacity: 1 !important; transform: none !important; animation: none !important; } }