/* SpisaSmart — Custom cursor animato (zero-lag tracking)
 *
 * Architettura a due livelli per disaccoppiare tracking e animazioni:
 *
 *   #spisa-cursor          → posizione pura (transform aggiornato da JS).
 *                            NESSUNA transition su transform: il movimento
 *                            deve essere 1:1 con il mouse, non interpolato.
 *                            Questo è ciò che rende il cursore "non-laggy".
 *
 *   #spisa-cursor svg      → scale e drop-shadow (animazioni puramente CSS).
 *                            Vive su un livello diverso, quindi le sue
 *                            transition NON rallentano il tracking.
 *
 * Solo su device con pointer fine: su touch lasciamo il comportamento nativo
 * (nascondere un cursore inesistente non avrebbe senso).
 */

@media (hover: hover) and (pointer: fine) {
  /* Nascondi il puntatore di sistema solo se il cursore custom è presente.
   * Senza #spisa-cursor (JS che non inizializza) altrimenti lo schermo resta
   * senza cursore visibile. */
  html:has(#spisa-cursor) body,
  html:has(#spisa-cursor) body *,
  html:has(#spisa-cursor) body *::before,
  html:has(#spisa-cursor) body *::after {
    cursor: none !important;
  }

  /* Su iframe Google il browser può forzare il cursore: eccezione solo qui (cliccabile + mano) */
  html:has(#spisa-cursor) .auth-google-mount,
  html:has(#spisa-cursor) .auth-google-mount iframe {
    cursor: pointer !important;
  }

  #spisa-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    pointer-events: none;
    color: #00d2ff;
    /* Posizione iniziale fuori dallo schermo: evita il flash a (0,0) prima
       del primo mousemove. */
    transform: translate3d(-100px, -100px, 0);
    /* IMPORTANTE: niente transition su transform. La posizione è la "verità"
       e va aggiornata istantaneamente. Animiamo solo color e opacity, che
       sono cambi di stato (hover / visibilità) e quindi devono dissolvere. */
    transition: color 220ms ease-out, opacity 150ms ease-out;
    will-change: transform;
  }

  #spisa-cursor svg {
    display: block;
    /* Offset per allineare la punta della freccia (path "M2 2 ...") con
       l'origine dell'elemento, in modo che la punta sia esattamente sul
       puntatore del mouse. */
    transform: translate(-2px, -2px) scale(1);
    /* transform-origin sulla punta: lo scale dell'hover-active fa "crescere"
       la freccia mantenendo la punta ancorata al mouse. */
    transform-origin: 2px 2px;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  }

  #spisa-cursor.hover-active {
    color: #f97316;
  }

  #spisa-cursor.hover-active svg {
    transform: translate(-2px, -2px) scale(1.15);
  }

  #spisa-cursor.is-hidden {
    opacity: 0;
  }
}