/* ============================================================ LendQuest — premium motion layer. Effects are gated by html[data-fx-*] attributes (set on the tag) AND by prefers-reduced-motion, so reduced-motion users, print and PDF export always see the finished, static state. ============================================================ */ :root { --fx-ease: cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: no-preference) { /* ---- Hero entrance ---- */ html[data-fx-hero="1"] body.fx-entrance .hero__grid > div:first-child > * { animation: fxRise .7s var(--fx-ease) both; } html[data-fx-hero="1"] body.fx-entrance .hero__offer { animation-delay: .05s; } html[data-fx-hero="1"] body.fx-entrance h1 { animation-delay: .13s; } html[data-fx-hero="1"] body.fx-entrance .hero__lead { animation-delay: .21s; } html[data-fx-hero="1"] body.fx-entrance .hero__ctas { animation-delay: .29s; } html[data-fx-hero="1"] body.fx-entrance .hero__promise { animation-delay: .37s; } html[data-fx-hero="1"] body.fx-entrance .hero__stats { animation-delay: .45s; } html[data-fx-hero="1"] body.fx-entrance .calc-wrap { animation: fxCardIn .9s var(--fx-ease) .3s both; } @keyframes fxRise { from { transform: translateY(14px); } to { transform: translateY(0); } } @keyframes fxCardIn { from { opacity: 0; transform: translateY(30px) scale(.97); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } /* ---- Gradient shimmer on the accent word ---- */ html[data-fx-shimmer="1"] .hero h1 .accent { background: linear-gradient(100deg, #24a2f0 20%, #42d8d2 40%, #24a2f0 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fxShimmer 1.8s var(--fx-ease) .7s 1 both; } @keyframes fxShimmer { from { background-position: 115% 0; } to { background-position: 0% 0; } } /* ---- Scroll cascade (upgrades the site's .reveal) ---- */ html[data-fx-cascade="1"] .reveal { transform: translateY(26px); transition: opacity .7s var(--fx-ease) var(--fx-d, 0s), transform .7s var(--fx-ease) var(--fx-d, 0s); } html[data-fx-cascade="1"] .reveal.in { transform: none; } /* ---- Parallax watermarks ---- */ html[data-fx-parallax="1"] .calc-mark { transform: rotate(-6deg) translateY(var(--fx-py, 0px)); will-change: transform; } html[data-fx-parallax="1"] .cta-band__mark { transform: translateY(var(--fx-py, 0px)); will-change: transform; } /* ---- Micro-interactions ---- */ html[data-fx-micro="1"] .btn svg { transition: transform .2s var(--fx-ease); } html[data-fx-micro="1"] .btn:hover svg:last-child { transform: translateX(3px); } html[data-fx-micro="1"] .btn--primary { position: relative; overflow: hidden; } html[data-fx-micro="1"] .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .05s; } html[data-fx-micro="1"] .btn--primary:hover::after { left: 125%; transition: left .55s var(--fx-ease); } html[data-fx-micro="1"] .service { position: relative; overflow: hidden; } html[data-fx-micro="1"] .service::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-brand); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--fx-ease); } html[data-fx-micro="1"] .service:hover::after { transform: scaleX(1); } /* ---- Header condense on scroll ---- */ html[data-fx-header="1"] .site-header .nav { transition: height .3s var(--fx-ease); } html[data-fx-header="1"] .site-header .nav__logo img { transition: height .3s var(--fx-ease); } html[data-fx-header="1"] .site-header { transition: box-shadow .3s; } html[data-fx-header="1"] body.fx-scrolled .site-header .nav { height: 60px; } html[data-fx-header="1"] body.fx-scrolled .site-header .nav__logo img { height: 26px; } html[data-fx-header="1"] body.fx-scrolled .site-header { box-shadow: 0 8px 24px rgba(12,18,30,.08); } } /* end prefers-reduced-motion */