/* ROOPIX motion layer — loaded after each page's own CSS.
   Content is only hidden when <html> has .motion-on (set in <head>, never set for
   reduced-motion users) and, below the fold, .mx-ready (set by motion.js). If JS or
   motion.js fails, everything stays visible. */
@media (prefers-reduced-motion:no-preference){
:root{--mx-rise:28px;--mx-dur:1.2s}
.pg-beauty{--mx-rise:32px;--mx-dur:1.1s}   /* softer, quicker */
.pg-exports{--mx-rise:18px;--mx-dur:1.5s}  /* slower, more measured */

@keyframes mxRise{from{opacity:0;translate:0 var(--mx-rise)}to{opacity:1;translate:0 0}}
@keyframes mxCurtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes mxSettle{from{scale:1.26}to{scale:1.1}}
@keyframes mxCard{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* 1. Opening sequence: copy rises in order, hero imagery opens like a curtain */
:is(.gw-intro,.b-hero-copy,.x-hero-grid>div:first-child)>:nth-child(2){--i:1}
:is(.gw-intro,.b-hero-copy,.x-hero-grid>div:first-child)>:nth-child(3){--i:2}
:is(.gw-intro,.b-hero-copy,.x-hero-grid>div:first-child)>:nth-child(4){--i:3}
:is(.gw-intro,.b-hero-copy,.x-hero-grid>div:first-child)>:nth-child(n+5){--i:4}
.motion-on :is(.gw-intro,.b-hero-copy,.x-hero-grid>div:first-child)>*{animation:mxRise var(--mx-dur) var(--ease) both;animation-delay:calc(var(--i,0)*110ms + 120ms)}
.motion-on :is(.division-card,.b-hero-media,.x-hero-media){animation:mxCurtain 1.5s var(--ease) .25s both}
.motion-on .division-exports{animation-delay:.45s}
.motion-on :is(.division-card,.b-hero-media,.x-hero-media,.founder-portrait,.about-media) img{scale:1.1}
.motion-on :is(.division-card,.b-hero-media,.x-hero-media) img{animation:mxSettle 2.4s var(--ease) .25s backwards}
.motion-on .division-exports img{animation-delay:.45s}
.b-hero-media,.about-media{overflow:hidden}

/* 2. Scroll states (only after motion.js has run) */
.mx-ready .reveal{transform:translateY(var(--mx-rise));transition:opacity var(--mx-dur) var(--ease) var(--rd,0ms),transform var(--mx-dur) var(--ease) var(--rd,0ms),translate .5s var(--ease),border-color .35s,background-color .35s}
.mx-ready .mx-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.mx-ready .mx-clip.is-in{clip-path:inset(0)}
.js.mx-ready .mx-clip.reveal{opacity:1;transform:none}   /* clip replaces the fade-rise */
.mx-ready .mx-par img{translate:0 var(--py,0px);will-change:translate}
.mx-ready .product-card:not(.is-in){opacity:0}
.product-card.is-in{animation:mxCard .8s var(--ease) both}  /* replays when a filter re-shows a card */

/* 3. Hover and focus — pointer devices only */
.why-card,.ask-card,.cat-tile,.category-card,.contact-card,.brand-card{transition:translate .5s var(--ease),border-color .35s}
.product-media img{transition:scale 1.1s var(--ease)}
.division-card img{transition:transform 1.2s var(--ease),opacity .6s}
@media (hover:hover){
  .why-card:hover,.ask-card:hover,.cat-tile:hover,.category-card:hover,.contact-card:hover,.brand-card:hover{translate:0 -4px}
  .product-card:hover .product-media img{scale:1.06}
}
@media (hover:hover) and (min-width:901px){
  .divisions:hover .division-card:not(:hover) img{opacity:.7}
}
}
.division-card:focus-visible,.product-card:focus-within{outline:2px solid var(--focus);outline-offset:-6px}