/* One motion language across repair pages, forms and Store. */
:root{
 --sx-motion-quick:150ms;--sx-motion-fast:250ms;--sx-motion-panel:400ms;
 --sx-motion-panel-close:350ms;--sx-motion-stagger:40ms;
 --sx-motion-ease:cubic-bezier(.22,1,.36,1);
}
/* Content remains visible before JavaScript, after errors, and without animation. */
.fade-up,.hero-reveal{opacity:1;transform:none;visibility:visible}
.mobile-drawer{transition:none!important;transform:none!important}
.fab-items,.fab-items.open{transition:none;transform:none;opacity:1}
.faq-answer{transition:none!important}
.filter-fields{transform-origin:top left}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.btn,.button,.nav-cta,.cart-open,.submit-btn,.form-submit-btn,.btn-next,.btn-back,
.location-btn,.issue-tag,.store-categories button,.store-quick-filters button,
.sidebar-link,.product-thumbnails button{
 transition:transform var(--sx-motion-quick) var(--sx-motion-ease),background-color var(--sx-motion-quick) ease,color var(--sx-motion-quick) ease,border-color var(--sx-motion-quick) ease!important;
}
.nav-links a,.store-nav-links a,.footer-col a,.store-bottom-nav a,.store-bottom-nav button{
 transition:color var(--sx-motion-quick) ease,background-color var(--sx-motion-quick) ease!important;
}
input,select,textarea{transition:border-color var(--sx-motion-quick) ease,background-color var(--sx-motion-quick) ease!important}
.product-card,.svc-card,.service-row,.service-featured,.trust-card,.area-card,.contact-card,.tl-card{
 transition:transform var(--sx-motion-fast) var(--sx-motion-ease),border-color var(--sx-motion-fast) ease!important;
}
.product-visual img,.product-thumbnails img{transition:transform var(--sx-motion-fast) var(--sx-motion-ease)}
.faq-chevron,.fab-plus{transition:transform var(--sx-motion-fast) var(--sx-motion-ease)!important}
nav.site-nav,nav.store-nav{transition:background-color var(--sx-motion-fast) ease,border-color var(--sx-motion-fast) ease!important}
/* Keep feedback small; scrolling and reading do not trigger continuous motion. */
@media(hover:hover) and (pointer:fine){
 .btn:hover,.button:hover,.nav-cta:hover,.cart-open:hover,.btn-next:hover{transform:translateY(-1px)}
 .product-card:hover,.svc-card:hover,.service-row:hover,.service-featured:hover,.trust-card:hover,.area-card:hover,.contact-card:hover,.tl-card:hover{transform:translateY(-2px)}
 .product-visual:hover img{transform:scale(1.025)}
}
.btn:active,.button:active,.cart-open:active,.btn-next:active,.btn-back:active,
.store-categories button:active,.store-quick-filters button:active{transform:scale(.985)!important}
/* Replace old attention loops with quiet, state-driven feedback. */
.hero-pill-dot,.hero-img-caption .dot,.page-badge .dot,.error-404 .zero::before{animation:none!important}
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:sx-page-out var(--sx-motion-quick) ease both}
 ::view-transition-new(root){animation:sx-page-in var(--sx-motion-fast) var(--sx-motion-ease) both}
}
@keyframes sx-page-in{from{opacity:.6}to{opacity:1}}
@keyframes sx-page-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .btn,.button,.nav-cta,.cart-open,.btn-next,.btn-back,.product-card,.svc-card,
 .service-row,.service-featured,.trust-card,.area-card,.contact-card,.tl-card,
 .product-visual img,.store-categories button,.store-quick-filters button{transform:none!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}