/* wheels-cursor.css — robust, no clipping, total OS cursor hide */

:root { --wcursor-bias: -30deg; }

/* Aggressive native cursor suppression */
html, body, *, *::before, *::after,
html:hover, body:hover, *:hover,
html:active, body:active, *:active,
html:focus, body:focus, *:focus,
iframe, video, canvas,
[style*="cursor"],
[style*="cursor:"] {
  cursor: none !important;
}

/* Also hide caret so I-beam doesn’t flash in inputs/contenteditable */
input, textarea, [contenteditable="true"] {
  caret-color: transparent !important;
}

/* Avoid drag ghost + drag cursors over links/images */
a, img { -webkit-user-drag: none; user-drag: none; }

/* Main cursor root */
.wcursor{
  position: fixed;
  top: 0; left: 0;
  z-index: 999999;
  pointer-events: none;

  /* prevent “masked corners” when scaling */
  contain: layout style;   /* no paint containment */
  overflow: visible;

  will-change: transform;
  opacity: 1;
  transition: opacity .12s linear;

  /* Live vars set by JS */
  --x: 0px;
  --y: 0px;
  --ang: 0deg;
  --anchor-x: 13px;   /* defaults; JS will overwrite precisely */
  --anchor-y: 2px;
  --offset-x: 0px;
  --offset-y: 0px;
  --wcursor-bias: -30deg;
  --linkScale: 1;

  transform-origin: var(--anchor-x) var(--anchor-y);
  transform:
    translate(
      calc(var(--x) - var(--anchor-x) + var(--offset-x)),
      calc(var(--y) - var(--anchor-y) + var(--offset-y))
    )
    rotate(calc(var(--ang) + var(--wcursor-bias)));
}

/* Inner wrapper scales on link state */
.wcursor-i{
  display: inline-block;
  transform: scale(var(--linkScale));
  transition: transform 160ms cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}

/* Press / pop animation */
.wcursor-i.pressing {
  transform: scale(calc(var(--linkScale) * 0.94));
  transition: transform 90ms cubic-bezier(.3,.7,.4,1);
}
@keyframes wcursor-pop {
  0%   { transform: scale(calc(var(--linkScale)*0.94)); }
  55%  { transform: scale(calc(var(--linkScale)*1.08)); }
  100% { transform: scale(var(--linkScale)); }
}
.wcursor-i.pop{ animation: wcursor-pop 260ms cubic-bezier(.34,1.56,.64,1); }

/* Link hover scaling + color */
.wcursor.is-link { --linkScale: 1.2; }
.wcursor svg { width: 26px; height: auto; display: block; overflow: visible; }
.wcursor.is-link svg .st1 { fill: #eceef1 !important; }

/* Your showreel toggle */
body.wcursor-off .wcursor { opacity: 0; }

/* Touch / reduced motion */
@media (pointer:coarse){ .wcursor{ display:none; } }
@media (prefers-reduced-motion:reduce){ .wcursor{ transition:none; } }