/* ========================================================================== Dynamic Express Consultants — Animation Layer Scroll reveals (IntersectionObserver driven) + keyframes. GSAP enhances these when available; CSS is the reliable baseline. ========================================================================== */ /* ---------- Reveal primitives ---------- The hidden starting state is scoped to .js, which a tiny inline script in adds. If scripting is unavailable, or a script fails to load, nothing is ever hidden and every section renders immediately. A failsafe timer in the same inline script drops .js if the animation layer never boots. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; } .js [data-reveal='left'] { transform: translate3d(-36px, 0, 0); } .js [data-reveal='right'] { transform: translate3d(36px, 0, 0); } .js [data-reveal='scale'] { transform: scale(.94); } .js [data-reveal='fade'] { transform: none; } .js [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* Stagger children */ .js [data-stagger] > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .js [data-stagger].is-in > * { opacity: 1; transform: none; } .js [data-stagger].is-in > *:nth-child(1) { transition-delay: .02s; } .js [data-stagger].is-in > *:nth-child(2) { transition-delay: .08s; } .js [data-stagger].is-in > *:nth-child(3) { transition-delay: .14s; } .js [data-stagger].is-in > *:nth-child(4) { transition-delay: .2s; } .js [data-stagger].is-in > *:nth-child(5) { transition-delay: .26s; } .js [data-stagger].is-in > *:nth-child(6) { transition-delay: .32s; } .js [data-stagger].is-in > *:nth-child(7) { transition-delay: .38s; } .js [data-stagger].is-in > *:nth-child(8) { transition-delay: .44s; } .js [data-stagger].is-in > *:nth-child(n+9) { transition-delay: .5s; } /* Image reveal (clip wipe) */ .reveal-img { position: relative; overflow: hidden; } .js .reveal-img::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform-origin: right; transform: scaleX(1); transition: transform 1s var(--ease-out); z-index: 2; } .reveal-img.is-in::after { transform: scaleX(0); } .reveal-img img { transform: scale(1.14); transition: transform 1.5s var(--ease-out); } .reveal-img.is-in img { transform: scale(1); } /* Hero entrance (runs on load, no observer needed) */ .hero__enter > * { opacity: 0; transform: translate3d(0, 22px, 0); animation: heroUp .95s var(--ease-out) forwards; } .hero__enter > *:nth-child(1) { animation-delay: .05s; } .hero__enter > *:nth-child(2) { animation-delay: .16s; } .hero__enter > *:nth-child(3) { animation-delay: .26s; } .hero__enter > *:nth-child(4) { animation-delay: .36s; } .hero__enter > *:nth-child(5) { animation-delay: .46s; } .hero__enter > *:nth-child(6) { animation-delay: .56s; } .hero__visual { animation: heroFloatIn 1.15s .3s var(--ease-out) both; } .hero__float { animation: floaty 6s ease-in-out 1.6s infinite; } /* Parallax targets get transforms from JS */ [data-parallax] { will-change: transform; } /* ---------- Keyframes ---------- */ @keyframes heroUp { to { opacity: 1; transform: none; } } @keyframes heroFloatIn { from { opacity: 0; transform: translate3d(28px, 26px, 0) scale(.96); } to { opacity: 1; transform: none; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } @keyframes ripple { to { transform: scale(2.6); opacity: 0; } } @keyframes railDrop { 0% { top: -50%; } 100% { top: 100%; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,.5); } 70% { box-shadow: 0 0 0 20px rgba(255,90,31,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); } } @keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } } /* Skeleton shimmer used before media loads */ .is-loading { background: linear-gradient(90deg, var(--gray-100) 8%, var(--gray-200) 18%, var(--gray-100) 33%); background-size: 840px 100%; animation: shimmer 1.5s linear infinite; } /* Counter roll */ .stat__num { transition: color .4s var(--ease); } .stat.is-in .stat__num { color: #fff; } /* Nav link underline already handled in style.css — drawer entrance here */ .drawer.is-open .drawer__link { animation: fadeUp .45s var(--ease-out) both; } .drawer.is-open .drawer__link:nth-child(1) { animation-delay: .04s; } .drawer.is-open .drawer__link:nth-child(2) { animation-delay: .08s; } .drawer.is-open .drawer__link:nth-child(3) { animation-delay: .12s; } .drawer.is-open .drawer__link:nth-child(4) { animation-delay: .16s; } .drawer.is-open .drawer__link:nth-child(5) { animation-delay: .2s; } .drawer.is-open .drawer__link:nth-child(6) { animation-delay: .24s; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; } .hero__enter > * { opacity: 1; transform: none; } .reveal-img::after { display: none; } .reveal-img img { transform: none; } #particles { display: none; } } /* ---------- Premium UI layer keyframes ---------- */ @keyframes auroraDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-60px, 40px, 0) scale(1.12); } 100% { transform: translate3d(40px, -30px, 0) scale(.95); } } @keyframes pingRing { 0% { transform: scale(.7); opacity: .9; } 80% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* animated gradient on the hero accent line */ .js .hero .line--accent { background-size: 200% auto; animation: gradientShift 9s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .js .hero .line--accent, .hero__rating, .hero__badge-dot::after { animation: none !important; } }