/* ============================================================ HR Cafe — Scroll reveal & motion Elements start hidden and animate in when observed by animations.js (adds .is-visible). JS also adds .js-ready to so no-JS users see everything immediately. ============================================================ */ /* Default (no-JS / pre-observer): fully visible, no jank */ .reveal { opacity: 1; transform: none; } /* Only hide + prime once JS confirms it can reveal them */ .js-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } .js-ready .reveal.is-visible { opacity: 1; transform: none; } /* Directional + scale variants */ .js-ready .reveal--left { transform: translateX(-34px); } .js-ready .reveal--right { transform: translateX(34px); } .js-ready .reveal--scale { transform: scale(0.94); } .js-ready .reveal--left.is-visible, .js-ready .reveal--right.is-visible, .js-ready .reveal--scale.is-visible { transform: none; } /* Stagger via inline --i (set in markup or JS) */ .js-ready .reveal[style*='--i'] { transition-delay: calc(var(--i) * 90ms); } /* Hero entrance sequence (runs on load) */ .hero__inner > * { animation: heroRise 0.9s var(--ease) both; } .hero__rating { animation-delay: 0.1s; } .hero h1 { animation-delay: 0.22s; } .hero__sub { animation-delay: 0.36s; } .hero__actions { animation-delay: 0.5s; } .hero .order-links { animation-delay: 0.62s; } @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .hero__cue { animation: cueFade 1s var(--ease) 1.1s both; } .hero__cue .line { animation: cueLine 1.8s var(--ease) infinite; transform-origin: top; } @keyframes cueFade { from { opacity: 0; } to { opacity: 1; } } @keyframes cueLine { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } /* ============================================================ Reduced motion — honour the OS setting everywhere. Kills reveals, hero sequence, ember drift, WA pulse. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js-ready .reveal { opacity: 1 !important; transform: none !important; } .hero__embers { display: none; } }