/* ============================================================= scroll-reveal — homepage breathing room + reveal-on-scroll Apply by linking this file and using . ============================================================= */ /* Extra vertical dispersion on the homepage --------------------- */ body.has-reveal .section, body.has-reveal .section.alt { padding-top: clamp(56px, 6vw, 104px); padding-bottom: clamp(56px, 6vw, 104px); padding-left: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2)); padding-right: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2)); } body.has-reveal .timeline-section { padding-top: clamp(64px, 7vw, 118px); padding-bottom: clamp(56px, 6vw, 104px); padding-left: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2)); padding-right: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2)); } body.has-reveal .callout { padding-top: clamp(52px, 5.5vw, 96px); padding-bottom: clamp(52px, 5.5vw, 96px); padding-left: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2)); padding-right: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2)); } body.has-reveal .section-head { margin-bottom: 40px; } body.has-reveal .grid.three { gap: 22px; } body.has-reveal .shell.split { gap: 56px; } @media (max-width: 900px) { body.has-reveal .section, body.has-reveal .section.alt { padding: 64px 20px; } body.has-reveal .timeline-section { padding: 72px 20px 64px; } body.has-reveal .callout { padding: 60px 20px; } body.has-reveal .shell.split { gap: 30px; } } /* Reveal primitive --------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Variant: subtle scale-in (used on the feature image) --------- */ .reveal.reveal-scale { transform: translateY(28px) scale(0.97); } .reveal.reveal-scale.is-visible { transform: translateY(0) scale(1); } /* Variant: from left / right ----------------------------------- */ .reveal.reveal-from-left { transform: translate3d(-32px, 0, 0); } .reveal.reveal-from-right { transform: translate3d( 32px, 0, 0); } .reveal.reveal-from-left.is-visible, .reveal.reveal-from-right.is-visible { transform: translate3d(0, 0, 0); } /* Respect reduced motion --------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }