/* animations.css — universal slide-in + premium polish layer */ /* --------------------------------------------------------- 1. UNIVERSAL REVEAL SYSTEM - is set BEFORE first paint by an inline script in , so we can hide content via CSS without a flash of unstyled content (FOUC). - JS at runtime tags eligible elements with .reveal + a directional class and then adds .is-visible to fade/slide them in. - If JS fails or is disabled, content remains visible (graceful). --------------------------------------------------------- */ /* Above-the-fold content is ALWAYS visible immediately — no pre-hide, no FOUC risk. Slide-in animations only apply via JS to below-the-fold elements as they enter the viewport. */ /* Slide-ins are TRANSFORM-ONLY by default — content is never hidden. Add .reveal-fade explicitly to opt into opacity fade. This guarantees content is always visible even if JS is slow/broken. */ .reveal { will-change: transform, filter; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1); } .reveal-fade { opacity: 0; } .reveal-up { transform: translate3d(0, 28px, 0); } .reveal-down { transform: translate3d(0, -28px, 0); } .reveal-left { transform: translate3d(-40px, 0, 0); } .reveal-right { transform: translate3d(40px, 0, 0); } .reveal-zoom { transform: scale(.94); } .reveal-blur { transform: translate3d(0, 16px, 0); filter: blur(8px); } .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* Mobile: tighten distance, shorter duration */ @media (max-width: 720px) { .reveal { transition-duration: .55s; } .reveal-up { transform: translate3d(0, 18px, 0); } .reveal-down { transform: translate3d(0, -18px, 0); } .reveal-left { transform: translate3d(-24px, 0, 0); } .reveal-right { transform: translate3d(24px, 0, 0); } .reveal-zoom { transform: scale(.97); } } /* Stagger inside known grids when revealed via observer (the JS doesn't add inline delays for these) */ .grid > .reveal:nth-child(1) { transition-delay: 0ms; } .grid > .reveal:nth-child(2) { transition-delay: 70ms; } .grid > .reveal:nth-child(3) { transition-delay: 140ms; } .grid > .reveal:nth-child(4) { transition-delay: 0ms; } .grid > .reveal:nth-child(5) { transition-delay: 70ms; } .grid > .reveal:nth-child(6) { transition-delay: 140ms; } .grid > .reveal:nth-child(7) { transition-delay: 0ms; } .grid > .reveal:nth-child(8) { transition-delay: 70ms; } .grid > .reveal:nth-child(9) { transition-delay: 140ms; } .steps > .reveal:nth-child(1) { transition-delay: 0ms; } .steps > .reveal:nth-child(2) { transition-delay: 90ms; } .steps > .reveal:nth-child(3) { transition-delay: 180ms; } .steps > .reveal:nth-child(4) { transition-delay: 270ms; } .area-grid > .reveal:nth-child(1) { transition-delay: 0ms; } .area-grid > .reveal:nth-child(2) { transition-delay: 25ms; } .area-grid > .reveal:nth-child(3) { transition-delay: 50ms; } .area-grid > .reveal:nth-child(4) { transition-delay: 75ms; } .area-grid > .reveal:nth-child(5) { transition-delay: 100ms; } .area-grid > .reveal:nth-child(6) { transition-delay: 125ms; } .area-grid > .reveal:nth-child(7) { transition-delay: 150ms; } .area-grid > .reveal:nth-child(8) { transition-delay: 175ms; } .area-grid > .reveal:nth-child(9) { transition-delay: 200ms; } .area-grid > .reveal:nth-child(n+10) { transition-delay: 225ms; } .feature-list > .reveal:nth-child(1) { transition-delay: 0ms; } .feature-list > .reveal:nth-child(2) { transition-delay: 80ms; } .feature-list > .reveal:nth-child(3) { transition-delay: 160ms; } .feature-list > .reveal:nth-child(4) { transition-delay: 240ms; } .trust-strip .row > .reveal:nth-child(1) { transition-delay: 0ms; } .trust-strip .row > .reveal:nth-child(2) { transition-delay: 60ms; } .trust-strip .row > .reveal:nth-child(3) { transition-delay: 120ms; } .trust-strip .row > .reveal:nth-child(4) { transition-delay: 180ms; } .trust-strip .row > .reveal:nth-child(5) { transition-delay: 240ms; } /* --------------------------------------------------------- 2. SERVICE CARD TILT + ICON --------------------------------------------------------- */ .service-card { /* note: tilt happens on hover via JS-set vars; reveal handles entry */ transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s; } .service-card.is-visible:hover { transform: perspective(1000px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0)) translateY(-6px); } .service-card .ico { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; } .service-card:hover .ico { transform: rotate(-6deg) scale(1.08); background: var(--color-accent); color: #fff; } /* --------------------------------------------------------- 3. STICKY HEADER SHRINK --------------------------------------------------------- */ .site-header { transition: box-shadow .3s, background .3s; } .site-header.is-scrolled { background: rgba(255,255,255,.98); box-shadow: 0 2px 16px rgba(15,27,45,.06); } .site-header.is-scrolled .header-bar { padding: 8px 0; } .site-header.is-scrolled .brand-mark, .site-header.is-scrolled .brand-logo { width: 40px; height: 40px; transition: width .25s, height .25s; } /* --------------------------------------------------------- 4. AMBIENT BACKGROUND ANIMATIONS --------------------------------------------------------- */ @keyframes shimmer { 0% { transform: translate3d(0,0,0); opacity: .85; } 50% { transform: translate3d(8px,-8px,0); opacity: 1; } 100% { transform: translate3d(0,0,0); opacity: .85; } } .hero::before { animation: shimmer 9s ease-in-out infinite; } .page-header::before { animation: shimmer 12s ease-in-out infinite; } @keyframes calcPulse { 0%, 100% { box-shadow: 0 18px 40px rgba(26,111,184,.28); } 50% { box-shadow: 0 22px 56px rgba(26,111,184,.42); } } .calc-card { animation: calcPulse 4.5s ease-in-out infinite; } @keyframes kenBurns { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.06); } } .lisa-portrait img { animation: kenBurns 18s ease-in-out infinite; } /* --------------------------------------------------------- 5. BUTTON SHINE --------------------------------------------------------- */ .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-110%); transition: transform .55s cubic-bezier(.2,.7,.2,1); } .btn:hover::after { transform: translateX(110%); } /* --------------------------------------------------------- 6. MICRO-INTERACTIONS --------------------------------------------------------- */ .trust-item .ico { transition: transform .3s; } .trust-item:hover .ico { transform: rotate(-8deg) scale(1.1); } .area-pill { position: relative; overflow: hidden; } .area-pill::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--color-accent); transition: width .3s; } .area-pill:hover::after { width: 100%; } details.faq[open] summary { color: var(--color-accent); } details.faq .faq-body { animation: faqIn .35s cubic-bezier(.2,.7,.2,1); } @keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------- 7. REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-up, .reveal-down, .reveal-left, .reveal-right, .reveal-zoom, .reveal-blur { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }