@layer components {
  [data-project-motion] .project-cover {
    transform: translate3d(0,0,0) scale(1.015);
    transition: transform 650ms cubic-bezier(.2,.7,.2,1), filter 650ms ease;
  }
  [data-project-motion]::before {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(circle at var(--project-light-x,50%) var(--project-light-y,35%), #fff0d629, transparent 62%);
    opacity:0; transition:opacity 500ms ease;
  }
  [data-project-motion] .project-caption { transition:transform 450ms ease; }
  [data-project-motion]:focus-visible .project-cover { transform:scale(1.06); filter:brightness(1.06); }
  [data-project-motion]:focus-visible::before { opacity:1; }
  @media (hover:hover) and (pointer:fine) {
    [data-project-motion]:is(:hover,.is-pointer-active) .project-cover {
      transform:translate3d(var(--project-x,0px),var(--project-y,0px),0) scale(1.08);
      filter:brightness(1.075) saturate(1.04);
    }
    [data-project-motion]:is(:hover,.is-pointer-active)::before { opacity:1; }
    [data-project-motion]:hover .project-caption { transform:translateY(-4px); }
  }
  @media (hover:none) {
    [data-project-motion]:active .project-cover { transform:scale(1.04); filter:brightness(1.06); }
  }
}
@layer responsive {
  @media (prefers-reduced-motion:reduce) {
    [data-project-motion], [data-project-motion] .project-cover, [data-project-motion] .project-caption { transform:none !important; filter:none !important; }
    [data-project-motion]::before { display:none !important; }
  }
}