/* O canvas de partículas (.fire-canvas) sobra para os lados do menu:
   recorta na horizontal para não alargar a página no celular */
.contact {
  overflow-x: clip;
}

.contact-content {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-xl);
  letter-spacing: 0.5px;
}

/* Menu radial de contato. Sem JS ele já nasce aberto (os links nunca ficam inacessíveis);
   com JS começa fechado e o contact.js abre sozinho quando a seção aparece */
.contact-container {
  --contact-btn-size: 64px;
  --contact-closed-size: 200px;
  /* Abaixo de 480px o anel acompanha a largura da tela. Os botões das pontas ficam
     metade para fora do anel, então desconta o padding do .l-container e um botão inteiro */
  --contact-open-size: min(350px, 100vw - 2 * var(--spacing-md) - var(--contact-btn-size));
  position: relative;
  width: var(--contact-open-size);
  height: var(--contact-open-size);
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s var(--ease-standard);
  transition-property: width, height;
}

.js .contact-container:not(.expanded) {
  width: var(--contact-closed-size);
  height: var(--contact-closed-size);
}

/* Sem JS o botão não faria nada: só aparece com JS */
.contact-toggle-btn {
  display: none;
  background: var(--color-bg-surface);
  color: var(--color-primary-ink);
  font-weight: 700;
  font-size: 2rem;
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-glow-border);
  transition: 0.3s var(--ease-standard);
  transition-property: background-color, border-color, box-shadow, transform;
  box-shadow: 0 0 16px var(--color-glow-soft), inset 0 0 20px var(--color-glow-faint);
  position: relative;
  z-index: 10;
}

.js .contact-toggle-btn {
  display: flex;
}

.contact-toggle-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-glow-subtle);
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

.contact-toggle-btn:hover {
  background: var(--color-glow-subtle);
  box-shadow: 0 0 24px var(--color-glow-soft), inset 0 0 20px var(--color-glow-faint);
  transform: scale(1.05);
}

.contact-toggle-btn:active {
  transform: scale(0.98);
}

.contact-toggle-btn.active {
  border-color: var(--color-glow-strong);
}

.toggle-icon {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.3s var(--ease-standard);
  display: inline-block;
}

.contact-toggle-btn.active .toggle-icon {
  transform: rotate(45deg);
}

.contact-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.contact-button {
  background: var(--color-bg-surface);
  color: var(--color-text-main);
  font-weight: 700;
  width: var(--contact-btn-size);
  height: var(--contact-btn-size);
  border: 1px solid var(--color-contact-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  transition: 0.4s var(--ease-spring);
  transition-property: opacity, visibility, transform, background-color, color, border-color, box-shadow;
  pointer-events: auto;
  box-shadow: var(--shadow-contact);
}

/* Fechado: invisível e fora da ordem do Tab (visibility só troca no fim da transição) */
.js .contact-actions:not(.active) .contact-button {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.contact-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.contact-button span {
  white-space: nowrap;
  font-weight: 500;
}

.contact-button:nth-child(1) {
  top: 35%;
  left: 0%;
}

.contact-button:nth-child(2) {
  top: 5%;
  left: 30%;
}

.contact-button:nth-child(3) {
  top: 5%;
  left: 70%;
}

.contact-button:nth-child(4) {
  top: 35%;
  left: 100%;
}

.contact-button:nth-child(5) {
  top: 85%;
  left: 50%;
}

/* Abertura em cascata */
.contact-actions.active .contact-button:nth-child(1) { transition-delay: 0.1s; }
.contact-actions.active .contact-button:nth-child(2) { transition-delay: 0.2s; }
.contact-actions.active .contact-button:nth-child(3) { transition-delay: 0.3s; }
.contact-actions.active .contact-button:nth-child(4) { transition-delay: 0.4s; }
.contact-actions.active .contact-button:nth-child(5) { transition-delay: 0.5s; }

.contact-button:hover {
  background: var(--color-glow-subtle);
  border-color: var(--color-glow-border);
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 28px var(--color-glow), var(--shadow-contact);
  text-shadow: 0 0 8px var(--color-glow-strong);
}

@media (min-width: 480px) {
  .contact-container {
    --contact-btn-size: 75px;
    --contact-closed-size: 240px;
    --contact-open-size: 400px;
  }

  .contact-toggle-btn {
    width: 90px;
    height: 90px;
  }

  .contact-button {
    font-size: 0.75rem;
  }
}

@media (min-width: 640px) {
  .contact-container {
    --contact-btn-size: 85px;
    --contact-closed-size: 280px;
    --contact-open-size: 480px;
  }

  .contact-toggle-btn {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 768px) {
  .contact-container {
    --contact-btn-size: 95px;
    --contact-closed-size: 300px;
    --contact-open-size: 550px;
  }

  .contact-toggle-btn {
    width: 110px;
    height: 110px;
  }

  .contact-button {
    font-size: 0.8rem;
  }
}