/* ============================================ Scroll Animations & Transitions ============================================ */ /* IMPORTANT (accessibility / robustness): All "hidden until scrolled into view" states are gated behind `html.js`. The `js` class is added by an inline script in the before paint. If JavaScript is disabled, fails, or the IntersectionObserver misfires (a known iOS Safari quirk), the content is shown in its final state and is NEVER invisible. This is what guarantees blog post text always renders. */ /* Fade in from below */ html.js .animate-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .animate-in.visible { opacity: 1; transform: translateY(0); } /* Fade in from left */ html.js .animate-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .animate-left.visible { opacity: 1; transform: translateX(0); } /* Fade in from right */ html.js .animate-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .animate-right.visible { opacity: 1; transform: translateX(0); } /* Scale in */ html.js .animate-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .animate-scale.visible { opacity: 1; transform: scale(1); } /* Stagger children */ html.js .stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } html.js .stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); } html.js .stagger-children.visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); } html.js .stagger-children.visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); } html.js .stagger-children.visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); } html.js .stagger-children.visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); } html.js .stagger-children.visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); } html.js .stagger-children.visible > *:nth-child(n+7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); } /* Hero text animation (CSS keyframe based, always resolves to visible) */ .hero-text-reveal { opacity: 0; transform: translateY(20px); animation: heroReveal 0.8s ease forwards; } .hero-text-reveal:nth-child(2) { animation-delay: 0.15s; } .hero-text-reveal:nth-child(3) { animation-delay: 0.3s; } .hero-text-reveal:nth-child(4) { animation-delay: 0.45s; } .hero-text-reveal:nth-child(5) { animation-delay: 0.6s; } .hero-text-reveal:nth-child(6) { animation-delay: 0.75s; } @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } } /* Underline grow effect for headings */ .underline-grow { position: relative; display: inline-block; } .underline-grow::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 60px; height: 3px; background: var(--color-primary); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } html.js .underline-grow.visible::after, html:not(.js) .underline-grow::after { transform: scaleX(1); } /* Counter animation */ .count-up { display: inline-block; } /* Parallax helper */ .parallax-slow { will-change: transform; } /* Smooth image loading */ .lazy-image { opacity: 0; transition: opacity 0.4s ease; } .lazy-image.loaded { opacity: 1; } /* Disable horizontal animations on mobile to prevent overflow */ @media (max-width: 768px) { html.js .animate-left, html.js .animate-right { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .animate-left.visible, html.js .animate-right.visible { opacity: 1; transform: translateY(0); } } /* Prefers reduced motion: everything visible, no movement */ @media (prefers-reduced-motion: reduce) { html.js .animate-in, html.js .animate-left, html.js .animate-right, html.js .animate-scale, .hero-text-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } html.js .stagger-children > * { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__shape { animation: none; } .hero__badge::before { animation: none; } }