/* ======================== */
/* CURSORE PERSONALIZZATO   */
/* ======================== */

/* — Nascondi cursore default — */
/* @media (hover: hover) seleziona SOLO dispositivi con mouse/trackpad.
   Su touch (iPhone, Android) hover:hover è false → il cursore default rimane.
   Senza questa media query, cursor:none su mobile nasconde il cursore di sistema
   senza mostrarne uno alternativo — l'utente non vedrebbe nulla. */
@media (hover: hover) {
  body {
    cursor: none; /* nasconde la freccia default del sistema operativo */
  }
}

/* ======================== */
/* PUNTO                    */
/* ======================== */

/* — #cursor: il puntino piccolo — */
/* Segue il mouse esattamente, senza ritardo.
   La posizione viene aggiornata da JS a ogni mousemove.
   position: fixed = rimane ancorato alla viewport, non scrolla con la pagina.
   pointer-events: none = il puntino non blocca i click sugli elementi sotto. */
#cursor {
  position: fixed;             /* ancorato alla viewport */
  width: 10px;                 /* larghezza del puntino */
  height: 10px;                /* uguale alla larghezza = cerchio */
  background: var(--accent);   /* colore viola accent */
  border-radius: 50%;          /* quadrato → cerchio perfetto */
  pointer-events: none;        /* non intercetta click */
  z-index: 99999;              /* sopra tutto, anche sopra il notch-fill (9999) */
  transform: translate(-50%, -50%);
  /* translate(-50%, -50%) sposta il punto verso sinistra e verso l'alto
     della metà della sua dimensione → il centro del puntino è esattamente
     sul punto del mouse, non l'angolo in alto a sinistra */

  /* — Effetto mix-blend-mode — */
  /* difference inverte i colori della pagina nell'area del puntino:
     su sfondo scuro (#0c0414) → il puntino appare chiaro/viola brillante
     su testo chiaro o elementi bianchi → si inverte e diventa scuro
     Risultato: il puntino è sempre visibile e crea un effetto "glitch" elegante. */
  mix-blend-mode: difference;

  /* — Glow viola — */
  /* box-shadow crea un alone luminoso attorno al puntino.
     0 0 = nessun offset (centrato)
     6px = raggio di blur — quanto si allarga l'alone
     var(--accent) al 60% di opacità — colore del glow */
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.6);

  /* Nessuna transition su posizione — deve seguire il mouse istantaneamente. */
}

/* ======================== */
/* ANELLO                   */
/* ======================== */

/* — #cursor-ring: il cerchio esterno — */
/* Più grande del puntino — 36px di diametro, solo bordo (border) senza fill.
   La posizione segue il mouse con un ritardo (lerp in JS) — effetto "magneto soft".
   opacity: 0.5 di default, diventa 0.8 al hover su elementi interattivi. */
#cursor-ring {
  position: fixed;              /* ancorato alla viewport */
  width: 36px;                  /* diametro dell'anello */
  height: 36px;                 /* uguale alla larghezza = cerchio */
  border: 1.5px solid var(--accent); /* bordo viola */
  border-radius: 50%;           /* cerchio */
  pointer-events: none;         /* non intercetta click */
  z-index: 99998;               /* sotto il puntino ma sopra tutto il resto */
  transform: translate(-50%, -50%); /* centrato sul punto di riferimento */
  opacity: 0.6;                 /* leggermente più visibile per l'effetto frosted */

  /* — Effetto frosted glass — */
  /* background semitrasparente viola: dà colore all'area del cerchio
     senza coprire completamente il contenuto sotto */
  background: rgba(167, 139, 250, 0.06);

  /* backdrop-filter: blur() sfoca il contenuto della pagina
     DENTRO l'area del cerchio — esattamente come la navbar scrolled.
     Il risultato: l'anello sembra "vetro" che distorce leggermente ciò che c'è sotto. */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* stesso effetto su Safari */

  /* — Effetto mix-blend-mode — */
  /* Stesso principio del puntino: difference inverte i colori della pagina
     nell'area dell'anello. Il bordo non è più colore fisso —
     su sfondo scuro appare chiaro, su elementi chiari diventa scuro.
     Il frosted blur dentro rimane attivo e viene anch'esso invertito,
     creando un effetto vetro cangiante mentre l'anello si muove. */
  mix-blend-mode: difference;

  transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease;
  /* aggiunta background alla transition — al hover il fill cambia morbidamente */
}

/* — Stato hover — */
/* Quando il mouse è su un link o bottone, JS aggiunge scale(1.8).
   Aumentiamo anche il background per rendere il frosted più evidente
   sull'area più grande — effetto "lente" che ingrandisce il frosted. */
#cursor-ring.hovered {
  background: rgba(167, 139, 250, 0.12); /* fill più visibile al hover */
}

/* ======================== */
/* VISIBILITÀ MOBILE        */
/* ======================== */

/* — Nasconde su touch — */
/* Su mobile i div esistono nel DOM ma non devono essere visibili.
   Usiamo la stessa media query per coerenza. */
@media (hover: none) {
  #cursor,
  #cursor-ring {
    display: none; /* nasconde i div del cursore su touch devices */
  }
}