.portfolio__presence-avatar {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  background: var(--presence-avatar-color, #444ce7) !important;
  cursor: default;
  transform-origin: center;
}

.portfolio__presence-avatar[data-presence-color="blue"] { --presence-avatar-color: #175cd3; }
.portfolio__presence-avatar[data-presence-color="indigo"] { --presence-avatar-color: #444ce7; }
.portfolio__presence-avatar[data-presence-color="violet"] { --presence-avatar-color: #7839ee; }
.portfolio__presence-avatar[data-presence-color="magenta"] { --presence-avatar-color: #c11574; }
.portfolio__presence-avatar[data-presence-color="red"] { --presence-avatar-color: #d92d20; }
.portfolio__presence-avatar[data-presence-color="orange"] { --presence-avatar-color: #e04f16; }
.portfolio__presence-avatar[data-presence-color="green"] { --presence-avatar-color: #067647; }
.portfolio__presence-avatar[data-presence-color="teal"] { --presence-avatar-color: #0e9384; }

.portfolio__presence-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.portfolio__presence-avatar::after {
  position: absolute;
  z-index: 4;
  top: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: 180px;
  padding: 5px 8px;
  color: #fff;
  background: rgb(24 24 22 / .9);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgb(24 24 22 / .16);
  content: attr(data-presence-label);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}

.portfolio__presence-avatar:hover::after,
.portfolio__presence-avatar:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.portfolio__presence-avatar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-presence-stack] > :nth-child(1) { z-index: 1; }
[data-presence-stack] > :nth-child(2) { z-index: 2; }
[data-presence-stack] > :nth-child(3) { z-index: 3; }
[data-presence-stack] > :nth-child(4) { z-index: 4; }

.portfolio__avatars > .portfolio__presence-overflow { margin-right: 0; }

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .portfolio__team { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__presence-avatar::after { transition: none; }
}