.skills-section {
  background: #0d0d0d;
  color: #fff;
  text-align: center;
  padding: 60px 20px;
  overflow: hidden;
}

.skills-section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #00ffcc;
}

.skills-scroll {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.skills-track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: scroll 40s linear infinite; /* langere duur voor smoothness */
}

.skill-card {
  flex: 0 0 auto;
  width: 120px;
  background: #1a1a1a;
  border-radius: 12px;
  padding: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* cursor: pointer; */ /* verwijderd zodat het niet lijkt alsof het klikbaar is */
  text-align: center;
}

.skill-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 255, 204, 0.3);
}

.skill-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
}

.skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: float 3s ease-in-out infinite;
}

.skill-card:hover img {
  animation: none; /* stop float animatie bij hover */
}

.skill-card p {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* horizontale infinite scroll animatie */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* schuift exact de helft = seamless loop */
}

/* pauzeer animatie als je er met de muis overheen gaat */
.skills-scroll:hover .skills-track {
  animation-play-state: paused;
}

/* subtiele float animatie van icons */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}