/* ============================================ KEYFRAMES ============================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes counterUp { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* ============================================ LAZY SECTION ANIMATION Only hide sections when JS has loaded (js-ready class on ). This prevents invisible content if JS modules fail to load. ============================================ */ .js-ready .lazy-section { opacity: 0; transform: translateY(36px); transition: opacity 0.75s ease, transform 0.75s ease; } .lazy-section.is-visible, .js-ready .lazy-section.is-visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .lazy-section.is-visible .stagger-item { animation: fadeUp 0.6s ease forwards; } .lazy-section.is-visible .stagger-item:nth-child(1) { animation-delay: 0.05s; } .lazy-section.is-visible .stagger-item:nth-child(2) { animation-delay: 0.15s; } .lazy-section.is-visible .stagger-item:nth-child(3) { animation-delay: 0.25s; } .lazy-section.is-visible .stagger-item:nth-child(4) { animation-delay: 0.35s; } .lazy-section.is-visible .stagger-item:nth-child(5) { animation-delay: 0.45s; } .lazy-section.is-visible .stagger-item:nth-child(6) { animation-delay: 0.55s; } .stagger-item { opacity: 0; } /* ============================================ LAZY IMAGES ============================================ */ img[data-src] { opacity: 0; transition: opacity 0.7s ease; background: var(--bg-card); } img[data-src].loaded { opacity: 1; } /* Skeleton shimmer for images */ .img-skeleton { background: linear-gradient( 90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* ============================================ SCROLL INDICATOR ============================================ */ .scroll-indicator { animation: pulse 2s ease-in-out infinite; } /* ============================================ HERO ENTRANCE ============================================ */ .hero-content { animation: fadeUp 1.2s ease 0.3s both; } .hero-eyebrow { animation: fadeUp 1s ease 0.1s both; } /* ============================================ NAV SLIDE DOWN ============================================ */ .navbar { animation: slideDown 0.6s ease 0s both; }