/* VanGal Elements — global custom cursor */
:root.vg-custom-cursor-active,
:root.vg-custom-cursor-active body { --vg-native-cursor: none; }

@media (pointer:fine) {
  html.vg-custom-cursor-active.vg-hide-native,
  html.vg-custom-cursor-active.vg-hide-native body,
  html.vg-custom-cursor-active.vg-hide-native body * { cursor: none !important; }
  html.vg-custom-cursor-active.vg-native-zone,
  html.vg-custom-cursor-active.vg-native-zone body,
  html.vg-custom-cursor-active.vg-native-zone body * { cursor: auto !important; }
  html.vg-custom-cursor-active.vg-native-zone input,
  html.vg-custom-cursor-active.vg-native-zone textarea,
  html.vg-custom-cursor-active.vg-native-zone [contenteditable="true"] { cursor: text !important; }
}

.vg-cursor-layer {
  --vg-cursor-primary:#58c996;
  --vg-cursor-secondary:#58c996;
  --vg-cursor-size:12px;
  --vg-cursor-follower:38px;
  --vg-cursor-border:2px;
  --vg-cursor-opacity:1;
  --vg-cursor-hover-scale:1.65;
  --vg-cursor-z:999999;
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none !important;
  z-index:var(--vg-cursor-z);
  opacity:0;
  transition:opacity .18s ease;
  contain:layout style size;
}
.vg-cursor-layer.is-visible { opacity:1; }
.vg-cursor-core,.vg-cursor-follower {
  position:fixed;
  left:0;
  top:0;
  pointer-events:none !important;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
  transform-origin:center;
  will-change:transform,width,height,opacity,border-color,background-color;
  mix-blend-mode:var(--vg-cursor-blend,normal);
  opacity:var(--vg-cursor-opacity);
  box-sizing:border-box;
}
.vg-cursor-core {
  width:var(--vg-cursor-size);
  height:var(--vg-cursor-size);
  border-radius:999px;
  background:var(--vg-cursor-primary);
  transition:width .18s ease,height .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s ease,filter .18s ease;
}
.vg-cursor-follower {
  width:var(--vg-cursor-follower);
  height:var(--vg-cursor-follower);
  border:var(--vg-cursor-border) solid var(--vg-cursor-secondary);
  border-radius:999px;
  background:transparent;
  transition:width .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1),border-color .18s ease,background-color .18s ease,opacity .18s ease,filter .18s ease;
}

/* Templates */
.vg-template-dot .vg-cursor-follower { display:none; }
.vg-template-dot-ring .vg-cursor-follower { opacity:calc(var(--vg-cursor-opacity) * .48); }
.vg-template-ring .vg-cursor-core { background:transparent;border:var(--vg-cursor-border) solid var(--vg-cursor-primary); }
.vg-template-ring .vg-cursor-follower { display:none; }
.vg-template-crosshair .vg-cursor-core { background:transparent;border:1px solid var(--vg-cursor-primary); }
.vg-template-crosshair .vg-cursor-core::before,.vg-template-crosshair .vg-cursor-core::after { content:"";position:absolute;left:50%;top:50%;background:var(--vg-cursor-primary);transform:translate(-50%,-50%); }
.vg-template-crosshair .vg-cursor-core::before { width:calc(var(--vg-cursor-size) * 2.2);height:1px; }
.vg-template-crosshair .vg-cursor-core::after { width:1px;height:calc(var(--vg-cursor-size) * 2.2); }
.vg-template-crosshair .vg-cursor-follower { display:none; }
.vg-template-spotlight .vg-cursor-core { width:4px;height:4px; }
.vg-template-spotlight .vg-cursor-follower { border:0;background:var(--vg-cursor-secondary);opacity:calc(var(--vg-cursor-opacity) * .16);filter:blur(1px); }
.vg-template-soft .vg-cursor-core { display:none; }
.vg-template-soft .vg-cursor-follower { border:0;background:var(--vg-cursor-secondary);opacity:calc(var(--vg-cursor-opacity) * .28);filter:blur(1px); }
.vg-template-magnetic .vg-cursor-follower { opacity:calc(var(--vg-cursor-opacity) * .55); }

/* Hover modes */
.vg-cursor-layer.is-hover.vg-hover-grow .vg-cursor-core { width:calc(var(--vg-cursor-size) * var(--vg-cursor-hover-scale));height:calc(var(--vg-cursor-size) * var(--vg-cursor-hover-scale)); }
.vg-cursor-layer.is-hover.vg-hover-grow .vg-cursor-follower { width:calc(var(--vg-cursor-follower) * 1.18);height:calc(var(--vg-cursor-follower) * 1.18); }
.vg-cursor-layer.is-hover.vg-hover-shrink .vg-cursor-core { width:calc(var(--vg-cursor-size) * .58);height:calc(var(--vg-cursor-size) * .58); }
.vg-cursor-layer.is-hover.vg-hover-shrink .vg-cursor-follower { width:calc(var(--vg-cursor-follower) * .82);height:calc(var(--vg-cursor-follower) * .82); }
.vg-cursor-layer.is-hover.vg-hover-invert .vg-cursor-core { background:var(--vg-cursor-secondary);filter:invert(1); }
.vg-cursor-layer.is-hover.vg-hover-invert .vg-cursor-follower { border-color:var(--vg-cursor-primary);filter:invert(1); }
.vg-cursor-layer.is-hover.vg-hover-ring .vg-cursor-core { background:transparent;border:var(--vg-cursor-border) solid var(--vg-cursor-primary);width:calc(var(--vg-cursor-size) * var(--vg-cursor-hover-scale));height:calc(var(--vg-cursor-size) * var(--vg-cursor-hover-scale)); }

/* Click modes */
.vg-cursor-layer.is-click.vg-click-pulse .vg-cursor-core { animation:vgCursorPulse .32s ease-out; }
.vg-cursor-layer.is-click.vg-click-compress .vg-cursor-core { width:calc(var(--vg-cursor-size) * .55);height:calc(var(--vg-cursor-size) * .55); }
.vg-cursor-layer.is-click.vg-click-compress .vg-cursor-follower { width:calc(var(--vg-cursor-follower) * .72);height:calc(var(--vg-cursor-follower) * .72); }
@keyframes vgCursorPulse { 0%{transform:translate3d(var(--vg-x,0),var(--vg-y,0),0) translate(-50%,-50%) scale(1)} 45%{transform:translate3d(var(--vg-x,0),var(--vg-y,0),0) translate(-50%,-50%) scale(2.1)} 100%{transform:translate3d(var(--vg-x,0),var(--vg-y,0),0) translate(-50%,-50%) scale(1)} }
.vg-cursor-ripple { position:fixed;width:12px;height:12px;border:1.5px solid var(--vg-cursor-primary,#58c996);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:var(--vg-cursor-z,999999);animation:vgCursorRipple .55s ease-out forwards;mix-blend-mode:var(--vg-cursor-blend,normal); }
@keyframes vgCursorRipple { from{opacity:.85;width:12px;height:12px} to{opacity:0;width:72px;height:72px} }

@media (prefers-reduced-motion:reduce) {
  .vg-cursor-follower { transition:none!important; }
  .vg-cursor-ripple { animation-duration:.01ms!important; }
}
