#team-members .container {
    color: initial;
}

.container h5 {
    color: initial;
}

.container p {
    color: initial;
}

p {
    margin-bottom: initial;
    line-height: initial;
}

.container h5{
    color: initial;
}

h5 {
    margin-top: initial;
    margin-bottom: initial;
    line-height: initial;
}

.member img {
    max-width: initial;
    max-height: initial;
    height: initial;
    border-radius: initial;
    transition: initial;
    display: initial;
    margin: initial;
    vertical-align: initial;
}


img:hover {
    transform: initial;
    opacity: initial;
}

.member img {
    display: initial;
    margin: initial;
    max-width: initial;
    height: initial;
    border-radius: initial;
    box-shadow: initial;
    transition: initial;
    text-align: initial;
}

.member img {
    display: initial;
    margin-left: initial;
    margin-right: initial;
    text-align: initial;
}
.member img {
    display: initial;
    margin-left: initial;
    margin-right: initial;
    text-align: initial;
}

/* Make images clickable for enlargement */
img[data-enlarge="true"] {
    cursor: initial;
    position: initial;
    z-index: initial;
    display: initial;
}

#T img,
#T .member img,
#T img[data-enlarge="true"] {
  display: initial ;
  margin: initial ;
  margin-left: initial ;
  margin-right: initial ;
  max-width: initial ;
  width: initial ;
  height: initial ;
  object-fit: initial ;
  vertical-align: initial ;
  border-radius: initial ;
  box-shadow: initial ;
  transition: initial ;
  cursor: initial ;
  /* text-align on <img> is meaningless; omitted */
}

.team-members {
  position: relative;
  width: 100%;
  height: 2500px; 
  overflow: auto;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2rem;
}

@media (max-width: 1300px) {
  .team-members{
    color: #ecf0f1;
    border-radius: 10px;

    box-shadow: 
      0 0 5px 5px rgba(255, 255, 255, 0.1),  /* Inner white glow */
      0 0 10px 10px rgba(255, 255, 255, 0.05), /* Middle white haze */
      0 0 15px 15px rgba(255, 255, 255, 0.02); /* Outer white mist */
  }
}

.team-members::-webkit-scrollbar {
  display: none;
}

#T .member {
  --card-w: 250px;           
  --card-h: 260px;
  --rd-size: 120%;
  --rd-pos: center;
  --rd-top: -15%;
  --rd-opacity: 0.67;        
  --rd-hover-opacity: 0.35;   

  --img-pos: center 14px;    
  --img-masked-opacity: .167;
  --img-height: 110%;

  --bio-width: 420px;         
  --bio-padding: 30px;
  --bio-img-w: calc(var(--bio-width) * 0.3);
  --bio-img-h: calc((var(--card-h) * 1.4*0.75) - 2 * var(--bio-padding));

  --bio-top: -10%;          
  --bio-fade-duration: 300ms;
  --mask-fade-duration: 240ms;
  --img-pan-duration: 360ms;
  --img-pan-ease: cubic-bezier(.2,.9,.18,1);
  --text-fade-delay: 120ms;

  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  overflow: visible;
  box-sizing: border-box;
}

 #T .member::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--rd-top);
  transform: translateX(-50%);
  width: 100%;
  height: 140%;
  background-image: url('https://static.igem.wiki/teams/5782/wikistuff/images/raindrop.webp');
  background-position: var(--rd-pos);
  background-size: var(--rd-size);
  background-repeat: no-repeat;
  opacity: var(--rd-opacity);
  pointer-events: none;
  z-index: 2;
  transition: opacity 240ms ease; 
}
#T .member:hover::before { opacity: var(--rd-hover-opacity); }

#T .member img.img-masked {
  width: 100%;
  height: var(--img-height);
  object-fit: cover;
  object-position: var(--img-pos);
  display: block;
  position: relative;
  z-index: 3;

  -webkit-mask-image: url('https://static.igem.wiki/teams/5782/wikistuff/images/raindrop.webp');
  -webkit-mask-size: var(--rd-size);
  -webkit-mask-position: var(--rd-pos);
  -webkit-mask-repeat: no-repeat;

  mask-image: url('https://static.igem.wiki/teams/5782/wikistuff/images/raindrop.webp');
  mask-size: var(--rd-size);
  mask-position: var(--rd-pos);
  mask-repeat: no-repeat;
  mask-mode: alpha;

  opacity: var(--img-masked-opacity);
  transition: opacity var(--mask-fade-duration) ease, object-position 200ms ease;
  pointer-events: none;
}

