/* Keep the hit area and descriptions still; give only the preview depth. */
[data-project-card]{
  --card-shadow:#15220f24;
  --card-edge:#40513245;
}
.spatial-section [data-project-card]{
  --card-shadow:#0c120b66;
  --card-edge:#c7d5aa70;
}
[data-card-surface]{
  isolation:isolate;
  transform-origin:50% 50%;
  transform:perspective(1400px) rotateX(0deg) rotateY(0deg);
  box-shadow:0 2px 0 #15220f12,0 7px 18px #15220f0a;
  transition:transform .4s cubic-bezier(.2,.75,.25,1),box-shadow .4s,border-color .3s;
  backface-visibility:hidden;
}
[data-card-surface]::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(ellipse at var(--card-light-x,50%) var(--card-light-y,30%),#fff2,transparent 65%);
  box-shadow:inset 0 1px 0 #ffffff45;
  opacity:0;
  transition:opacity .35s;
}
[data-card-surface] :is(.project-open,.spatial-play,.cover-badge){z-index:2}
[data-card-surface]>.browser-frame{
  transition:transform .4s cubic-bezier(.2,.75,.25,1),box-shadow .4s;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  [data-project-card]:hover [data-card-surface]{
    transform:perspective(1400px) translateY(-4px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg));
    box-shadow:var(--card-shadow-x,0px) 18px 32px -9px var(--card-shadow),0 3px 0 #15220f17;
    border-color:var(--card-edge);
  }
  [data-project-card]:hover [data-card-surface]::after{opacity:1}
  [data-project-card]:hover [data-card-surface]>img{transform:scale(1.012)}
  [data-project-card]:hover [data-card-surface]>.browser-frame{
    transform:translateY(-3px);
    box-shadow:0 10px 22px #15220f1a;
  }
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  [data-card-surface],
  [data-project-card] [data-card-surface]>img,
  [data-project-card] [data-card-surface]>.browser-frame{
    transform:none!important;
    transition:none!important;
  }
  [data-card-surface]::after{display:none}
}