/* =========================== Hero Entrance Animations =========================== */ @keyframes hero-float-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Hiring view hero — plays on page load (default view) */ @media (prefers-reduced-motion: no-preference) { .hero-animate { animation: hero-float-in 0.6s ease both; } .hero .hero-eyebrow { animation-delay: 0.05s; } .hero .hero-headline { animation-delay: 0.2s; } .hero .hero-sub { animation-delay: 0.35s; } .hero .cta-button { animation-delay: 0.5s; } } /* Candidates view hero — plays when view becomes active */ @media (prefers-reduced-motion: no-preference) { .view.active .hero-animate-cand { animation: hero-float-in 0.6s ease both; } .view.active .hero .hero-eyebrow.hero-animate-cand { animation-delay: 0.05s; } .view.active .hero .hero-headline.hero-animate-cand { animation-delay: 0.2s; } .view.active .hero .hero-sub.hero-animate-cand { animation-delay: 0.35s; } } /* =========================== Scroll-Triggered Fade-Up =========================== */ /* Hidden state — only when JS is present. scroll-animations.js adds .js-animations to before first paint. */ .js-animations .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--stagger, 0) * 80ms); } .js-animations .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .js-animations .fade-up { opacity: 1; transform: none; transition: none; } .hero-animate, .hero-animate-cand { animation: none !important; } }