.crm-card-motion{position:absolute;inset:0;display:grid;width:100%;height:100%;place-items:center;overflow:hidden;background:#f8f8f8;perspective:1200px}
.crm-card-motion__composite{position:relative;width:82%;max-width:58rem;aspect-ratio:2932/1800;transform:translateY(-8%)}
.crm-case .crm-card-motion__composite{width:65.6%;transform:translateY(2%)}
.crm-card-motion__web,.crm-card-motion__dashboard{position:absolute;display:block;max-width:none;border-radius:0;user-select:none;pointer-events:none}
.crm-card-motion__web{inset:0;width:100%;height:100%;object-fit:contain;animation:crm-card-web-in 5.6s cubic-bezier(.22,1,.36,1) infinite}
.crm-card-motion__dashboard{z-index:2;top:13.2%;left:21.2%;width:71%;height:auto;filter:drop-shadow(0 18px 24px rgba(29,43,63,.14));transform-origin:50% 18%;animation:crm-card-dashboard-in 5.6s cubic-bezier(.22,1,.36,1) infinite}
.crm-case .crm-card-motion__web,.crm-case .crm-card-motion__dashboard{animation-duration:3.36s}
.crm-motion-frame{padding:0;background:#f8f8f8}
.deck-card:not(.is-active) .crm-card-motion__web,.deck-card:not(.is-active) .crm-card-motion__dashboard{animation-play-state:paused}

/* Light frosted treatment for the Project 03 portfolio cards. */
.crm-case .case-link{background:#f8f8f8}
.crm-case .case-gradient{background:linear-gradient(0deg,rgba(248,248,248,.99) 0%,rgba(248,248,248,.96) 32%,rgba(248,248,248,.78) 60%,rgba(248,248,248,0) 100%)}
.crm-case .case-copy,.crm-case .case-title-row h2{color:#171717}
.crm-case .case-copy p{color:rgba(23,23,23,.64)}

@keyframes crm-card-web-in{0%,5%{opacity:0;transform:translateY(16px) scale(.985)}16%,92%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-3px) scale(1)}}
@keyframes crm-card-dashboard-in{0%,18%{opacity:0;transform:translate3d(11%,-12%,0) rotate(4deg) scale(.94)}34%,91%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate3d(-1%,-1%,0) rotate(-.25deg) scale(1)}}

@media(max-width:767px){
  .crm-card-motion__composite{width:102%;transform:translateY(-12%)}
  .crm-case .crm-card-motion__composite{width:81.6%;transform:translateY(-2%)}
}

@media(prefers-reduced-motion:reduce){
  .crm-card-motion__web,.crm-card-motion__dashboard{animation:none}
}
