/* ============================================================ Better Call — motion & polish layer (additive) Gated behind html.bc-anim, which is added by an inline script ONLY when the user has not requested reduced motion and JS is available. So with JS off / reduced-motion, nothing hides and the page renders exactly as the original design. ============================================================ */ /* ---- Scroll reveal: every section except the hero ---- */ .bc-anim .section:not(.hero) { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .bc-anim .section.is-visible { opacity: 1; transform: none; } /* ---- Staggered cards inside the "jobs" section ---- */ .bc-anim .jobs__card { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .bc-anim .jobs.is-visible .jobs__card { opacity: 1; transform: none; } .bc-anim .jobs.is-visible .jobs__card:nth-child(1) { transition-delay: .08s; } .bc-anim .jobs.is-visible .jobs__card:nth-child(2) { transition-delay: .18s; } .bc-anim .jobs.is-visible .jobs__card:nth-child(3) { transition-delay: .28s; } .bc-anim .jobs.is-visible .jobs__card:nth-child(4) { transition-delay: .38s; } /* card hover lift (subtle, on-brand shadow) */ .bc-anim .jobs__card { transition: opacity .6s ease, transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; } .bc-anim .jobs__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(74, 80, 248, .16); } /* ---- Hero entrance on load ---- */ .bc-anim .hero__content, .bc-anim .hero__media { opacity: 0; transform: translateY(32px); } .bc-anim.hero-in .hero__content { animation: bc-rise .9s .10s cubic-bezier(.22, .61, .36, 1) forwards; } .bc-anim.hero-in .hero__media { animation: bc-rise .9s .28s cubic-bezier(.22, .61, .36, 1) forwards; } @keyframes bc-rise { to { opacity: 1; transform: none; } } /* gentle float on the hero image frame after it has arrived */ .bc-anim.hero-in .hero__media-frame { animation: bc-float 6.5s ease-in-out 1.4s infinite; } @keyframes bc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---- Respect reduced motion: neutralise the whole layer ---- */ @media (prefers-reduced-motion: reduce) { .bc-anim .section:not(.hero), .bc-anim .jobs__card, .bc-anim .hero__content, .bc-anim .hero__media { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .bc-anim.hero-in .hero__media-frame { animation: none !important; } }