.workspace-card[href] .workspace-cover { position: relative; box-shadow: var(--shadow-card-rest); transition: box-shadow var(--motion-hover) ease; }
.workspace-card[href]:focus-visible .workspace-cover { box-shadow: var(--shadow-card-hover); }
.workspace-card[href] .workspace-cover::after {
  content: ''; position: absolute; inset: -.5px;
  border: var(--stroke-focus) solid var(--color-accent);
  border-radius: var(--radius-card); pointer-events: none;
  opacity: 0; transition: opacity var(--motion-hover) ease;
}
.workspace-card[href] .workspace-caption > span:first-child { transition: color var(--motion-hover) ease; }
.workspace-card[href] .project-tag {
  font-family: var(--font-body); font-weight: var(--weight-medium);
  transition: color var(--motion-hover) ease, background-color var(--motion-hover) ease, box-shadow var(--motion-hover) ease;
}
.workspace-card .work-view {
  display: inline-flex; align-items: center; gap: 2px; margin-left: auto;
  color: var(--color-accent); font: 400 13px/1.43 var(--font-body); letter-spacing: var(--tracking-body);
  opacity: 0; transform: translateX(-5px);
  transition: opacity 220ms ease, transform 280ms var(--ease-soft); white-space: nowrap;
}
.work-view svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .workspace-card[href]:hover .workspace-cover { box-shadow: var(--shadow-card-hover); }
  .workspace-card[href]:hover .workspace-cover::after { opacity: 1; }
  .workspace-card[href]:hover .workspace-caption > span:first-child { color: var(--color-accent); }
  .workspace-card[href]:hover .project-tag { color: var(--color-accent); background: var(--color-tag-hover); box-shadow: inset 0 0 0 var(--stroke-hairline) var(--color-accent); }
  .workspace-card[href]:hover .work-view { opacity: 1; transform: translateX(0); }
}
.workspace-card[href]:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: 5px; border-radius: var(--radius-card); }
.workspace-card[href]:focus-visible .workspace-cover::after, .workspace-card[href]:focus-visible .work-view { opacity: 1; transform: none; }
.workspace-card[href]:focus-visible .workspace-caption > span:first-child { color: var(--color-accent); }
.workspace-card[href]:focus-visible .project-tag { color: var(--color-accent); background: var(--color-tag-hover); box-shadow: inset 0 0 0 var(--stroke-hairline) var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .workspace-card[href] *, .workspace-card[href] .workspace-cover::after { transition: none !important; } }

:root[data-theme="dark"] .workspace-card[href]:focus-visible .workspace-cover::after { opacity: 0; }