/* Contact — three large circular icon buttons centered on the
 * canvas. Unified white icons at rest; each tile smoothly fades
 * to its own brand colour on hover. No text, no rows, no copy
 * buttons — the icon IS the action.
 *
 *   ⬡   ⬡   ⬡
 *  mail  WA   X
 */

.contact__icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 36px);
  margin-block-start: clamp(24px, 4vw, 40px);
}

.contact-icon {
  --hover: var(--text-1);
  --hover-bg: rgba(255, 255, 255, 0.05);
  --hover-border: var(--line-strong);

  position: relative;
  width: clamp(72px, 8vw, 92px);
  height: clamp(72px, 8vw, 92px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: #ffffff;
  text-decoration: none;
  transition: color 320ms var(--ease-soft),
              background 320ms var(--ease-soft),
              border-color 320ms var(--ease-soft),
              transform 280ms var(--ease-out),
              box-shadow 320ms var(--ease-soft);
  isolation: isolate;
}

/* SVG fills inherit currentColor — the icon mark itself is the
 * coloured surface, not the chip background. */
.contact-icon svg {
  width: clamp(30px, 3.6vw, 40px);
  height: clamp(30px, 3.6vw, 40px);
  display: block;
  transition: transform 320ms var(--ease-soft);
}

.contact-icon::before {
  /* a soft halo behind the icon that lights up on hover with
   * the target brand colour. */
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hover) 0%, transparent 60%);
  opacity: 0;
  filter: blur(18px);
  z-index: -1;
  transition: opacity 320ms var(--ease-soft);
}

.contact-icon:hover,
.contact-icon:focus-visible {
  color: var(--hover);
  background: var(--hover-bg);
  border-color: var(--hover-border);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.4);
}
.contact-icon:hover::before { opacity: 0.40; }
.contact-icon:hover svg { transform: scale(1.06); }

/* Brand-specific hover colours. */
.contact-icon--email {
  --hover: var(--brand);
  --hover-bg: rgba(19, 181, 243, 0.08);
  --hover-border: rgba(19, 181, 243, 0.50);
}
.contact-icon--whatsapp {
  --hover: #25D366;
  --hover-bg: rgba(37, 211, 102, 0.08);
  --hover-border: rgba(37, 211, 102, 0.50);
}
.contact-icon--x {
  --hover: #ffffff;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --hover-border: rgba(255, 255, 255, 0.60);
}