/* Chispa del cursor: el punto físico de la luz. La luz real vive en el shader (webgl/light.js). */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-cursor);
  opacity: 0;                     /* sin mix-blend-mode: obligaba a recomponer el fondo bajo la chispa en cada frame */
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.35s var(--ease-out);
}
.cursor.is-visible { opacity: 1; }

.cursor__spark {
  --d: 6px;
  display: block;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border: 1px solid transparent;
  border-radius: 50%;
  background: #ffd9b8;
  box-shadow:
    0 0 10px 3px rgb(255 120 70 / 0.7),
    0 0 30px 10px rgb(255 70 40 / 0.25);
  transition:
    width 0.5s var(--ease-out),
    height 0.5s var(--ease-out),
    margin 0.5s var(--ease-out),
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}

/* Sobre interactivos la chispa se abre en un anillo: no tapa el texto y la luz hace el resto */
.cursor.is-hover .cursor__spark {
  --d: 34px;
  background-color: transparent;
  border-color: rgb(255 217 184 / 0.6);
  box-shadow: 0 0 16px 1px rgb(255 120 70 / 0.3);
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}