.icons-container {
  position: relative;
  width: 100%;
  height: 100vh; 
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.1s, margin 1s;
}

.icon:hover { 
  animation-play-state: paused;
  transform: translate(0px, 0px) scale(1.3);
}

.icon-img-wrapper {
  width: 100%;
  height: 130px;
}

.icon-img-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.05s linear;
  display: block;
  position: relative; 
}

.icon img[hidden] {
  display: none !important;
}

.icon p {
  margin-top: 5px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}

.icon:hover p {
  color: #9D72E4;
}

.icon a {
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon a p {
  text-decoration: none !important;
  border: none !important;
  color: #ffffff;
  margin-top: 5px;
  font-size: 20px;
  text-align: center;
  display: block;
}

@keyframes icon_Idle {
  0%   { transform: translate(calc(var(--x0, 0px)), calc(var(--y0, 0px))); }
  10%  { transform: translate(calc(var(--x1, 2px)), calc(var(--y1, -2px))); }
  20%  { transform: translate(calc(var(--x2, 4px)), calc(var(--y2, -3px))); }
  30%  { transform: translate(calc(var(--x3, 6px)), calc(var(--y3, -1px))); }
  40%  { transform: translate(calc(var(--x4, 5px)), calc(var(--y4, 2px))); }
  50%  { transform: translate(calc(var(--x5, 3px)), calc(var(--y5, 4px))); }
  60%  { transform: translate(calc(var(--x6, 0px)), calc(var(--y6, 5px))); }
  70%  { transform: translate(calc(var(--x7, -3px)), calc(var(--y7, 4px))); }
  80%  { transform: translate(calc(var(--x8, -5px)), calc(var(--y8, 2px))); }
  90%  { transform: translate(calc(var(--x9, -4px)), calc(var(--y9, -1px))); }
  100% { transform: translate(calc(var(--x10, 0px)), calc(var(--y10, 0px))); }
}

@keyframes iconSpawn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.icon-spawn {
  animation: iconSpawn 0.3s ease-in-out forwards;
}

.icon-Idle {
  animation-name: icon_Idle;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 8s; 
}

.icon-Idle:hover {
  animation-play-state: paused;
}