/* MD7: redes no rodapé.
   Adaptação em HTML, CSS e JS puro do componente "animated social icons"
   (React + framer-motion + lucide). Um botão preto cobre os canais; ao clicar,
   desliza para a direita, gira 45 graus (o + vira x) e os ícones entram em foco.
   Sem JS os canais ficam à vista: a capa só existe quando js/site.js marca .redes--js.
   Ícones no traço da marca, sem laranja: o laranja da tela é do CTA de contato. */

.redes {
  --tam: 2.75rem; /* 44 px: alvo de toque */
  --vao: 0.75rem;
  display: inline-flex;
}
.redes__trilho { position: relative; display: inline-flex; }

.redes__lista {
  display: flex;
  gap: var(--vao);
}
.redes__item,
.redes__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tam);
  height: var(--tam);
  border-radius: 50%;
}
.redes__item {
  background: var(--superficie);
  border: 1px solid var(--linha);
  box-shadow: 0 8px 18px -10px rgba(10, 10, 11, 0.35);
  color: var(--texto-2);
  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--sobe);
}
.redes__item .icone { width: 1.25rem; height: 1.25rem; }
.redes__item:focus-visible,
.redes__botao:focus-visible { border-radius: 50%; }

.redes__capa { display: none; }

/* ---------- Com JS: capa, botão e estados ---------- */

/* Reserva à direita o lugar onde o botão estaciona depois de deslizar.
   O recorte segura a capa dentro do componente: sem ele, aberta, ela cobre o vizinho.
   Folga de 1rem para sombra, foco e hover não serem cortados. */
.redes--js {
  padding-right: calc(var(--tam) + var(--vao));
  clip-path: inset(-1rem);
}
/* Fechada: sem sombra nos itens, senão ela vaza por baixo da capa */
.redes--js:not(.aberta) .redes__item { box-shadow: none; }

.redes--js .redes__capa {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 999px;
  background: var(--fundo);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.redes--js.aberta .redes__capa { transform: translateX(calc(100% + var(--vao))); }

.redes__botao {
  padding: 0;
  border: 0;
  background: var(--preto);
  color: var(--branco);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), background-color 0.2s ease;
}
.redes__botao .icone { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; }
.redes--js.aberta .redes__botao { transform: rotate(45deg); }

.redes--js .redes__item {
  filter: blur(2px);
  transform: scale(0.9) rotate(45deg);
  transition: filter 0.4s ease, transform 0.4s var(--sobe), color 0.2s ease, box-shadow 0.2s ease;
}
.redes--js.aberta .redes__item {
  filter: blur(0);
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .redes__item:hover,
  .redes--js.aberta .redes__item:hover {
    color: var(--texto);
    box-shadow: 0 12px 24px -10px rgba(10, 10, 11, 0.45);
    transform: scale(1.08);
  }
  .redes__botao:hover { background: var(--grafite); }
}

@media (min-width: 48rem) {
  .redes { --tam: 3.25rem; --vao: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .redes--js .redes__capa,
  .redes__botao,
  .redes--js .redes__item { transition: none; }
}