/* =====================================================================
   11-cursor.css  |  BOLINHA EM VOLTA DA SETA DO MOUSE (veja js/11-cursor.js)
   ===================================================================== */

/* a bolinha: só o contorno, sem preenchimento forte */
#cursor-anel{
  position:fixed;left:0;top:0;z-index:2147483647;
  width:36px;height:36px;margin:0;padding:0;border:1.5px solid var(--accent);border-radius:50%;
  background:transparent;overflow:visible;inset:auto;
  pointer-events:none;opacity:0;
  transition:width .2s,height .2s,opacity .25s,border-color .2s,background .2s;
}
#cursor-anel:popover-open{inset:auto;left:0;top:0}

/* aparece quando o mouse entra na página */
#cursor-anel.visivel{opacity:.9}

/* em cima de links e botões: cresce e ganha um leve brilho */
#cursor-anel.sobre{width:52px;height:52px;border-color:var(--accent2);background:rgba(37,99,235,.10)}

/* ao clicar: encolhe */
#cursor-anel.clicando{width:26px;height:26px;background:rgba(59,130,246,.18)}

/* quem prefere menos movimento: a bolinha não anima o tamanho */
@media (prefers-reduced-motion:reduce){ #cursor-anel{transition:opacity .25s} }