@property --scopel-card-mask-stop{
  syntax:"<percentage>";
  inherits:false;
  initial-value:53.725%;
}

:root{
  --scopel-motion-enter-distance:25px;
  --scopel-motion-enter-delay:100ms;
  --scopel-motion-enter-duration:1550ms;
  --scopel-motion-enter-ease:linear(0,0.1319,0.2933,0.4268,0.5352,0.6232,0.6944,0.7522,0.7991,0.8371,0.8679,0.8929,0.9132,0.9296,0.9429,0.9537,0.9625,0.9696,0.9753,0.98,0.9838,0.9868,0.9893,0.9914,0.993,0.9943,0.9954,0.9963,0.997,1);
  --scopel-motion-hover-duration:400ms;
  --scopel-motion-ease:cubic-bezier(.16,1,.3,1);
  --scopel-card-shadow-rest:0 .602px .602px -1.25px rgba(47,67,86,.14),0 2.289px 2.289px -2.5px rgba(47,67,86,.13),0 10px 10px -3.75px rgba(47,67,86,.05);
  --scopel-card-shadow-hover:0 .602px 2.047px rgba(40,73,107,.01),0 2.289px 7.781px rgba(40,73,107,.05),0 10px 34px rgba(40,73,107,.2);
}

.scopel-motion-ready [data-scopel-motion~="reveal"][data-scopel-motion-state="pending"]{
  opacity:0;
  transform:translateY(var(--scopel-motion-enter-distance));
}

.scopel-motion-ready [data-scopel-motion~="reveal"][data-scopel-motion-state="entered"]{
  opacity:1;
  transform:translateY(0);
}

.scopel-motion-ready [data-scopel-motion~="reveal"]{
  transition:opacity var(--scopel-motion-enter-duration) var(--scopel-motion-enter-ease) var(--scopel-motion-enter-delay),transform var(--scopel-motion-enter-duration) var(--scopel-motion-enter-ease) var(--scopel-motion-enter-delay),box-shadow var(--scopel-motion-hover-duration) var(--scopel-motion-ease);
}

.scopel-motion-card{
  box-shadow:var(--scopel-card-shadow-rest);
  transition:box-shadow var(--scopel-motion-hover-duration) var(--scopel-motion-ease);
}

.scopel-motion-card img{
  --scopel-card-mask-stop:53.725%;
  -webkit-mask:linear-gradient(0deg,transparent 0%,#000 var(--scopel-card-mask-stop));
  mask:linear-gradient(0deg,transparent 0%,#000 var(--scopel-card-mask-stop));
  transition:--scopel-card-mask-stop var(--scopel-motion-hover-duration) var(--scopel-motion-ease);
}

@media(hover:hover) and (pointer:fine){
  .scopel-motion-card:hover{
    box-shadow:var(--scopel-card-shadow-hover);
  }

  .scopel-motion-card:hover img{
    --scopel-card-mask-stop:100%;
  }
}

.scopel-motion-card:focus-visible{
  box-shadow:var(--scopel-card-shadow-hover);
  outline:2px solid #80342a;
  outline-offset:4px;
}

.scopel-motion-card:focus-visible img{
  --scopel-card-mask-stop:100%;
}

@media(prefers-reduced-motion:reduce){
  .scopel-motion-ready [data-scopel-motion~="reveal"]{
    opacity:1;
    transform:none;
    transition:none;
  }

  .scopel-motion-card,.scopel-motion-card img{
    transition:none;
  }
}