.overlay-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  cursor: pointer;
  transition: filter 0.3s ease; /* only animate what you use */
}

/* === Research (default) === */
.overlay-img:not(.projects-img):not(.publications-img):not(.contact-img) {
  transform: translate(calc(-50% + 138px), calc(-50% - 110px));
  width: 260px;
}

/* === Projects === */
.projects-img {
  transform: translate(calc(-50% - 120px), calc(-50% - 110px)) rotate(110deg);
  width: 80px;
}

/* === Publications === */
.publications-img {
  transform: translate(calc(-50% - 100px), calc(-50% + 30px)) rotate(-25deg);
  width: 265px;
}

/* === Contact === */
.contact-img {
  transform: translate(calc(-50% + 105px), calc(-50% + 10px)) rotate(210deg);
  width: 220px;
}

/* Hover (no movement ✔) */
.overlay-img:hover {
  filter: brightness(1.25) drop-shadow(0 0 12px rgba(120, 180, 255, 0.7));
}


/* === LABELS === */
.overlay-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 188px), calc(-50% - 200px));

  color: rgb(233, 209, 51);
  font-size: 20px;
  font-weight: bold;

  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.3s ease, text-shadow 0.3s ease;
  white-space: nowrap;
}

/* Hover (no movement ✔) */
.overlay-label:hover {
  filter: brightness(1.2);
  text-shadow: 0 0 6px rgba(255,255,255,0.5);
}

/* Individual label positions */
.projects-label {
  transform: translate(calc(-50% - 195px), calc(-50% - 190px));
  color: rgb(40, 165, 243);
}

.publications-label {
  transform: translate(calc(-50% - 210px), calc(-50% + 100px));
  color: rgb(213, 35, 35);
}

.contact-label {
  transform: translate(calc(-50% + 190px), calc(-50% + 60px));
  color: rgb(100, 220, 100);
}