/* ==========================================================================
   Efeitos

   Carregamento, hover padronizado e a sombra que acompanha o mouse.
   Regra do CLAUDE.md: todo card do site tem o MESMO comportamento de hover.
   Só transform e opacity. Tudo desligado em prefers-reduced-motion, com o
   estado final declarado à mão para nada desaparecer.
   ========================================================================== */

/* --- ícones -------------------------------------------------------------- */

.ico {
  width: 22px;
  height: 22px;
  flex: none;
  color: currentColor;
}

.ico--g { width: 28px; height: 28px; }
.ico--p { width: 18px; height: 18px; }

/* Selo de ícone: o quadrado com borda que envolve o ícone nas listas.
   Agora redondo, para casar com a pílula do botão: a camada de AÇÃO e a
   camada de MARCAÇÃO usam o mesmo raio. Estrutura continua em canto vivo. */
.ico-selo {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-acao);
  border: 1px solid var(--borda-media);
  background: var(--fundo);
  color: var(--acento);
  transition: border-color var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease);
}

/* ==========================================================================
   Entrada por scroll: o efeito de carregamento
   ========================================================================== */

.entra {
  animation: entrar var(--dur-entrada) var(--ease) both;
  animation-timeline: view();
  animation-range: entry 4% cover 26%;
}

@keyframes entrar {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: none; }
}

/* Escalonado, para grade de card. O atraso vem da posição, sem JS. */
.entra-grade > * {
  animation: entrar var(--dur-entrada) var(--ease) both;
  animation-timeline: view();
}
.entra-grade > :nth-child(1) { animation-range: entry 3% cover 22%; }
.entra-grade > :nth-child(2) { animation-range: entry 6% cover 25%; }
.entra-grade > :nth-child(3) { animation-range: entry 9% cover 28%; }
.entra-grade > :nth-child(4) { animation-range: entry 12% cover 31%; }
.entra-grade > :nth-child(5) { animation-range: entry 15% cover 34%; }
.entra-grade > :nth-child(6) { animation-range: entry 18% cover 37%; }
.entra-grade > :nth-child(n+7) { animation-range: entry 21% cover 40%; }

/* Navegador sem timeline de scroll: IntersectionObserver em efeitos.js */
@supports not (animation-timeline: view()) {
  .entra,
  .entra-grade > * {
    animation: none;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity var(--dur-entrada) var(--ease),
                transform var(--dur-entrada) var(--ease);
  }
  .entra.visivel,
  .entra-grade > .visivel { opacity: 1; transform: none; }
}

/* --- barra que cresce ---------------------------------------------------- */

.barra-cresce {
  transform-origin: 0 50%;
  animation: crescerBarra 900ms var(--ease) both;
  animation-timeline: view();
  animation-range: entry 8% cover 34%;
}

@keyframes crescerBarra {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@supports not (animation-timeline: view()) {
  .barra-cresce { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   Hover padronizado de card
   Quatro coisas juntas: borda, subida, zoom e sombra em volta.
   ========================================================================== */

.card,
.card-efeito {
  transition: border-color var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease),
              background-color var(--dur-ui) var(--ease);
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .card-efeito:hover {
    border-color: var(--borda-forte);
    transform: translate3d(0, -4px, 0) scale(1.015);
    box-shadow: var(--elev-hover);
    z-index: 1;
  }

  .card:hover .ico-selo,
  .card-efeito:hover .ico-selo {
    border-color: var(--acento);
    transform: scale(1.06);
  }
}

/* Card clicável inteiro: o foco precisa aparecer no card, não só no texto.
   O display vai em :where() para ter especificidade ZERO: uma âncora nua
   precisa virar bloco, mas .post e .sugerido já definem o próprio grid e
   não podem ser sobrescritos por este atalho. Sem o :where(), a lista
   "Leia também" perdia o grid e eixo e título colavam na mesma linha. */
:where(a.card, a.card-efeito) { display: block; }

a.card:focus-visible,
a.card-efeito:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* ==========================================================================
   Sombra que acompanha o mouse
   Só em bloco de fundo azul, um por seção. Nunca no caminho da leitura.
   ========================================================================== */

.holofote { position: relative; isolation: isolate; }

.holofote::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    var(--holofote),
    transparent 68%
  );
}

@media (hover: hover) and (pointer: fine) {
  .holofote:hover::after { opacity: 1; }
}

@media (hover: none) {
  .holofote::after { display: none; }
}

/* O conteúdo fica acima do holofote. */
.holofote > * { position: relative; z-index: 1; }

/* ==========================================================================
   Grade quadriculada de fundo
   Textura estrutural. Reforça a âncora de fundação, não decora.
   ========================================================================== */

.quadriculado { position: relative; isolation: isolate; }

.quadriculado::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--linha-grade) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linha-grade) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

/* ==========================================================================
   Número que conta
   ========================================================================== */

.conta { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Redução de movimento
   Desliga tudo, e declara cada estado final à mão.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .entra,
  .entra-grade > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .barra-cresce { animation: none !important; transform: scaleX(1) !important; }

  .card:hover,
  .card-efeito:hover { transform: none !important; }

  .holofote::after { display: none !important; }
}