/* -----------------------------------------
   CURSOR CUSTOMIZADO (desktop com ponteiro fino)
----------------------------------------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  display: none;
}

.has-custom-cursor .cursor {
  display: block;
}

/* Esconde o cursor nativo em QUALQUER elemento enquanto o cursor
   customizado estiver ativo — evita que regras de "cursor: pointer"
   pontuais (botões, links) façam o ponteiro do sistema reaparecer. */
.has-custom-cursor,
.has-custom-cursor * {
  cursor: none !important;
}

/* Cada peça é posicionada de forma independente, direto em
   coordenadas de viewport (position: fixed) — nada aqui herda a
   transform de outra peça, então elas não podem "descolar" umas
   das outras e parecerem dois cursores separados. */
.cursor-dot,
.cursor-ring,
.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--color-accent);
  transition: opacity var(--dur-fast) var(--ease-out-expo);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  transition: width var(--dur-base) var(--ease-out-expo),
    height var(--dur-base) var(--ease-out-expo),
    margin var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo),
    background-color var(--dur-base) var(--ease-out-expo);
}

.cursor-label {
  font-size: var(--fs-micro);
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out-expo);
}

.cursor.is-active .cursor-ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: var(--color-accent-soft);
  border-color: var(--color-accent-line);
}

.cursor.is-active .cursor-dot {
  opacity: 0;
}

.cursor.is-active .cursor-label {
  opacity: 1;
}

/* O estado "pressionado" é aplicado via JS (na mesma string de
   transform usada para posicionar o anel), já que uma regra de
   transform aqui seria sobrescrita pelo estilo inline por frame. */

/* -----------------------------------------
   BADGES / DETALHES
----------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 12px;
}

/* -----------------------------------------
   TABELA (compatibilidade com marcação antiga, se usada)
----------------------------------------- */

.tabela tr {
  display: flex;
  flex-direction: row;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.tabela th {
  display: flex;
  height: 6vh;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  padding: var(--space-3);
}

.tabela a {
  color: var(--color-text);
}

.tabela a:hover {
  color: var(--color-accent);
}

/* -----------------------------------------
   SPOTLIGHT CARD (Iluminação Dinâmica ao Mover o Cursor)
----------------------------------------- */

.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    var(--spotlight-color),
    transparent 55%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo);
  pointer-events: none;
  z-index: 1;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* Garante que o conteúdo dos cards fique acima do efeito de luz */
.spotlight-card > * {
  position: relative;
  z-index: 2;
}