/* Motion on the homepage and the louvre page (permanent since 16 Oct 2026; it was the "motion demo" on branch
   claude/motion-demo, switched on by a local-only head script). Linked in <body> after the hero, so it never blocks first
   paint. Selectors start with :root so they keep the weight the old html.aa-mo scope gave them.
   Rules: animate transform/opacity/scale/translate only; nothing above the fold waits; reduced motion switches it all off;
   never animate an ancestor of a glass (backdrop-filter) element. The page-to-page cross-fade, the header that stays put
   during it and the touch-screen rule for the headline sweep are in each page's <style id="aa-vt"> in <head>, because the
   next page needs them at first render. */

:root{--aa-d1:.15s;--aa-d2:.3s}  /* --aa-e (the easing) comes from aa-glass.css */

@media (prefers-reduced-motion:no-preference){

/* ---- Buttons: press in when tapped, arrow nudges forward (the deeper blue hover is permanent now, 14 Oct) ---- */
:root :is(.btn,.rx-cta,.aa-pbar-btn,.grv-cta,.rx-closing-btn){transition:transform .3s var(--aa-e),scale var(--aa-d1) var(--aa-e),background-color .18s ease,border-color .18s ease,color .18s ease!important}
:root .aa-mab-link{transition:background .15s,scale var(--aa-d1) var(--aa-e)}
:root #cover-chooser .aac-opt{transition:background .18s ease,border-color .18s ease,transform .18s ease,scale var(--aa-d1) var(--aa-e)}
:root .dark-banner .btn-primary:hover{background-color:#ececf0;border-color:#ececf0}
:root :is(.btn,.rx-cta,.aa-pbar-btn,.grv-cta,.rx-closing-btn,.aac-opt,.aa-mab-link):active{scale:.97}
:root :is(.btn-primary,.grv-cta,.rx-closing-btn)::after{transition:translate var(--aa-d2) var(--aa-e)}
@media (hover:hover) and (pointer:fine){
  :root :is(.btn-primary,.grv-cta,.rx-closing-btn):hover::after{translate:3px 0}
}

/* ---- Things that appear on tap: FAQ answers drop in under the question; each chooser step rises in like the quote steps ---- */
:root .faq-item[open] .faq-a{animation:aa-rise .4s var(--aa-e)}
@keyframes aa-rise{from{opacity:0;translate:0 -6px}}
:root #cover-chooser .aac-stage>:not(.aac-top){animation:aa-step var(--aa-d2) var(--aa-e)}
@keyframes aa-step{from{opacity:0;translate:0 6px}}

/* ---- Entrances: card photos settle as their card fades up (glass cards on the homepage and the louvre page, faded by aa-motion.js) ---- */
:root .aa-pre :is(.product-card-img,.install-card picture) img{scale:1.06}
:root .aa-pre.aa-in :is(.product-card-img,.install-card picture) img{scale:1;transition:scale 1.3s var(--aa-e),transform .8s ease}

/* ---- Linked to scrolling, no JavaScript (Chrome, Edge, newer Safari; others keep the old behaviour) ---- */
@supports (animation-timeline:view()){
  /* Dark banner photo drifts a little slower than the page. overflow:clip (not hidden) so the photo can see the page scroll */
  :root .dark-banner{overflow:clip}
  :root .dark-banner>picture img{animation:aa-depth linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes aa-depth{from{transform:translate3d(0,-5%,0) scale(1.12)}to{transform:translate3d(0,5%,0) scale(1.12)}}
}

/* ---- A still gradient: soft blue light behind the quote form (painted once, never animated) ---- */
:root .quote{position:relative;isolation:isolate}
:root .quote::before{content:"";position:absolute;inset:-48px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 70% 45%,#3e6ae11f 0%,#3e6ae118 25%,#3e6ae10f 45%,#3e6ae108 62%,#3e6ae103 80%,#3e6ae100 100%)}
}