/* ========================================================= Motion system — reusable scroll / reveal animations Activated only when has .motion-enabled (set by JS). Without JS or with prefers-reduced-motion, content stays visible. ========================================================= */ :root { --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-duration: 0.7s; --motion-duration-fast: 0.55s; --motion-distance: 28px; --motion-distance-sm: 16px; --motion-scale-from: 0.97; } @media (max-width: 768px) { :root { --motion-distance: 16px; --motion-distance-sm: 10px; --motion-duration: 0.55s; --motion-duration-fast: 0.45s; } } /* ---------- Base (hidden only when motion is enabled) ---------- */ html.motion-enabled [data-animate] { opacity: 0; will-change: opacity, transform; transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease); transition-delay: var(--motion-delay, 0ms); } html.motion-enabled [data-animate].is-inview, html.motion-enabled [data-animate].is-hero-shown { opacity: 1; transform: none; will-change: auto; } /* Variants */ html.motion-enabled [data-animate="fade"] { transform: none; } html.motion-enabled [data-animate="fade-up"] { transform: translate3d(0, var(--motion-distance), 0); } html.motion-enabled [data-animate="fade-down"] { transform: translate3d(0, calc(var(--motion-distance) * -0.5), 0); } html.motion-enabled [data-animate="fade-left"] { transform: translate3d(var(--motion-distance), 0, 0); } html.motion-enabled [data-animate="fade-right"] { transform: translate3d(calc(var(--motion-distance) * -1), 0, 0); } html.motion-enabled [data-animate="scale"] { transform: scale(var(--motion-scale-from)); } html.motion-enabled [data-animate="fade-scale"] { transform: translate3d(0, var(--motion-distance-sm), 0) scale(var(--motion-scale-from)); } /* Stagger: container stays visible; children reveal */ html.motion-enabled [data-animate="stagger"] { opacity: 1; transform: none; } html.motion-enabled [data-animate="stagger"] > [data-animate-child], html.motion-enabled [data-animate="stagger"] > * { opacity: 0; transform: translate3d(0, var(--motion-distance-sm), 0); will-change: opacity, transform; transition: opacity var(--motion-duration-fast) var(--motion-ease), transform var(--motion-duration-fast) var(--motion-ease); } html.motion-enabled [data-animate="stagger"].is-inview > [data-animate-child], html.motion-enabled [data-animate="stagger"].is-inview > *, html.motion-enabled [data-animate="stagger"].is-hero-shown > [data-animate-child], html.motion-enabled [data-animate="stagger"].is-hero-shown > * { opacity: 1; transform: none; will-change: auto; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(1), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(1) { transition-delay: 0ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(2), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(2) { transition-delay: 70ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(3), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(3) { transition-delay: 140ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(4), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(4) { transition-delay: 210ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(5), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(5) { transition-delay: 280ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(6), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(6) { transition-delay: 350ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(7), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(7) { transition-delay: 420ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(8), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(8) { transition-delay: 490ms; } html.motion-enabled [data-animate="stagger"].is-inview > *:nth-child(n+9), html.motion-enabled [data-animate="stagger"].is-hero-shown > *:nth-child(n+9) { transition-delay: 560ms; } /* Custom delay via data-delay (ms) */ html.motion-enabled [data-delay="40"] { --motion-delay: 40ms; } html.motion-enabled [data-delay="80"] { --motion-delay: 80ms; } html.motion-enabled [data-delay="120"] { --motion-delay: 120ms; } html.motion-enabled [data-delay="160"] { --motion-delay: 160ms; } html.motion-enabled [data-delay="200"] { --motion-delay: 200ms; } html.motion-enabled [data-delay="240"] { --motion-delay: 240ms; } html.motion-enabled [data-delay="280"] { --motion-delay: 280ms; } html.motion-enabled [data-delay="320"] { --motion-delay: 320ms; } html.motion-enabled [data-delay="360"] { --motion-delay: 360ms; } html.motion-enabled [data-delay="400"] { --motion-delay: 400ms; } /* Soften left/right on small screens to avoid overflow feel */ @media (max-width: 768px) { html.motion-enabled [data-animate="fade-left"], html.motion-enabled [data-animate="fade-right"] { transform: translate3d(0, var(--motion-distance), 0); } } /* ---------- Home-scoped micro-interactions (do not change layout) ---------- */ body.page-home { overflow-x: clip; } body.page-home .hero-btn:hover { transform: translateY(-2px); } body.page-home .hero-btn:active { transform: translateY(0); } body.page-home .primary-hero-btn:hover { box-shadow: 0 10px 24px rgba(17, 184, 167, 0.22); } body.page-home .demo-btn:hover { transform: translateY(-1px); } body.page-home .blog-view-btn:hover { transform: translateY(-1px); } body.page-home .cta-button { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--motion-ease), box-shadow 0.25s ease; } body.page-home .cta-button:hover { transform: translateY(-2px); } body.page-home .get-started-item { transition: transform 0.3s var(--motion-ease); } body.page-home .get-started-item:hover { transform: translateY(-3px); } body.page-home .client-card { transition: transform 0.3s var(--motion-ease), box-shadow 0.3s ease; } body.page-home .client-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(7, 27, 58, 0.08); } /* Accessibility: kill motion */ @media (prefers-reduced-motion: reduce) { html.motion-enabled [data-animate], html.motion-enabled [data-animate="stagger"] > *, html.motion-enabled [data-animate="stagger"] > [data-animate-child] { opacity: 1 !important; transform: none !important; transition: none !important; } body.page-home .hero-btn:hover, body.page-home .demo-btn:hover, body.page-home .blog-view-btn:hover, body.page-home .cta-button:hover, body.page-home .get-started-item:hover, body.page-home .client-card:hover { transform: none; } html { scroll-behavior: auto; } }