/* ===== NAV ===== */
/* NAV LINK HOVER EFFECT */

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.nav-link.active {
  color: #84cc16;
}

.nav-link.active::after {
  width: 100%;
}

.nav-link {
  transition: color 0.3s ease;
}
.nav-link.text-lime-500::after {
  width: 100%;
}


/* ==== NEW HOVER ===== */
.nav-link:hover {
  color: #84cc16; /* lime-500 */
}

.nav-link:hover::after {
  width: 100%;
}

/* ==== NEW NAV FADE ===== */
header {
  animation: fadeDown 0.6s ease forwards;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* PAGE TRANSITIONS */

.page-transition {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.page-loaded {
  opacity: 1;
  transform: translateY(0);
}


/* ===== port filter styles nav ===== */
.filter-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.filter-btn.active {
  background: black;
  color: white;
}

/* ===== HERO ===== */


/* ==== TEXT REVEAL ANIMATION ===== */

#hero-title {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 0.8s ease forwards;
}

#hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 1s ease forwards;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*------ PROJECT NAV ---*/
.project-nav a {
  position: relative;
}

.project-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.project-nav a:hover::after {
  width: 100%;
}

/* ===== FOOTER ===== */