:root{--motion-ease:cubic-bezier(.22,.72,.19,1)}
html{background:#f7f8f5}

/* The entire page fades out and the next page fades in; no color overlay. */
body.motion-leaving{pointer-events:none;animation:site-page-out .32s cubic-bezier(.4,0,.6,1) both}
body.motion-arriving{animation:site-page-in .55s var(--motion-ease) both}
@keyframes site-page-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(3px)}}
@keyframes site-page-in{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}

/* In-page changes use the same quiet fade, without changing the site's colors. */
.product-results.motion-refresh{animation:site-content-in .38s var(--motion-ease) both}
.product-category-children:not([hidden]),.category-group[open] .category-children,.mobile-menu:not([hidden]){animation:site-content-in .32s var(--motion-ease) both}
.product-dialog[open]{animation:site-dialog-in .32s var(--motion-ease) both}
.product-dialog[open]::backdrop{animation:site-content-in .32s ease both}
@keyframes site-content-in{from{opacity:0}to{opacity:1}}
@keyframes site-dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){body.motion-leaving,body.motion-arriving,.product-results.motion-refresh,.product-category-children:not([hidden]),.category-group[open] .category-children,.mobile-menu:not([hidden]),.product-dialog[open],.product-dialog[open]::backdrop{animation:none!important}body.motion-leaving{pointer-events:auto}}