:root{
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-ease-soft:cubic-bezier(.2,.72,.2,1);
  --motion-duration:680ms;
}

html.motion-ready .motion-reveal{
  opacity:0;
  transform:translate3d(0,var(--motion-distance,22px),0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease),
    box-shadow 420ms var(--motion-ease),
    background-color 320ms ease;
  transition-delay:var(--motion-delay,0ms);
}

html.motion-ready .motion-reveal.motion-from-left{
  --motion-distance:0px;
  transform:translate3d(-24px,0,0);
}

html.motion-ready .motion-reveal.motion-from-right{
  --motion-distance:0px;
  transform:translate3d(24px,0,0);
}

html.motion-ready .motion-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

html.motion-ready .motion-media-reveal{
  opacity:.72;
  clip-path:inset(0 0 13% 0 round 7px);
  transform:translate3d(0,18px,0);
  transition:
    opacity 820ms var(--motion-ease-soft),
    clip-path 920ms var(--motion-ease-soft),
    transform 820ms var(--motion-ease-soft);
  transition-delay:var(--motion-delay,0ms);
}

html.motion-ready .motion-media-reveal.is-visible{
  opacity:1;
  clip-path:inset(0 0 0 0 round 7px);
  transform:translate3d(0,0,0);
}

.motion-surface-card{
  transform-origin:center bottom;
}

.motion-surface-card .editorial-card-copy>*:not(:first-child),
.motion-surface-card .space-card-copy>*,
.motion-surface-card .discover-card-copy>*,
.motion-surface-card .resource-copy>*{
  transition:transform 420ms var(--motion-ease),opacity 320ms ease;
}

.inspiration-main .pairing-visual img{
  transform:scale(1.018);
  transition:transform 780ms var(--motion-ease),filter 480ms ease;
}

.inspiration-main .pairing-copy small,
.inspiration-main .pairing-copy h3,
.inspiration-main .pairing-copy p,
.inspiration-main .pairing-copy .pairing-more{
  transition:transform 440ms var(--motion-ease),color 300ms ease;
}

.motion-link-arrow i,
.motion-link-arrow span:last-child{
  display:inline-block;
  transition:transform 300ms var(--motion-ease);
}

.pairing-ratio .ratio-segment{
  opacity:.35;
  transform:scaleX(.18);
  transform-origin:left center;
}

.pairing-ratio.is-visible .ratio-segment{
  animation:motionRatioGrow 760ms var(--motion-ease) both;
}

.pairing-ratio .ratio-segment:nth-child(2){animation-delay:90ms}
.pairing-ratio .ratio-segment:nth-child(3){animation-delay:160ms}
.pairing-ratio .ratio-segment:nth-child(4){animation-delay:220ms}

.motion-heart-pop{
  animation:motionHeartPop 420ms var(--motion-ease);
}

.motion-filter-refresh{
  animation:motionFilterRefresh 460ms var(--motion-ease) both;
}

.unified-discover .discover-list-card.motion-reveal{
  animation:none;
}

@media(hover:hover) and (pointer:fine){
  html.motion-ready .motion-surface-card.is-visible:hover{
    transform:translate3d(0,-5px,0);
    box-shadow:0 18px 44px rgba(45,39,31,.12);
  }

  .motion-surface-card:hover .editorial-card-copy>*:not(:first-child),
  .motion-surface-card:hover .space-card-copy>*,
  .motion-surface-card:hover .discover-card-copy>*{
    transform:translate3d(0,-3px,0);
  }

  .inspiration-main .pairing-card:hover .pairing-visual img:first-child{
    transform:scale(1.035) translate3d(-.45%,0,0);
    filter:saturate(.82) contrast(.98);
  }

  .inspiration-main .pairing-card:hover .pairing-visual img:last-child{
    transform:scale(1.035) translate3d(.45%,0,0);
    filter:saturate(.82) contrast(.98);
  }

  .inspiration-main .pairing-card:hover .pairing-copy small{transform:translate3d(0,-2px,0)}
  .inspiration-main .pairing-card:hover .pairing-copy h3{transform:translate3d(0,-4px,0)}
  .inspiration-main .pairing-card:hover .pairing-copy p{transform:translate3d(0,-3px,0)}
  .inspiration-main .pairing-card:hover .pairing-copy .pairing-more{transform:translate3d(3px,0,0)}

  .motion-link-arrow:hover i,
  .motion-link-arrow:hover span:last-child{transform:translate3d(5px,0,0)}

  .pairing-scene-grid figure:hover img,
  .pairing-material-visual:hover img,
  .resource-cover:hover img{
    transform:scale(1.028);
  }
}

@keyframes motionRatioGrow{
  from{opacity:.35;transform:scaleX(.18)}
  to{opacity:1;transform:scaleX(1)}
}

@keyframes motionHeartPop{
  0%{transform:scale(1)}
  42%{transform:scale(1.18)}
  72%{transform:scale(.96)}
  100%{transform:scale(1)}
}

@keyframes motionFilterRefresh{
  from{opacity:.35;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@media(max-width:650px){
  html.motion-ready .motion-reveal{
    --motion-distance:15px;
    --motion-duration:560ms;
  }

  html.motion-ready .motion-media-reveal{
    transform:translate3d(0,12px,0);
    transition-duration:680ms;
  }
}

@media(prefers-reduced-motion:reduce){
  html.motion-ready .motion-reveal,
  html.motion-ready .motion-media-reveal{
    opacity:1!important;
    clip-path:none!important;
    transform:none!important;
    transition:none!important;
  }

  .motion-surface-card,
  .motion-surface-card *,
  .pairing-ratio .ratio-segment,
  .motion-heart-pop,
  .motion-filter-refresh{
    animation:none!important;
    transform:none!important;
    transition:none!important;
  }
}
