/* Ensure bio content is hidden initially */
.bio {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease; /* Fade + Slide */
  transform: translateY(-10px); /* Start above and slide down */

  /* Added styles for bio content */
  background-color: white; /* Transparent background */
  padding: 15px;
  border: 1px solid #ddd;    /* Light border */
  border-radius: 8px;        /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
  margin-top: 10px;          /* Space from the link */
}

/* When bio is shown, it fades in and slides into place */
.bio.show {
  display: block;
  opacity: 1;
  transform: translateY(0); /* Reset position */
}

/* Handle users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bio {
    transition: none; /* Disable transition if user prefers reduced motion */
    transform: none;  /* No movement effect */
  }
}