.project-card.has-image:after{
  filter:saturate(.7) brightness(.64);
  transition:transform 1.1s var(--ease-enter),filter .8s var(--ease-enter);
}

.project-card.has-image:hover:after,
.project-card.has-image:focus-visible:after,
.project-card.has-image.is-lit:after{
  transform:scale(1.025);
  filter:saturate(1.02) brightness(.88);
}

.project-card.has-image:focus-visible{
  outline:1px solid color-mix(in srgb,var(--tone) 68%,var(--ink));
  outline-offset:5px;
}

.project-card.has-image > *:not(.project-light){
  position:relative;
  z-index:1;
}

.project-light{
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
  width:clamp(300px,38vw,560px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--tone) 32%,#f2efea 26%) 0%,
    color-mix(in srgb,var(--tone) 22%,transparent) 38%,
    transparent 70%);
  mix-blend-mode:screen;
  filter:blur(18px);
  transform:translate3d(-50%,-50%,0) scale(.82);
  will-change:transform,opacity;
  transition:opacity .28s var(--ease-exit);
}

.project-card.is-lit .project-light,
.project-card:focus-visible .project-light{
  opacity:.76;
  transition-duration:.82s;
  transition-timing-function:var(--ease-enter);
}

@media (hover:none),(pointer:coarse){
  .project-card.has-image:after{filter:saturate(.9) brightness(.78)}
  .project-light{display:none}
}

@media (prefers-reduced-motion:reduce){
  .project-card,.project-card.has-image:after,.project-card:before,.project-light{transition:none!important}
  .project-card:hover{transform:none}
  .project-light{left:50%;top:50%;transform:translate3d(-50%,-50%,0) scale(1)}
}