.avatar-swap {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-block;
  margin: auto;
}

.avatar-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

/* avatar styling */
.avatar {
  object-fit: cover;
  border-radius: 50%;
}

/* QR styling */
.qr {
  opacity: 0;
  /* VERY important for SVG */
  object-fit: contain; 
  /* gives the QR breathing room */
  padding: 1%;       
  /* ensures contrast */
  background: white;   
  border-radius: 8px;
}

.avatar-swap:hover .avatar,
.avatar-swap:focus-visible .avatar {
  opacity: 0;
}

.avatar-swap:hover .qr,
.avatar-swap:focus-visible .qr {
  opacity: 1;
}