/* ============================================================ COD-YQ Technologies — Animations Keyframes, scroll-triggered fade-ups, hover transitions, page-load sequence. No 3D, no parallax, no cursor effects. ============================================================ */ /* ══════════════════════════════════════════════════════════ KEYFRAMES ══════════════════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes letterDropIn { 0% { transform: translateY(-22px); opacity: 0; } 55% { transform: translateY(5px); opacity: 1; } 78% { transform: translateY(-3px); } 100% { transform: translateY(0); opacity: 1; } } @keyframes logoBounce { 0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(-18px); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } /* ══════════════════════════════════════════════════════════ PAGE LOAD ANIMATIONS — Hero sequence (pure CSS, no JS) animation-fill-mode: both ensures from-state applies during delay, and to-state persists after animation ends. ══════════════════════════════════════════════════════════ */ .anim-navbar { animation: fadeIn 0.4s ease both; } .anim-eyebrow { animation: fadeUp 0.5s ease both; animation-delay: 0.10s; } .anim-hero-h1 { animation: fadeUp 0.5s ease both; animation-delay: 0.20s; } .anim-hero-body { animation: fadeUp 0.5s ease both; animation-delay: 0.30s; } .anim-hero-cta { animation: fadeUp 0.5s ease both; animation-delay: 0.40s; } .anim-hero-img { animation: fadeIn 0.7s ease both; animation-delay: 0.30s; } /* ══════════════════════════════════════════════════════════ SCROLL-TRIGGERED ANIMATIONS — progressive enhancement .js class is added to by animations.js the instant the script runs. Without JS, all content is fully visible. With JS, elements start hidden and animate in on scroll. ══════════════════════════════════════════════════════════ */ /* Hidden state — only applied when JS is confirmed running */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } /* Revealed state — JS adds this class via IntersectionObserver */ .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Staggered children */ .js .reveal-children > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: var(--delay, 0s); } .js .reveal-children.is-visible > * { opacity: 1; transform: translateY(0); } /* Auto-assign stagger delays for up to 8 children */ .js .reveal-children > *:nth-child(1) { --delay: 0.00s; } .js .reveal-children > *:nth-child(2) { --delay: 0.08s; } .js .reveal-children > *:nth-child(3) { --delay: 0.16s; } .js .reveal-children > *:nth-child(4) { --delay: 0.24s; } .js .reveal-children > *:nth-child(5) { --delay: 0.32s; } .js .reveal-children > *:nth-child(6) { --delay: 0.40s; } .js .reveal-children > *:nth-child(7) { --delay: 0.48s; } .js .reveal-children > *:nth-child(8) { --delay: 0.56s; } /* ══════════════════════════════════════════════════════════ FLOAT — hero image gentle bob ══════════════════════════════════════════════════════════ */ .anim-float { animation: float 4s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ WORK CARD — filter transition states ══════════════════════════════════════════════════════════ */ .work-card.hidden { display: none; } .work-card.fade-in { animation: fadeUp 0.35s ease forwards; } /* ══════════════════════════════════════════════════════════ NAV OVERLAY — mobile link stagger ══════════════════════════════════════════════════════════ */ .nav-overlay__link.visible { animation: fadeUp 0.4s ease forwards; } .nav-overlay__link:nth-child(1) { animation-delay: 0.05s; } .nav-overlay__link:nth-child(2) { animation-delay: 0.10s; } .nav-overlay__link:nth-child(3) { animation-delay: 0.15s; } .nav-overlay__link:nth-child(4) { animation-delay: 0.20s; } .nav-overlay__link:nth-child(5) { animation-delay: 0.25s; } .nav-overlay__link:nth-child(6) { animation-delay: 0.30s; } /* ══════════════════════════════════════════════════════════ REDUCED MOTION — respect user preference All animations become instant. Content stays fully visible. ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Ensure hero elements are immediately visible */ .anim-navbar, .anim-eyebrow, .anim-hero-h1, .anim-hero-body, .anim-hero-cta, .anim-hero-img { opacity: 1 !important; transform: none !important; animation: none !important; } /* Ensure scroll-animated elements are always visible */ .js .reveal, .js .reveal-children > * { opacity: 1 !important; transform: none !important; } }