/* ===== PAGE LOAD ANIMATIONS ===== Applied automatically: starts with .is-loading; entry.js removes the class on DOMContentLoaded which triggers staggered transitions on tagged elements. No JS keyframes — pure CSS transitions for cheap perf. */ /* Header drops in from the top */ .nav-bar { transform: translateY(-100%); transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1); } body:not(.is-loading) .nav-bar { transform: translateY(0); } /* Generic stagger primitives */ .entry { opacity: 0; transform: translateY(14px); } body:not(.is-loading) .entry { opacity: 1; transform: translateY(0); transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); } body:not(.is-loading) .entry-1 { transition-delay: 150ms; } body:not(.is-loading) .entry-2 { transition-delay: 250ms; } body:not(.is-loading) .entry-3 { transition-delay: 350ms; } body:not(.is-loading) .entry-4 { transition-delay: 450ms; } body:not(.is-loading) .entry-5 { transition-delay: 550ms; } body:not(.is-loading) .entry-6 { transition-delay: 650ms; } /* Hero headline: per-line slide up with mask */ .hero-headline .line { display: block; overflow: hidden; position: relative; } .hero-headline .line > .line-inner { display: block; transform: translateY(110%); transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1); } body:not(.is-loading) .hero-headline .line > .line-inner { transform: translateY(0); } body:not(.is-loading) .hero-headline .line:nth-child(1) > .line-inner { transition-delay: 250ms; } body:not(.is-loading) .hero-headline .line:nth-child(2) > .line-inner { transition-delay: 380ms; } body:not(.is-loading) .hero-headline .line:nth-child(3) > .line-inner { transition-delay: 510ms; } /* Hero photo: scale + clip from right */ .hero-right { clip-path: inset(0 0 0 100%); transition: clip-path 1100ms cubic-bezier(0.2, 0.8, 0.2, 1); } body:not(.is-loading) .hero-right { clip-path: inset(0 0 0 0%); } /* Vertical sweep-in line on hero-left */ .hero-left::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fw-teal); transform: scaleY(0); transform-origin: top; transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms; z-index: 3; } body:not(.is-loading) .hero-left::before { transform: scaleY(1); } /* Marquee fades in slightly later */ .marquee { opacity: 0; transition: opacity 700ms ease-out 900ms; } body:not(.is-loading) .marquee { opacity: 1; } /* Page-hero (services/about/insights/contact/privacy headers) */ .page-hero .eb, .page-hero h1, .page-hero .lead, .page-hero .page-hero-meta { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); } body:not(.is-loading) .page-hero .eb { opacity: 1; transform: none; transition-delay: 150ms; } body:not(.is-loading) .page-hero h1 { opacity: 1; transform: none; transition-delay: 280ms; } body:not(.is-loading) .page-hero .lead { opacity: 1; transform: none; transition-delay: 410ms; } body:not(.is-loading) .page-hero .page-hero-meta{ opacity: 1; transform: none; transition-delay: 540ms; } /* Reduced motion: skip everything, show immediately */ @media (prefers-reduced-motion: reduce) { .nav-bar, .entry, .hero-headline .line > .line-inner, .hero-right, .hero-left::before, .marquee, .page-hero .eb, .page-hero h1, .page-hero .lead, .page-hero .page-hero-meta { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; } }