/* BeSELL motion layer: service readability first, one-time reveals only. */
.hero{overflow:hidden}

body.motion-ready .hero-sp-intro,
body.motion-ready .hero-copy > *{
  opacity:0;
  animation:hero-copy-in .72s cubic-bezier(.22,.61,.36,1) forwards;
}
body.motion-ready .hero-sp-intro{animation-delay:.08s}
body.motion-ready .hero-copy .hero-lead{animation-delay:.12s}
body.motion-ready .hero-copy h1{animation-delay:.22s}
body.motion-ready .hero-copy > p:not(.hero-lead){animation-delay:.32s}
body.motion-ready .hero-actions{animation-delay:.42s}
body.motion-ready .hero-image{animation:hero-image-in 1.15s cubic-bezier(.22,.61,.36,1) both}

.motion-reveal{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:
    opacity .68s cubic-bezier(.22,.61,.36,1) var(--motion-delay,0ms),
    transform .68s cubic-bezier(.22,.61,.36,1) var(--motion-delay,0ms);
  will-change:opacity,transform;
}
.motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0);will-change:auto}

.button > span{transition:transform .25s ease}
.button:hover > span{transform:translateX(4px)}
.product-card,.category-grid figure{transition-property:opacity,transform,box-shadow}
@media(min-width:901px){
  .product-card:hover,.category-grid figure:hover{
    box-shadow:0 12px 26px rgba(63,46,42,.09);
  }
}

.faq details > div{overflow:hidden}

/* Supplied SVG keeps the chevron optically centered on every browser. */
.slider-arrow,.sleeping-arrow{
  width:45px;height:45px;padding:0;border:0;background:transparent url(../images/arrow.svg) center/45px 45px no-repeat;font-size:0;line-height:1
}
.slider-arrow::before,.sleeping-arrow::before{content:none}
.slider-arrow.next,.sleeping-next{transform:rotate(180deg)}

@keyframes hero-copy-in{
  from{opacity:0;transform:translate3d(0,13px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes hero-image-in{
  from{opacity:.72;transform:scale(1.025)}
  to{opacity:1;transform:scale(1)}
}
@media(max-width:900px){
  .motion-reveal{
    transform:translate3d(0,12px,0);
    transition-duration:.6s;
  }
  .motion-reveal.is-visible{transform:translate3d(0,0,0)}
  body.motion-ready .hero-image{animation-duration:1s}
}

@media(prefers-reduced-motion:reduce){
  body.motion-ready .hero-sp-intro,
  body.motion-ready .hero-copy > *,
  body.motion-ready .hero-image{animation:none;opacity:1;transform:none}
  .motion-reveal,.motion-reveal.is-visible{opacity:1;transform:none;transition:none}
  .button > span,.product-card,.category-grid figure{transition:none}
}