/* ============================================================================
   Custom cursor (Cuberto-style)
   ----------------------------------------------------------------------------
   Esconde o cursor padrão e renderiza uma bolinha que segue o mouse com
   física elástica. Estados via classes:
     - is-link: hover sobre <a>, <button>, [role=button] — bolinha cresce
       e fica semi-transparente
     - is-text: bolinha grande com texto centralizado (data-cursor-text)
     - is-img:  bolinha vira preview de imagem (data-cursor-img)
     - is-down: encolhe momentaneamente no mousedown
     - is-stick: parece "grudar" no centro do elemento (data-cursor-stick)

   mix-blend-mode: exclusion → bolinha auto-inverte cor sobre fundos claros
   e escuros (bg branco → bolinha preta; bg preto → bolinha branca).

   Desativada em touch devices (sem hover/pointer fine) — fallback ao cursor
   nativo via media query.
   ========================================================================== */

/* IMPORTANTE: NÃO escondemos o cursor nativo — convivem juntos.
   O sistema cursor mostra setas/I-beam/pointer normalmente, e a bolinha
   passa por cima como camada decorativa. */

.evo-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  /* mix-blend-mode REMOVIDO — forçava o browser a re-blendar TODO o body
     a cada frame do cursor (60fps), saturando GPU em páginas com muitas
     animações. Auto-invert agora é feito por JS detectando luminância do
     fundo (mais leve, só roda no mouseover, não a cada frame). */
}

.evo-cursor-inner {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Verde EvoTalks — cor da marca. Mantém em todos os estados padrão. */
  background: var(--evo-green, #1bbf5d);
  /* 100% OPACA. Toda variação visual de cor vem do blend mode + tamanho.
     Scale 0 inicial — JS lerpa pra 1 suavemente (entrada na janela). */
  opacity: 1;
  transform: translate(-50%, -50%) scale(0);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition:
    width  .28s cubic-bezier(.16, 1, .3, 1),
    height .28s cubic-bezier(.16, 1, .3, 1),
    background-color .22s ease,
    border-radius .22s ease;
  will-change: width, height, transform;
}

/* Visível quando o cursor já recebeu pelo menos um mousemove */
.evo-cursor.is-visible .evo-cursor-inner {
  opacity: 1;
}

/* Estado: hover sobre link/botão — bolinha maior, mantém verde EvoTalks. */
.evo-cursor.is-link .evo-cursor-inner {
  width: 36px;
  height: 36px;
  background: var(--evo-green, #1bbf5d);
}
/* Em seções escuras a bolinha continua verde (cor da marca) — não inverte
   pra branca; o verde tem contraste suficiente sobre fundos escuros */
.evo-cursor.on-dark .evo-cursor-inner {
  background: var(--evo-green, #1bbf5d);
}

/* Estado: bolinha com texto centralizado (data-cursor-text="Ver mais")
   — destaque visual quando o cursor está sobre cards clicáveis grandes.
   Tamanho moderado pra não cobrir muito do conteúdo. */
.evo-cursor.is-text .evo-cursor-inner {
  width: 86px;
  height: 86px;
  background: var(--evo-green, #1bbf5d);
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.15;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Estado: bolinha vira preview de imagem (data-cursor-img="url.jpg") */
.evo-cursor.is-img .evo-cursor-inner {
  width: 220px;
  height: 150px;
  border-radius: 14px;
  background-color: #1e2026;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

/* is-down (click feedback) é controlado pelo JS junto com stretch — o JS
   compõe translate + rotate + scale numa transform inline única. */

/* Texto interno aparece só nos estados que mostram texto */
.evo-cursor-label {
  display: block;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .2s ease .05s, transform .25s cubic-bezier(.16, 1, .3, 1) .05s;
  max-width: 100%;
}
.evo-cursor.is-text .evo-cursor-label {
  opacity: 1;
  transform: scale(1);
}

/* Touch devices / sem hover / reduced motion → desativa por completo */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .evo-cursor { display: none !important; }
}