/* ============================================================ Cue - page-load motion. One shared file. Elements opt in with data-anim on the page, or inherit the defaults below per page type. Principles: - Everything is a short fade + small rise. No slides, no scale, no bounce - the brand voice is flat and direct. - Content is visible by default and only hidden once JS confirms it can animate it (.js-anim on ). If JS fails, nothing is ever stuck invisible. - Fully disabled under prefers-reduced-motion. ============================================================ */ :root { --anim-dur: 0.62s; --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out-quad-ish */ --anim-rise: 14px; } /* Only hide things once JS is confirmed running. Without this class (JS off, script error) every element stays plainly visible. */ .js-anim [data-anim] { opacity: 0; will-change: opacity, transform; } .js-anim [data-anim="up"] { transform: translateY(var(--anim-rise)); } .js-anim [data-anim="fade"] { transform: none; } /* the played state */ .js-anim [data-anim].anim-in { opacity: 1; transform: none; transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); } /* hero media fades a touch slower and never moves - movement on a full-bleed image reads as a glitch, not a transition */ .js-anim [data-anim="media"] { opacity: 0; transform: none; } .js-anim [data-anim="media"].anim-in { opacity: 1; transition: opacity 0.9s var(--anim-ease); } /* stagger: set by JS as an inline --anim-i index on each element */ .js-anim [data-anim].anim-in { transition-delay: calc(var(--anim-i, 0) * 70ms); } /* list rows get a tighter stagger so long lists don't crawl */ .js-anim [data-anim-list] > * { opacity: 0; transform: translateY(10px); } .js-anim [data-anim-list] > *.anim-in { opacity: 1; transform: none; transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease); transition-delay: calc(var(--anim-i, 0) * 34ms); } /* ---- scroll-revealed blocks further down the page ---- */ .js-anim [data-anim-scroll] { opacity: 0; transform: translateY(18px); } .js-anim [data-anim-scroll].anim-in { opacity: 1; transform: none; transition: opacity 0.7s var(--anim-ease), transform 0.7s var(--anim-ease); } /* ---- the pill header settles in on first paint ---- */ .js-anim .pill { opacity: 0; transform: translateY(-8px); } .js-anim .pill.anim-in { opacity: 1; transform: none; transition: opacity 0.55s var(--anim-ease), transform 0.55s var(--anim-ease); } @media (prefers-reduced-motion: reduce) { .js-anim [data-anim], .js-anim [data-anim-list] > *, .js-anim [data-anim-scroll], .js-anim .pill { opacity: 1 !important; transform: none !important; transition: none !important; } }