/* ============================================================ CUSTOM CURSORS
   Loaded with cursors.js: the home page (Kostya) and the Growing People case (the team).
   - .mp-cursor : the "Kostya" collaborator cursor (Figma multiplayer)
   - .you-cursor: the visitor's own pointer, replaced with a green "You" cursor
   Markup is injected by cursors.js; both are desktop-only (hidden on touch). */

/* ---- the layer every cursor is injected into ----
   Pinned to the document origin, the width of the window, no height. Cursors flying in from
   off the side would otherwise widen the page for a moment; overflow-x:clip trims them at the
   window edge while the vertical axis stays visible (clip, unlike hidden, allows that mix). */
/* the layer clips horizontally so a cursor parked off the page cannot widen it; the margin
   lets the ones flying in over the right edge still be painted on their way in */
.cursors-layer{position:absolute;left:0;top:0;width:100%;height:0;overflow-x:clip;
               overflow-clip-margin:260px;pointer-events:none}

/* ---- collaborator cursor (Figma multiplayer) ---- */
/* absolute, in document coordinates: the browser scrolls it with the content itself, rubber-band
   overscroll included. z-index under the fixed header (50), like the team cursors: scrolling past
   the heading slides it under the nav rather than over it. */
.mp-cursor{position:absolute;top:0;left:0;z-index:49;pointer-events:none;will-change:transform;opacity:0;transition:opacity .5s ease}
.mp-cursor.is-in{opacity:1}
.mp-cursor__arrow{display:block;position:relative;z-index:2}   /* arrow paints over the plaque's top-left corner, as in Figma */
.mp-cursor__label{
  position:absolute;left:18px;top:22px;z-index:1;
  background:#1570ef;border:1px solid #0050c0;color:#fff;
  font-family:var(--font,'Manrope',system-ui,sans-serif);font-size:14px;line-height:normal;font-weight:500;
  box-shadow:0 4px 8px rgba(21,112,239,.25);white-space:nowrap;
  transform-origin:top left;
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.7,.3,1.5);
}
.mp-cursor__name{padding:4px 8px;border-radius:2px;opacity:1;transform:scale(1)}            /* resting: name plaque */
.mp-cursor__bubble{padding:8px 12px;border-radius:1px 16px 16px 12px;max-width:280px;opacity:0;transform:scale(.85)}  /* writing: comment bubble */
.mp-cursor.is-talking .mp-cursor__name{opacity:0;transform:scale(.85)}
.mp-cursor.is-talking .mp-cursor__bubble{opacity:1;transform:scale(1)}
@media (pointer:coarse){.mp-cursor{display:none}}

/* ---- the visitor's own cursor, replaced with a green "You" Figma cursor ---- */
.you-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;will-change:transform;opacity:0;transition:opacity .15s ease}
.you-cursor.is-on{opacity:1}
.you-cursor__arrow{display:block;position:relative;z-index:2}   /* arrow paints over the plaque's top-left corner */
.you-cursor__name{
  position:absolute;left:18px;top:22px;z-index:1;
  background:#14ae5c;border:1px solid #108b4a;color:#fff;
  font-family:var(--font,'Manrope',system-ui,sans-serif);font-size:14px;line-height:normal;font-weight:500;
  padding:4px 8px;border-radius:2px;white-space:nowrap;
  box-shadow:0 4px 8px rgba(20,174,92,.25);
}
@media (pointer:coarse){.you-cursor{display:none}}
@media (pointer:fine){body.custom-cursor,body.custom-cursor *{cursor:none !important}}

/* ---- team cursors that gather around the case cover as soon as it is on screen ---- */
.team-cursor{position:absolute;left:0;top:0;z-index:49;pointer-events:none;will-change:transform,opacity;opacity:0}
/* absolute, in document coordinates: they scroll and overscroll with the cover itself.
   z-index under the fixed header (50): scrolling past the cover slides them under the nav, not over it */
.team-cursor__arrow{display:block;position:relative;z-index:2}
.team-cursor__name{
  position:absolute;left:18px;top:22px;z-index:1;
  font-family:var(--font,'Manrope',system-ui,sans-serif);font-size:14px;line-height:normal;font-weight:500;
  padding:4px 8px;border-radius:2px;white-space:nowrap;border:1px solid transparent;
}
/* cursor chat: the plaque gives way to a bubble while somebody is typing, the same swap the
   collaborator cursor above does. Colours come from the member, like the plaque's. */
.team-cursor__name,.team-cursor__say{
  transform-origin:top left;
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.7,.3,1.5);
}
.team-cursor__say{
  position:absolute;left:18px;top:22px;z-index:1;
  font-family:var(--font,'Manrope',system-ui,sans-serif);font-size:14px;line-height:normal;font-weight:500;
  padding:8px 12px;border-radius:1px 16px 16px 12px;max-width:260px;white-space:nowrap;
  border:1px solid transparent;opacity:0;transform:scale(.85);
}
.team-cursor.is-talking .team-cursor__name{opacity:0;transform:scale(.85)}
.team-cursor.is-talking .team-cursor__say{opacity:1;transform:none}
@media (pointer:coarse){.team-cursor{display:none}}