/* CONTACT — black hole */
/* ---------- CONTACT / BLACK HOLE ---------- */
#contact { text-align: center; }

#blackhole { position: relative; width: 180px; height: 180px; cursor: pointer; }

#blackhole:focus-visible { outline: 3px solid var(--accent2); outline-offset: 24px; border-radius: 50%; }

#bhCore {
  position: absolute; inset: 30%;
  background: #000; border: 6px solid #fff; border-radius: 50%;
}
.ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 7px dashed var(--accent);
  animation: spin linear infinite;
}
.r1 { animation-duration: 8s;  inset: 12%; }
.r2 { animation-duration: 14s; inset: 0%;   border-color: var(--accent2); }
.r3 { animation-duration: 20s; inset: -16%; border-color: #e0182d; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#contactLabel {
  margin-top: 40px;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;
}

/* social links: same pill as the resume button */
#socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 48px;
  padding: 0;
  list-style: none;
}
#socials .resume-btn { font-size: 13px; padding: 6px 16px; }

@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }