/* "View project": a white glass pill that follows the pointer inside the card (position set from JS via --x/--y), blurring the cover under it. */
.view { position: absolute; left: 0; top: 0; z-index: 2; height: 40px; padding: 0 16px 0 18px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; color: #111;
  background-color: rgba(255,255,255,.56); background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 70%);
  -webkit-backdrop-filter: blur(22px) saturate(2) brightness(1.3); backdrop-filter: blur(22px) saturate(2) brightness(1.3);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.22);
  opacity: 0; transform: translate3d(var(--x, 50%), var(--y, 50%), 0) translate(-50%, -50%); scale: .86; transition: opacity .18s cubic-bezier(.23,1,.32,1), scale .22s cubic-bezier(.23,1,.32,1); pointer-events: none; will-change: transform; }
.view svg { display: block; width: 16px; height: 16px; flex: none; opacity: .9; stroke-width: 1.5; }
.card.hov .view { opacity: 1; scale: 1; }
@media (hover: none) { .view { left: auto; top: auto; right: 16px; bottom: 16px; opacity: 1; transform: none; scale: 1; } }

/* The pill is the cursor on a project card: hide the system one there */
html a.card, html a.card *, html a.rel .card, html a.rel .card *, html .item .card:has(.view), html .item .card:has(.view) * { cursor: none !important; }
@media (hover: none) { html a.card, html a.card *, html a.rel .card, html a.rel .card *, html .item .card:has(.view), html .item .card:has(.view) * { cursor: auto !important; } }