/* ============================================================================ * Section scroll reveal. * * The pre-state is scoped to .js-anim, which theme.js sets on while the * head is parsing: no flash of hidden content, and with JS disabled every * section simply renders as normal. prefers-reduced-motion neutralises it in * theme.js's base layer. * * Sections blur in as a block (data-reveal); the repeated cards inside them * (data-reveal-item — proof stats, pain cards, case studies, partner cards, * insight articles) additionally settle in one at a time, each carrying a * larger blur/rise/scale and a delay of its own, set as --stagger-i by * theme.js from its position among its siblings. * ========================================================================= */ [data-reveal] { transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out; } .js-anim [data-reveal] { opacity: 0; transform: translateY(16px); filter: blur(6px); } .js-anim [data-reveal].is-revealed { opacity: 1; transform: none; filter: blur(0); } [data-reveal-item] { transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1), filter 0.7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--stagger-i, 0) * 110ms); } .js-anim [data-reveal-item] { opacity: 0; transform: translateY(28px) scale(0.95); filter: blur(10px); } .js-anim [data-reveal-item].is-revealed { opacity: 1; transform: none; filter: blur(0); } /* ============================================================================ * Tab panel switch (Seven services / Five building blocks). * * Same blur/rise language as the reveals above, just replayed on a click * instead of on scroll: the [data-tabs] handler in index.html blurs the * outgoing panel out, waits for that transition to finish, swaps `hidden`, * then lands the incoming panel in the .is-switching pre-state and removes it * a frame later so the blur-in actually animates. No .js-anim gate needed — * with JS disabled the click handler never runs, so panels never switch at * all either way. * ========================================================================= */ [role="tabpanel"] { transition: opacity 0.35s cubic-bezier(.16,1,.3,1), transform 0.35s cubic-bezier(.16,1,.3,1), filter 0.35s cubic-bezier(.16,1,.3,1); } [role="tabpanel"].is-switching { opacity: 0; transform: translateY(10px); filter: blur(8px); }