/* =========================================================
   D Junior — football-boot cursor (see js/cursor.js)
   Only active once the script adds .has-djc to <html> (desktop mouse, motion allowed).
   ========================================================= */

/* hide the native pointer while the boot is on; text fields keep the I-beam */
html.has-djc, html.has-djc * { cursor: none !important; }
html.has-djc :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea, [contenteditable=""], [contenteditable="true"]) { cursor: text !important; }

.djc {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  overflow: hidden; contain: strict;
  opacity: 0; transition: opacity 160ms ease;
}
.djc.is-visible { opacity: 1; }
.djc * { pointer-events: none; }

.djc__cleat, .djc__tilt, .djc__streak, .djc__fx { position: absolute; top: 0; left: 0; will-change: transform; }
.djc__cleat { transition: opacity 140ms ease; }
.djc__cleat.is-text { opacity: 0; }
.djc__tilt { transform-origin: 0 0; transform: rotate(35deg); }

/* the toe tip (1.2px, 18.4px of the 38×24 boot) sits exactly on the pointer */
.djc__pose {
  position: absolute; left: -1.2px; top: -18.4px; width: 38px; height: 24px;
  transform-origin: 1.2px 18.4px;
  transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1);
}
.djc__pose svg { position: relative; display: block; overflow: visible; filter: drop-shadow(0 2px 2.5px rgba(0, 0, 0, .55)); }

/* hovering something clickable: a touch bigger, drawn back a little — ready to strike */
.djc__cleat.is-hover .djc__pose { transform: translateX(2.5px) rotate(-7deg) scale(1.17); }
.djc__glow {
  position: absolute; inset: -9px -6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 189, 248, .42), rgba(139, 92, 246, .16) 60%, transparent);
  opacity: 0; transition: opacity 220ms ease;
}
.djc__cleat.is-hover .djc__glow { opacity: 1; }

/* speed streak (fast flicks only) */
.djc__streak { width: 46px; height: 10px; margin-top: -5px; transform-origin: 0 50%; opacity: 0; }
.djc__streak i { position: absolute; left: 0; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(56, 189, 248, .85), rgba(139, 92, 246, 0)); }
.djc__streak i:first-child { top: 2px; width: 100%; }
.djc__streak i:last-child { top: 7px; left: 5px; width: 64%; }

/* kick impact: ring, mini ball, sparks */
.djc__fx > * { position: absolute; opacity: 0; }
.djc__ring { left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(56, 189, 248, .9); box-shadow: 0 0 8px rgba(56, 189, 248, .55); }
.djc__ball { left: -4.5px; top: -4.5px; width: 9px; height: 9px; filter: drop-shadow(0 0 3px rgba(56, 189, 248, .8)); }
.djc__ball svg { display: block; }
.djc__fx i { left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: #7dd3fc; box-shadow: 0 0 4px rgba(56, 189, 248, .9); }

/* reduced motion: no moving parts — just a still boot as the native cursor */
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  html { cursor: url("../assets/img/cursor-cleat.svg") 2 2, auto; }
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea) { cursor: text; }
}