/* ============================================================
   basma.design shared layer: moving field + figjam cursor
   Loaded on every page. site.js injects the DOM it needs.
   ============================================================ */

/* field: marker strokes drifting on the paper */
.field{
  position:fixed;inset:0;z-index:-1;
  width:100%;height:100%;
  pointer-events:none;
}

/* figjam-style cursor (fine pointers only) */
.fj{
  position:fixed;left:0;top:0;z-index:300;
  pointer-events:none;
  opacity:0;transition:opacity 0.25s var(--ease-std,cubic-bezier(0.4,0,0.2,1));
  will-change:transform;
}
.fj.on{opacity:1;}
.fj-arrow{
  display:block;width:22px;height:22px;
  filter:drop-shadow(0 1px 2px rgba(20,19,17,0.25));
  transform-origin:2px 2px;
  transition:transform 0.25s var(--ease-spring,cubic-bezier(0.34,1.56,0.64,1));
}
.fj-tag{
  position:absolute;left:18px;top:20px;
  background:var(--fj-color);color:#fff;
  font-family:var(--font-body,'Instrument Sans',sans-serif);font-weight:600;font-size:12.5px;line-height:1;
  padding:6px 9px 7px;border-radius:4px 10px 10px 10px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(20,19,17,0.18);
  transform-origin:0 0;
  transition:transform 0.3s var(--ease-spring,cubic-bezier(0.34,1.56,0.64,1)),background 0.3s var(--ease-std,cubic-bezier(0.4,0,0.2,1));
}
.fj.hot .fj-arrow{transform:scale(0.82) rotate(-8deg);}
.fj.hot .fj-tag{transform:translate(2px,-2px) scale(1.06);}
.fj.grab .fj-arrow{transform:scale(0.7);}
.fj.grab .fj-tag{transform:scale(0.92);}
@media(hover:hover) and (pointer:fine){
  body.fj-live,body.fj-live *{cursor:none!important;}
}