/* ============================================================================ * Yuntuo — Homepage light motion (Phase E0, task #227) * ---------------------------------------------------------------------------- * Design rules (per scope): * - Hero background slow zoom 1 → 1.025 (very slow, never-ending, subtle). * - Hero text first fade-up; supporting copy + CTA with a slight delay. * - Below-fold sections reveal on scroll (IntersectionObserver in motion.js). * - Full prefers-reduced-motion support: everything resolves to the static, * fully-visible state — no transforms, no opacity animations. * - No third-party animation library. Only transform/opacity transitions so * LCP / CLS / INP are unaffected (no layout shift, GPU-composited only). * * The `.reveal-ready` class is toggled on by an inline head script * BEFORE first paint, but ONLY when motion is allowed. So: * - No JS / reduced motion → no hidden state, everything visible. * - JS + motion allowed → pre-paint hidden state, then revealed by JS. * ========================================================================== */ /* ── Hero background slow zoom ──────────────────────────────────────────── */ .reveal-ready .hero__bg { animation: yt-hero-zoom 26s ease-in-out infinite alternate; will-change: transform; transform: scale(1); } @keyframes yt-hero-zoom { from { transform: scale(1); } to { transform: scale(1.025); } } /* ── Hero text first fade-up (kept short to protect LCP) ────────────────── */ .reveal-ready .hero__text { animation: yt-fade-up 0.7s ease both; } .reveal-ready .hero__services { animation: yt-fade-up 0.7s ease 0.12s both; } .reveal-ready .hero__btns { animation: yt-fade-up 0.7s ease 0.24s both; } /* CTA slight delay */ @keyframes yt-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ── Below-fold section reveal ──────────────────────────────────────────── */ .reveal-ready section:not(.hero) { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } .reveal-ready section:not(.hero).is-revealed { opacity: 1; transform: none; } /* ── Reduced motion: resolve to the fully-static, visible state ─────────── */ @media (prefers-reduced-motion: reduce) { .reveal-ready .hero__bg, .reveal-ready .hero__text, .reveal-ready .hero__services, .reveal-ready .hero__btns { animation: none !important; transform: none !important; opacity: 1 !important; } .reveal-ready section:not(.hero) { opacity: 1 !important; transform: none !important; transition: none !important; } }