/* SpotlightCard — card com brilho que segue o mouse. Técnica: gradiente radial posicionado por --ta-x e --ta-y (o JS só
   atualiza as duas variáveis); borda iluminada pelo mesmo gradiente, recortado em anel por máscara. */

/* Sem JavaScript (ou antes de ligar): um card comum. Nada aqui depende do JS. */
[data-ta="spotlight-card"] {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(20px, 5vw, 28px);
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: var(--ta-radius, 16px);
  background: var(--ta-surface, color-mix(in srgb, currentColor 8%, transparent));
  /* Palavra comprida sem espaço quebra em vez de empurrar a página para o lado. */
  overflow-wrap: anywhere;
}

[data-ta="spotlight-card"] > :first-child { margin-top: 0; }
[data-ta="spotlight-card"] > :last-child { margin-bottom: 0; }

/* Ligado: as duas camadas de brilho são pseudo-elementos (nada injetado no HTML). */
[data-ta="spotlight-card"][data-ta-ui="on"] {
  isolation: isolate;
  --ta-tamanho: 240px;
  --ta-intensidade: 0.15;
  --ta-borda-brilho: 1;
  --ta-x: 50%;
  --ta-y: 0%;
}

/* Preenchimento: abaixo do conteúdo (z-index -1 dentro do contexto isolado), acima do fundo do card. */
[data-ta="spotlight-card"][data-ta-ui="on"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: calc(var(--ta-radius, 16px) - 1px);
  pointer-events: none;
  background: radial-gradient(
    circle var(--ta-tamanho) at var(--ta-x) var(--ta-y),
    var(--ta-accent, currentColor) 0%,
    color-mix(in srgb, var(--ta-accent, currentColor) 40%, transparent) 40%,
    transparent 100%
  );
  opacity: var(--ta-intensidade);
}

/* Borda iluminada: o mesmo gradiente, visível só no anel de 1 px por cima da borda do card. */
[data-ta="spotlight-card"][data-ta-ui="on"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle calc(var(--ta-tamanho) * 0.6) at var(--ta-x) var(--ta-y),
    var(--ta-accent, currentColor) 0%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}

/* Parado (toque, movimento reduzido): sem regra própria. O realce fixo e discreto é o ::before acima, centrado no alto
   do card (--ta-x e --ta-y padrão), e a borda iluminada fica apagada. */

/* Mouse: o brilho nasce ao entrar e acompanha o ponteiro (as variáveis vêm do JS). */
[data-ta="spotlight-card"][data-ta-spot="mouse"]::before {
  opacity: 0;
  transition: opacity 250ms ease;
}
[data-ta="spotlight-card"][data-ta-spot="mouse"]::after {
  transition: opacity 250ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-ta="spotlight-card"][data-ta-spot="mouse"]:hover::before {
    opacity: var(--ta-intensidade);
  }
  [data-ta="spotlight-card"][data-ta-spot="mouse"]:hover::after {
    opacity: var(--ta-borda-brilho);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ta="spotlight-card"][data-ta-spot]::before,
  [data-ta="spotlight-card"][data-ta-spot]::after { transition: none; }
}

/* Impressão e alto contraste: card comum, sem brilho. */
@media print, (forced-colors: active) {
  [data-ta="spotlight-card"][data-ta-ui="on"]::before,
  [data-ta="spotlight-card"][data-ta-ui="on"]::after { display: none; }
}