/* ═══════════════════════════════════════════════════════════════════
   HORAC · Mouse Effect Card — casca visual do efeito
   Par do mouse-effect-card.js. Nenhum seletor aqui toca a página
   atual: tudo é opt-in via .mec-card / [data-mouse-card].

   Identidade HORAC no lugar do zinc/white do Kokonut:
   superfícies e fios vêm dos tokens do design system quando o
   styles.css principal está presente; os fallbacks reproduzem os
   mesmos valores para uso isolado.
   ═══════════════════════════════════════════════════════════════════ */

.mec-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linha-forte, #C9CBCE);
  border-radius: var(--raio, 2px);
  background: var(--superficie, #FFFFFF);

  /* cor dos pontos — lida pelo JS via getComputedStyle */
  --mec-cor: var(--metal, #9BA0A8);
}

/* Em placas escuras os pontos clareiam um degrau, como o dark do
   original (zinc-600), mantendo a família metálica da HORAC. */
.secao--escura .mec-card,
.secao--cta .mec-card,
.mec-card--escuro {
  --mec-cor: var(--cinza-700, #4A4D53);
}

/* Variante fundo: o efeito como textura atrás de um bloco existente,
   sem impor borda, raio ou superfície — o bloco mantém sua identidade.
   isolation cria o contexto de empilhamento; o canvas com z-index:-1
   fica atrás do conteúdo do bloco, mas à frente do fundo da seção. */
.mec-fundo {
  position: relative;
  isolation: isolate;
  /* como fundo os pontos rodam em opacidade baixa; o tom desce um
     degrau na família metálica para manter presença sem sair da paleta */
  --mec-cor: var(--metal-escuro, #6E737C);
}
.mec-fundo > .mec-canvas { z-index: -1; }

.mec-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Conteúdo acima da grade. O original assenta o texto num véu com
   blur; aqui o véu é papel/grafite quase sólido — glassmorphism
   exagerado está fora do vocabulário da HORAC. */
.mec-card__conteudo {
  position: relative;
  z-index: 1;
  padding: var(--s-6, 2rem);
}

.mec-card__veu {
  background: color-mix(in srgb, var(--superficie, #FFFFFF) 82%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--raio, 2px);
  padding: var(--s-4, 1rem) var(--s-5, 1.5rem);
  display: inline-block;
}

/* Foco visível quando o card for focável (tabindex) — herda o anel
   do design system se presente. */
.mec-card:focus-visible {
  outline: 2px solid var(--tinta, #0B0C0E);
  outline-offset: 3px;
}