/* effects.css */

/* Avatar hover */
.avatar:hover {
  transform: scale(1.05);
}

/* Skill hover */
.skill:hover {
  background: #4e4e7a;
  transform: translateY(-5px);
}

/* Button hover */
.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 1.2rem;
  background: #7d5fff;
  color: #fff;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #9b79ff;
}

/* Project card hover */
.project-card {
  transition: transform 0.3s ease, background 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  background: #4e4e7a;
}

/* Contact glow + shake */
#lienhe a:hover, 
#lienhe p:hover i {
  color: #00c3ff;
  text-shadow: 0 0 5px #00c3ff, 0 0 10px #00c3ff, 0 0 20px #00c3ff;
}

#lienhe p:hover i {
  transform: scale(1.2) rotate(-5deg);
  animation: iconShake 0.6s ease-in-out;
}

/* Icon shake animation */
@keyframes iconShake {
  0% { transform: scale(1.2) rotate(-5deg); }
  25% { transform: scale(1.2) rotate(5deg); }
  50% { transform: scale(1.2) rotate(-5deg); }
  75% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1.2) rotate(0deg); }
}
.project-card .btn {
  text-decoration: none; /* Bỏ gạch chân */
}

.project-card .btn:hover {
  text-decoration: none; /* Đảm bảo hover cũng không có gạch */
}
/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
  will-change: opacity, transform;
}


.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal.active img {
  transform: scale(1.03);
  transition: transform 0.8s ease;
}