/* 100% viewport sense scroll */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* Mantens el teu fons */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("./image/institut.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.grid-container {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 boles per fila */
  grid-template-rows: repeat(4, 1fr);    /* 4 files */

  place-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding: clamp(8px, 2vw, 24px);

  box-sizing: border-box;
}


/* Bola adaptable perquè càpiga sempre */
.bola {
  width: clamp(60px, 12vmin, 150px);
  height: clamp(60px, 12vmin, 150px);

  background-color: #fff;
  border-radius: 50%;
  background-size: cover;
  background-position: center;

  position: relative;
  cursor: pointer;
  transition: transform 0.3s, opacity 0.3s;
}


.bola:nth-child(1) { background-image: url('avatars/avatar2526/avatars/adria.png'); }
.bola:nth-child(2) { background-image: url('avatars/avatar2526/avatars/amine.png'); }
.bola:nth-child(3) { background-image: url('avatars/avatar2526/avatars/cristian.png'); }
.bola:nth-child(4) { background-image: url('avatars/avatar2526/avatars/edu.png'); }
.bola:nth-child(5) { background-image: url('avatars/avatar2526/avatars/eloi.png'); }
.bola:nth-child(6) { background-image: url('avatars/avatar2526/avatars/erica.png'); }
.bola:nth-child(7) { background-image: url('avatars/avatar2526/avatars/ericn.png'); }
.bola:nth-child(8) { background-image: url('avatars/avatar2526/avatars/ferran.png'); }
.bola:nth-child(9) { background-image: url('avatars/avatar2526/avatars/hayat.jpg'); }
.bola:nth-child(10) { background-image: url('avatars/avatar2526/avatars/nico.png'); }
.bola:nth-child(11) { background-image: url('avatars/avatar2526/avatars/nil.png'); }
.bola:nth-child(12) { background-image: url('avatars/avatar2526/avatars/pau.png'); }
.bola:nth-child(13) { background-image: url('avatars/avatar2526/avatars/pol.png'); }
.bola:nth-child(14) { background-image: url('avatars/avatar2526/avatars/victor.png'); }
.bola:nth-child(15) { background-image: url('avatars/avatar2526/avatars/sergi.png'); }
.bola:nth-child(16) { background-image: url('avatars/avatar2526/avatars/cesc.png'); }
.bola:nth-child(17) { background-image: url('avatars/avatar2526/avatars/carlos.png'); }
.bola:nth-child(18) { background-image: url('avatars/avatar2526/avatars/ericv.png'); }
.bola:nth-child(19) { background-image: url('avatars/avatar2526/avatars/denis.png'); }
.bola:nth-child(20) { background-image: url('avatars/avatar2526/avatars/alex.png'); }





.bola-generated {
  width: clamp(40px, 8vmin, 100px);
  height: clamp(40px, 8vmin, 100px);

  position: absolute;
  top: 50%;
  left: 50%;

  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.3s, transform 0.3s;
}

/* Posicions relatives i simètriques */
.bola-generated.left {
  transform: translate(-50%, -50%) translateX(-140%) scale(0);
}

.bola-generated.right {
  transform: translate(-50%, -50%) translateX(140%) scale(0);
}

/* Estat visible */
.bola-generated.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.bola-generated.left.show {
  transform: translate(-50%, -50%) translateX(-140%) scale(1);
}

.bola-generated.right.show {
  transform: translate(-50%, -50%) translateX(140%) scale(1);
}