/* ==========================================================================
   Cursor de cometa — Kite Boost
   Solo en escritorio con mouse. En áreas clickeables vuelve el cursor normal.
   Para usar la flecha en vez de la manito: --kite-cursor-clickable: default;
   ========================================================================== */

:root {
  --kite-cursor-clickable: pointer;
}

@media (hover: hover) and (pointer: fine) {
  /* Base (sin JS o con "reducir movimiento"): cometa estática como cursor nativo */
  html {
    cursor: url("../img/cursor-kite.png") 16 2, auto;
    cursor: -webkit-image-set(url("../img/cursor-kite.png") 1x, url("../img/cursor-kite-2x.png") 2x) 16 2, auto;
    cursor: image-set(url("../img/cursor-kite.png") 1x, url("../img/cursor-kite-2x.png") 2x) 16 2, auto;
  }

  /* Con JS: la cometa animada reemplaza al cursor nativo */
  html.kite-cursor-on {
    cursor: none;
  }

  /* Áreas clickeables: cursor normal */
  a[href],
  button,
  summary,
  select,
  label[for],
  [role="button"],
  [role="tab"],
  [role="link"],
  [data-clickable],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  input[type="file"] {
    cursor: var(--kite-cursor-clickable);
  }

  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  [contenteditable]:not([contenteditable="false"]) {
    cursor: text;
  }

  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }
}

.kite-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 32px;
  height: 32px;
  pointer-events: none;
  will-change: transform;
  contain: layout style;
}

.kite-cursor__fade {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 16px 2.5px;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kite-cursor.is-visible .kite-cursor__fade {
  opacity: 1;
  transform: scale(1);
}

.kite-cursor.is-visible.is-pressed .kite-cursor__fade {
  transform: scale(0.84);
}

.kite-cursor__tilt,
.kite-cursor__sway {
  position: absolute;
  inset: 0;
  transform-origin: 16px 2.5px;
}

.kite-cursor__tilt {
  will-change: transform;
}

.kite-cursor__sway {
  animation: kite-cursor-sway 3.6s ease-in-out infinite;
}

.kite-cursor svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
}

.kite-cursor__kite {
  filter: drop-shadow(0 1px 1.2px rgba(8, 12, 32, 0.45));
}

.kite-cursor__string {
  fill: none;
  stroke: #e66927;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.85;
}

@keyframes kite-cursor-sway {
  0%,
  100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kite-cursor {
    display: none;
  }
}