/* presence-cluster.css — Co-Editing-Presence-Avatare (LoD.PresenceCluster).
   Ueberlappender Facepile (Office-/Figma-Stil) im Drawer-Header. Die Avatare
   kommen aus der Avatar-SSOT (.avatar mit weissem Cutout-Ring) — hier nur
   Cluster-Layout + Premium-Motion. KEIN overflow:hidden am Cluster, sonst wird
   der absolut positionierte Presence-Punkt geclippt.
   Blueprint: docs/reference/product/gleichzeitige-bearbeitung.md (Stufe 1). */

.presence-cluster {
  display: inline-flex;
  align-items: center;
}

.presence-cluster__slot {
  position: relative;
  cursor: default;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.presence-cluster__slot:not(:first-child),
.presence-cluster__more {
  margin-left: -9px;   /* ~35% Ueberlappung; der Cutout-Ring der .avatar trennt sauber */
}
/* Hover: Avatar hebt sich dezent + kommt nach vorne (ueber die Nachbarn). */
.presence-cluster__slot:hover,
.presence-cluster__more:hover {
  transform: translateY(-2px);
  z-index: 60 !important;
}

/* "+N"-Pille im Avatar-Stil (gleicher Cutout-Ring wie .avatar). */
.presence-cluster__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-soft, var(--lod-gray-100));
  color: var(--color-text-secondary);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--lod-gray-200);
  box-sizing: border-box;
  cursor: default;
  transition: transform var(--motion-fast) var(--ease-standard);
}

/* Enter: Scale+Fade mit dezentem Overshoot (Premium-Motion, Charakter B). */
@keyframes presenceIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.presence-cluster__slot.is-entering,
.presence-cluster__more.is-entering {
  /* backwards (NICHT both) — sonst friert der End-Transform ein und ueberschreibt :hover. */
  animation: presenceIn var(--motion-enter) var(--ease-overshoot) backwards;
}

/* Exit: Scale+Fade beschleunigt, getrieben von LoD.motion.animateOut (.is-closing). */
@keyframes presenceOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.6); }
}
.presence-cluster__slot.is-closing,
.presence-cluster__more.is-closing {
  animation: presenceOut var(--motion-exit) var(--ease-exit) forwards;
  pointer-events: none;
}