/* ========================================================================== HandwerkerOS — animations.css Hero stagger, scroll-reveal, hover effects, motion overrides ========================================================================== */ /* ----------------------------- Scroll-reveal .reveal is visible by default — only when JS arms it (.js-reveal on ) does the hidden state apply. That keeps content available for crawlers and browsers without IntersectionObserver. ----------------------------- */ .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); will-change: opacity, transform; } .js-reveal .reveal.visible { opacity: 1; transform: translateY(0); } .js-reveal .reveal--up { transform: translateY(32px); } .js-reveal .reveal--right { transform: translateX(-24px); } .js-reveal .reveal--left { transform: translateX(24px); } .js-reveal .reveal--scale { transform: scale(0.96); } /* On small screens, fall back to vertical reveal to avoid horizontal overflow. */ @media (max-width: 720px) { .js-reveal .reveal--right, .js-reveal .reveal--left { transform: translateY(20px); } } .js-reveal .reveal--right.visible, .js-reveal .reveal--left.visible, .js-reveal .reveal--scale.visible { transform: none; } /* Stagger delays */ .js-reveal .reveal[data-delay="1"] { transition-delay: 80ms; } .js-reveal .reveal[data-delay="2"] { transition-delay: 160ms; } .js-reveal .reveal[data-delay="3"] { transition-delay: 240ms; } .js-reveal .reveal[data-delay="4"] { transition-delay: 320ms; } .js-reveal .reveal[data-delay="5"] { transition-delay: 400ms; } .js-reveal .reveal[data-delay="6"] { transition-delay: 480ms; } /* ----------------------------- Hero stagger (CSS-only on load) ----------------------------- */ .hero__stagger > * { opacity: 0; transform: translateY(20px); animation: heroIn 800ms var(--ease-out) forwards; } .hero__stagger > *:nth-child(1) { animation-delay: 80ms; } .hero__stagger > *:nth-child(2) { animation-delay: 200ms; } .hero__stagger > *:nth-child(3) { animation-delay: 320ms; } .hero__stagger > *:nth-child(4) { animation-delay: 440ms; } .hero__stagger > *:nth-child(5) { animation-delay: 560ms; } .hero__media { opacity: 0; transform: translateY(20px) scale(0.98); animation: heroMediaIn 1100ms var(--ease-out) 280ms forwards; } @keyframes heroIn { to { opacity: 1; transform: translateY(0); } } @keyframes heroMediaIn { to { opacity: 1; transform: translateY(0) scale(1); } } /* Subtle floating accents inside hero mockup */ .float-accent { animation: floatY 5.5s ease-in-out infinite; will-change: transform; } .float-accent--slow { animation-duration: 8s; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ----------------------------- Mockup live progress bars ----------------------------- */ .bar-fill { width: 0%; animation: barFill 1.4s var(--ease-out) forwards; } .bar-fill--40 { animation-delay: 200ms; --target: 40%; } .bar-fill--65 { animation-delay: 300ms; --target: 65%; } .bar-fill--80 { animation-delay: 400ms; --target: 80%; } .bar-fill--90 { animation-delay: 500ms; --target: 90%; } .bar-fill--32 { animation-delay: 250ms; --target: 32%; } .bar-fill--72 { animation-delay: 350ms; --target: 72%; } @keyframes barFill { to { width: var(--target, 60%); } } /* ----------------------------- Pulse on play button ----------------------------- */ .mock-video__play { animation: pulseGold 2.6s var(--ease-out) infinite; } @keyframes pulseGold { 0%, 100% { box-shadow: 0 0 0 12px rgba(200, 172, 101, 0.18), 0 0 0 28px rgba(200, 172, 101, 0.08); } 50% { box-shadow: 0 0 0 18px rgba(200, 172, 101, 0.12), 0 0 0 38px rgba(200, 172, 101, 0.04); } } /* ----------------------------- Reduced motion ----------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero__stagger > *, .hero__media { opacity: 1 !important; transform: none !important; } .bar-fill { width: var(--target, 60%) !important; animation: none !important; } .float-accent { animation: none !important; } .mock-video__play { animation: none !important; } }