/* Air Works — motion layer (transitions.dev patterns + transitions-polish tokens). Additive only: every rule is gated on html.motion-ok, which the inline snippet sets only when JS runs and prefers-reduced-motion is not "reduce". Without that class this file changes nothing, so content is always visible to crawlers, no-JS visitors, and reduced-motion visitors. */ :root { /* Motion tokens (transitions-polish _root.css) */ --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms; --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --distance-micro: 4px; --distance-medium: 12px; --scale-medium: 0.97; --blur-small: 2px; --blur-medium: 3px; /* Texts reveal (18) */ --stagger-dur: var(--duration-very-slow); --stagger-distance: var(--distance-medium); --stagger-blur: var(--blur-medium); --stagger-ease: var(--ease-smooth-out); /* Learn more hover (24) */ --learn-shift: 2px; --learn-dur: var(--duration-medium); --learn-ease: var(--ease-smooth-out); /* Error state shake (12) */ --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: var(--ease-smooth-out); /* Panel reveal (07) */ --panel-open-dur: var(--duration-slow); --panel-blur: var(--blur-small); --panel-ease: var(--ease-smooth-out); } /* ---------- Scroll + load reveals (Texts reveal, 18) ---------- data-m / .m-in are set at runtime by motion.js and removed again once the reveal finishes, so each element's own styles (hover lifts etc.) take back over untouched. */ .motion-ok [data-m] { opacity: 0; transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease); } .motion-ok [data-m="text"], .motion-ok [data-m="rise"] { transform: translateY(var(--stagger-distance)); } .motion-ok [data-m="text"] { filter: blur(var(--stagger-blur)); } .motion-ok [data-m].m-in { opacity: 1; } .motion-ok [data-m="text"].m-in, .motion-ok [data-m="rise"].m-in { transform: none; } .motion-ok [data-m="text"].m-in { filter: none; } /* Elements the visitor skipped past (anchor jump / fast scroll) appear instantly. */ .motion-ok [data-m].m-instant { transition: none !important; } /* Hero / page-header entrance: hidden from first paint until motion.js takes over (html.m-ready), so there is no visible-then-hidden flash. */ .motion-ok:not(.m-ready) :is( .hero-content > *, .hero .quote-card, .legal-page-header .container > *, .hero-reviews-light .section-head > *, .hero-reviews-light .testimonial-grid > *, .hero-reviews-light .reviews-cta ) { opacity: 0; transform: translateY(var(--stagger-distance)); } /* ---------- Service card arrow (Learn more hover, 24) ---------- */ .motion-ok .service-card .badge-arrow { transition: transform var(--learn-dur) var(--learn-ease); } /* Hover-in quick and direct (<=250ms); the 350ms return above is the softer hover-out. */ .motion-ok .service-card:hover .badge-arrow { transform: translateX(var(--learn-shift)); transition-duration: var(--duration-fast); } /* ---------- FAQ answers (Accordion feel, 21) ---------- */ .motion-ok .faq-item[open] .faq-answer { animation: m-faq-in var(--duration-fast) var(--ease-smooth-out); } @keyframes m-faq-in { from { opacity: 0; transform: translateY(var(--distance-micro)); } } /* Smooth height where supported (Chromium); others keep the fade above. */ @supports (interpolate-size: allow-keywords) { .motion-ok .faq-item { interpolate-size: allow-keywords; } .motion-ok .faq-item::details-content { height: 0; overflow: clip; transition: height var(--duration-fast) var(--ease-smooth-out), content-visibility var(--duration-fast) allow-discrete; } .motion-ok .faq-item[open]::details-content { height: auto; } } /* ---------- Mobile menu (Panel reveal, 07 — open only; close stays instant) ---------- */ .motion-ok .mobile-nav.is-open .mobile-nav-panel { animation: m-panel-in var(--panel-open-dur) var(--panel-ease); } .motion-ok .mobile-nav.is-open .mobile-nav-backdrop { animation: m-fade-in var(--duration-fast) var(--ease-smooth-out); } @keyframes m-panel-in { from { transform: translateX(100%); filter: blur(var(--panel-blur)); } } @keyframes m-fade-in { from { opacity: 0; } } /* ---------- Form feedback ---------- */ /* Success message: single-line texts reveal. */ .motion-ok :is(#qc-success, #form-success).show { animation: m-rise-in var(--duration-very-slow) var(--ease-smooth-out); } @keyframes m-rise-in { from { opacity: 0; transform: translateY(var(--distance-medium)); } } /* Invalid field on submit (Error state shake, 12). 80+60+80+60 = 280ms. */ .motion-ok .m-shake { animation: m-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; } @keyframes m-shake { 0% { transform: translateX(0); animation-timing-function: var(--shake-ease); } 28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); } 57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); } 78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); } 100% { transform: translateX(0); } } /* ---------- Approved polish overrides of existing motion ---------- */ /* 1. Desktop nav dropdown (Menu dropdown, 05): 250ms open / 150ms close, 0.97 pre-scale. */ @media (min-width: 1180px) { .motion-ok .nav-dropdown { transform-origin: top left; transform: translateY(6px) scale(var(--scale-medium)); transition: opacity var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out), visibility 0s linear var(--duration-quick); } .motion-ok .has-dropdown:is(:hover, :focus-within) .nav-dropdown { transform: translateY(0) scale(1); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), visibility 0s linear 0s; } } /* 2. "6-Step Process" accordion: symmetric 250ms smooth-out. */ .motion-ok .how-step-body { transition: max-height var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out), margin-top var(--duration-fast) var(--ease-smooth-out); } /* 3. Button + card hover lift: same lift and durations, smooth-out easing. */ .motion-ok :is(.btn, .service-card) { transition-timing-function: var(--ease-smooth-out); } /* 4. Gallery image hover zoom: smooth-out easing. */ .motion-ok .gallery-item img { transition-timing-function: var(--ease-smooth-out); } /* 5. Footer social icon lift + 6. area chip hover: same durations, smooth-out easing. */ .motion-ok :is(.footer-social .footer-social-icon, .area-chip) { transition-timing-function: var(--ease-smooth-out); } /* 7. FAQ chevron flip: matches the 250ms symmetric accordion height motion. */ .motion-ok .faq-item summary .faq-icon { transition-duration: var(--duration-fast); transition-timing-function: var(--ease-smooth-out); } /* Required reduced-motion guard (motion-ok is never set in this case, but keep the guard in case the preference changes mid-session). */ @media (prefers-reduced-motion: reduce) { .motion-ok [data-m], .motion-ok :is(.hero-content > *, .hero .quote-card, .legal-page-header .container > *, .hero-reviews-light .section-head > *, .hero-reviews-light .testimonial-grid > *, .hero-reviews-light .reviews-cta) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; } .motion-ok .faq-item::details-content { transition: none !important; } .motion-ok .m-shake, .motion-ok .faq-answer, .motion-ok .mobile-nav-panel, .motion-ok .mobile-nav-backdrop { animation: none !important; } }