/* ==========================================================================
   CURSOR DISCO — ptr-
   Anel que acompanha o ponteiro com atraso curto e cresce sobre alvo.
   O script escreve --ptr-x, --ptr-y e a classe .is-grande.
   ========================================================================== */

.ptr-disc{
  /* Nao desenha nada por padrao. So' existe onde ha ponteiro fino de
     verdade -- ver a media query no fim. Nascer invisivel e' o que garante
     que toque e leitor de tela nunca recebam este no'. */
  display:none;
}

/* ---- Palco de demonstracao (nao e' o componente) ---- */
.ptr-linhas{
  max-width:62ch;
  margin-inline:auto;
  display:grid;
  gap:18px;
}

.ptr-p{
  color:var(--fg-2);
  font-size:1.02rem;
  line-height:1.66;
}

.ptr-link{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-color:var(--rule-2);
  transition:text-decoration-color .3s var(--ease);
}

.ptr-link:hover,
.ptr-link:focus-visible{text-decoration-color:var(--accent)}

.ptr-acoes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-block-start:8px;
}

.ptr-alvo{
  padding:10px 18px;
  border:1px dashed var(--rule-2);
  border-radius:var(--radius-pill);
  color:var(--fg-muted);
  font-size:.86rem;
}

/* ==========================================================================
   O componente so' existe com ponteiro fino. Nao e' media query de largura
   -- e' de CAPACIDADE, e por isso nao vale a regra do "mobile no fim":
   ela nao adapta o layout, ela decide se o componente existe.
   ========================================================================== */
@media (hover: hover) and (pointer: fine){
  .ptr-disc{
    display:block;
    position:fixed;
    inset-block-start:0;
    inset-inline-start:0;
    inline-size:var(--ptr-size, 26px);
    block-size:var(--ptr-size, 26px);
    border-radius:var(--radius-pill);
    border:1px solid var(--accent);
    /* O anel e' vazado: o cursor do sistema aparece por dentro dele, o que
       e' o ponto -- ele acompanha, nao substitui. */
    background:transparent;
    /* Acima do conteudo, abaixo de overlay e menu: um anel decorativo nao
       pode cobrir um dialogo. */
    z-index:var(--ptr-z, 90);
    /* Sem isto o anel come cada clique da pagina, porque esta' sempre
       exatamente debaixo do ponteiro. */
    pointer-events:none;
    /* O -50% centra o anel no ponto; o translate3d joga a composicao para
       a GPU, e sem ele o anel arrasta em pagina longa. */
    transform:translate3d(calc(var(--ptr-x, -100px) - 50%), calc(var(--ptr-y, -100px) - 50%), 0)
              scale(var(--ptr-k, 1));
    transition:opacity .25s var(--ease),
               border-color .25s var(--ease),
               background-color .25s var(--ease);
    opacity:var(--ptr-o, 0);
    will-change:transform;
  }

  /* Sobre alvo: cresce e ganha corpo. A escala vem por --ptr-k, e nao por
     inline-size, porque transform nao remonta layout -- o mesmo motivo do
     scaleX no navegacao/progresso-leitura. */
  .ptr-disc.is-grande{
    --ptr-k:2.15;
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

@media (prefers-reduced-motion: reduce){
  /* Anel que persegue o ponteiro e' movimento puro, sem funcao informativa:
     com movimento reduzido ele simplesmente nao existe. O script tambem nao
     liga listener nenhum nessa condicao. */
  .ptr-disc{display:none}
}

@media (max-width: 760px){
  .ptr-acoes{gap:12px}
  .ptr-p{font-size:.98rem}
}