/* byfahad custom cursor (see cursor.js). Loaded only where a real mouse exists (media attribute on the <link>).
   The photo is the cursor: the normal cursor is hidden only while the photo is showing (html.kc-on). */
.kc-layer {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
  pointer-events: none; z-index: 100;   /* popover browsers: top layer, z-index unused. Fallback only needs to clear .bar 20 / .more-menu 30 / .foot-toast 40 */
  opacity: 0; transition: opacity .15s ease;
}
.kc-layer::backdrop { background: none; }
html.kc-on:not(.kc-native) .kc-layer { opacity: 1; }
html.kc-on:not(.kc-native), html.kc-on:not(.kc-native) * { cursor: none !important; }

.kc-buddy { position: absolute; left: 0; top: 0; width: 44px; will-change: transform; }
.kc-buddy img {
  display: block; width: 44px; height: auto; transform-origin: 50% 30%;   /* = the hotspot, so tilt/scale never move the point you click with */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
  transition: scale .2s cubic-bezier(.22,.7,.2,1), opacity .2s ease;
  -webkit-user-drag: none; user-select: none;
}
.kc-layer.is-link  .kc-buddy img { scale: 1.18; }
.kc-layer.is-photo .kc-buddy img { scale: .78; opacity: .88; }
.kc-layer.is-press .kc-buddy img { scale: .86; }

@media (prefers-reduced-motion: reduce) {
  .kc-layer, .kc-buddy img { transition: none; }
}
@media print { .kc-layer { display: none !important; } }