/* ============================================================
   cursors.css — live multiplayer cursors overlay.

   The overlay layer + cursor element exist ONLY when at least one
   OTHER person is present (the layer is created/removed by cursors.js).
   When alone, nothing here is on the page, so the site is unaffected.
   ============================================================ */

.sv-cursor-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2147483000; /* above page content, below typical modals (max int range left free) */
}

.sv-cursor {
  position: absolute;
  top: 0;
  left: 0;
  /* JS sets transform: translate(x,y). Anchor the arrow tip at that point. */
  will-change: transform;
  pointer-events: none;
  display: block;
  transform-origin: 0 0;
}

.sv-cursor-arrow {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.sv-cursor-label {
  position: absolute;
  left: 16px;
  top: 16px;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  /* background color is set inline (per-user color) */
}

/* ---- pop-in ---- */
@keyframes sv-pop-in {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* The element's positional transform lives on .sv-cursor (JS-driven),
   so the pop animation scales an INNER wrapper effect via the children. */
.sv-cursor.sv-pop-in .sv-cursor-arrow,
.sv-cursor.sv-pop-in .sv-cursor-label {
  animation: sv-pop-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: 0 0;
}

/* ---- pop-out (little popping / scale-down + fade) ---- */
@keyframes sv-pop-out {
  0%   { opacity: 1; transform: scale(1); }
  30%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(0.2); }
}

.sv-cursor.sv-pop-out .sv-cursor-arrow,
.sv-cursor.sv-pop-out .sv-cursor-label {
  animation: sv-pop-out 320ms cubic-bezier(0.4, 0, 0.6, 1) both;
  transform-origin: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .sv-cursor.sv-pop-in .sv-cursor-arrow,
  .sv-cursor.sv-pop-in .sv-cursor-label,
  .sv-cursor.sv-pop-out .sv-cursor-arrow,
  .sv-cursor.sv-pop-out .sv-cursor-label {
    animation: none;
  }
}