#T .member img.img-unmasked {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--img-height);
  object-fit: cover;
  object-position: var(--img-pos);
  z-index: 4;
  opacity: 0;
  transition:
    left var(--img-pan-duration) var(--img-pan-ease),
    top var(--img-pan-duration) var(--img-pan-ease),
    width var(--img-pan-duration) var(--img-pan-ease),
    height var(--img-pan-duration) var(--img-pan-ease),
    opacity var(--mask-fade-duration) ease;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
  
}

#T .member .bio {
  position: absolute;
  left: 50%;
  top: var(--bio-top);
  transform: translateX(-50%);
  width: var(--bio-width);
  height: calc((var(--card-h) * 1.4 * 0.7));
  box-sizing: border-box;
  padding: var(--bio-padding);
  border-radius: 10px;
  background-color: transparent;   
  overflow: hidden;
  z-index: 3;                    
  opacity: 0;
  transition: opacity var(--bio-fade-duration) var(--img-pan-ease);
  pointer-events: none;
  display: flex;
  align-items: center;
}

#T .member .bio .bio-bg {
  position: absolute;
  inset: 0;
  width: 107%;
  height: 107%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--bio-fade-duration) var(--img-pan-ease);
  z-index: 1;
  pointer-events: none;
}

#T .member .bio .bio-text {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  color: #000000;
  margin-left: calc(var(--bio-img-w) + var(--bio-padding)); 
  opacity: 0;
  transition: opacity 220ms ease var(--text-fade-delay);
  max-height: calc(100% - 2 * var(--bio-padding));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 50%;
  max-height: 100%;
  min-width: 0;
}

#T .member .bio .bio-text::-webkit-scrollbar {
  display: none;
}

#T .member .bio .bio-text {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

#T .member:hover img.img-masked {
  opacity: 0;
}
#T .member:hover img.img-unmasked {
  left: calc(50% - (var(--bio-width) / 2) + var(--bio-padding));
  top: calc(var(--bio-top) + var(--bio-padding)); 
  width: var(--bio-img-w);
  height: var(--bio-img-h);
  opacity: 1;
  z-index: 5; 
}
#T .member:hover .bio {
  opacity: 1;
  pointer-events: auto;
}
#T .member:hover .bio .bio-bg { opacity: 1; }
#T .member:hover .bio .bio-text { opacity: 1; }

/* fallback masks unsupported */
@supports not (mask-image: url('https://static.igem.wiki/teams/5782/wikistuff/images/raindrop.webp')) {
  #T .member img.img-masked { clip-path: ellipse(55% 70% at 50% 35%); }
  #T .member:hover img.img-masked { clip-path: none; opacity: 0; }
}

/* small niceties */
#T .member .bio h5 { margin: 10px 0 0 0; font-size: 0.66rem; font-weight: bold;}
#T .member .bio p  { margin: 0; font-size: 0.7rem; line-height:1.1; }
#T .member hr {
  margin-top: 0.2em; /* Adjust this value as needed */
  margin-bottom: 0.2em; /* Adjust this value as needed */
}



#T .decor-cloud {
  position: absolute;
  width: 840px;              
  height: 300px;              
  background-image: url('https://static.igem.wiki/teams/5782/wikistuff/images/cloud.webp'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.92;
  pointer-events: none;         
  z-index: 1;                   
  transform-origin: center;
  transition: opacity 200ms ease, transform 300ms ease;
}



#T .decor-cloud span {
    position: absolute;         
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    text-align: center;
    font-size: 60px;
    font-weight: 600;
    color: #1f2937;
    width: 80%;
}



#T .decor-cloud.cloud-1 {
  left: 20%;
  top: +30px;                  
  transform: scale(1.3);
  margin: 0 auto;
}

#T .decor-cloud.cloud-2 {
  left: 20%;
  top: 700px;                   
  transform: scale(1.1);
}

@keyframes cloud-drift {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  50%  { transform: translateX(-45%) translateY(-8px) scale(1.02); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}
#T .decor-cloud.drift { animation: cloud-drift 22s ease-in-out infinite; }

@media (max-width: 820px) {
  .decor-cloud { display: none; } /* hide to avoid crowding on tablets/phones */
}
/* alternative: scale down instead of hiding
@media (max-width: 820px) {
  .decor-cloud { transform: scale(0.7); opacity: 0.7; }
}
*/