/* ===== Pallino companion: freccia visibile, pallino che segue ===== */
:root{
  --cursor-size: 6px;          /* diametro base */
  --cursor-size-cta: 12px;      /* diametro sui CTA (in px) */
  --cursor-color: #ffffff;      /* colore base */
  --cursor-hover-color: #3F8BFE;/* colore quando sopra elementi cliccabili */
  --cursor-opacity: 1;
}

@media (hover: none), (pointer: coarse){
  #mega-cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce){
  #mega-cursor { transition: none !important; }
}

#mega-cursor{
  position: fixed;
  left: 0; top: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  pointer-events: none;
  /* Mantiene il pallino centrato sulla punta del cursore
     anche quando cambia la dimensione */
  transform: translate(-50%, -50%);
  background-color: var(--cursor-color);
  opacity: 0; /* diventa visibile al primo movimento */
  z-index: 99999;

  /* Transizioni morbide su colore, visibilità e dimensioni */
  transition:
    opacity 200ms ease-out,
    background-color 120ms ease-out,
    width 150ms ease,
    height 150ms ease;

  /* Bordo soft per visibilità su sfondi chiari/scuri */
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  /* In alternativa: auto-contrasto
     mix-blend-mode: difference; */
}

#mega-cursor.is-visible{ opacity: var(--cursor-opacity); }
#mega-cursor.is-hover{ background-color: var(--cursor-hover-color); }

/* --- CTA: ingrandimento in px --- */
#mega-cursor.is-cta{
  width: var(--cursor-size-cta);
  height: var(--cursor-size-cta);
}

/* Facoltativo: disattiva in una pagina specifica
.page-id-123 #mega-cursor{ display:none !important; }
*/