/* Custom cursor, trail and spotlight (src/fx/cursor.js). */
html.fx-cursor, html.fx-cursor * { cursor: none !important; }
html.fx-cursor iframe { cursor: auto !important; }
html.fx-cursor input, html.fx-cursor textarea { cursor: text !important; }

.fx-cursor-dot, .fx-cursor-ring, .fx-cursor-label {
  position: fixed; top: 0; left: 0; z-index: 2147483000; pointer-events: none; will-change: transform;
}
.fx-cursor-dot, .fx-cursor-ring { mix-blend-mode: difference; }
.fx-cursor-dot::before, .fx-cursor-ring::before { content: ""; position: absolute; border-radius: 50%; }
.fx-cursor-dot::before { width: 5px; height: 5px; left: -2.5px; top: -2.5px; background: #fff; transition: transform .25s, opacity .2s; }
.fx-cursor-ring::before {
  width: 26px; height: 26px; left: -13px; top: -13px; border: 1px solid rgba(255, 255, 255, .8);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .3s, opacity .25s;
}
.fx-cursor-label {
  font: 700 8px/1 'JetBrains Mono', monospace; letter-spacing: 1.6px; color: #000; white-space: nowrap;
  opacity: 0; transition: opacity .25s; translate: -50% -50%;
}
html[data-fx-cursor="hidden"] .fx-cursor-dot::before, html[data-fx-cursor="hidden"] .fx-cursor-ring::before,
html[data-fx-cursor="native"] .fx-cursor-dot::before, html[data-fx-cursor="native"] .fx-cursor-ring::before { opacity: 0; }
html[data-fx-cursor="link"] .fx-cursor-ring::before { transform: scale(1.45); background-color: #fff; }
html[data-fx-cursor="link"] .fx-cursor-dot::before { transform: scale(0); }
html[data-fx-cursor="label"] .fx-cursor-ring::before { transform: scale(2); background-color: #fff; }
html[data-fx-cursor="label"] .fx-cursor-dot::before { opacity: 0; }
html[data-fx-cursor="label"] .fx-cursor-label { opacity: 1; }
html[data-fx-down] .fx-cursor-ring::before { transform: scale(.7); }
html[data-fx-down][data-fx-cursor="link"] .fx-cursor-ring::before { transform: scale(1.15); }
html[data-fx-down][data-fx-cursor="label"] .fx-cursor-ring::before { transform: scale(1.7); }

.fx-spotlight {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .055), transparent 62%);
}
.fx-trail { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; }

@media (hover: none), (pointer: coarse) {
  .fx-spotlight, .fx-trail, .fx-cursor-dot, .fx-cursor-ring, .fx-cursor-label { display: none; }
}