/* ========================================================================== HomePilot Animations — scroll reveal, hero entrance, micro-interactions All animations are opacity/transform only and respect prefers-reduced-motion via the global override in base.css. Progressive enhancement: the .reveal / .reveal-group / .step / .chat-row / .mini-card hidden states only apply once the "js" class is present on , set by a tiny inline script in (see pages/*.html). If JavaScript fails to load for any reason, content is visible by default instead of permanently hidden. ========================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } /* ---- Scroll reveal (JS-gated) ---- */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .js .reveal-group > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal-group.is-visible > * { opacity: 1; transform: translateY(0); } .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; } .reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; } .reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; } .reveal-group.is-visible > *:nth-child(5) { transition-delay: 320ms; } .reveal-group.is-visible > *:nth-child(6) { transition-delay: 400ms; } /* ---- Hero entrance (pure CSS, runs automatically on load — no JS needed) ---- */ .hero-anim { opacity: 0; transform: translateY(16px); animation: fadeUp var(--dur-slow) var(--ease-out) forwards; } .hero-anim:nth-child(1) { animation-delay: 60ms; } .hero-anim:nth-child(2) { animation-delay: 160ms; } .hero-anim:nth-child(3) { animation-delay: 260ms; } .hero-anim:nth-child(4) { animation-delay: 360ms; } /* ---- Hero chat bubbles (JS-gated: sequential reveal via home.js toggling .show) ---- */ .js .chat-row, .js .mini-card { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .chat-row.show, .mini-card.show { opacity: 1; transform: translateY(0); } /* ---- Step connector draw-in (JS-gated) ---- */ .js .step-node { transform: scale(0.8); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .step.is-visible .step-node { transform: scale(1); opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero-anim { animation: none; opacity: 1; transform: none; } .js .reveal, .js .reveal-group > *, .js .chat-row, .js .mini-card, .js .step-node { opacity: 1; transform: none; } }