/**
 * ============================================================================
 * MAIN HEADER EFFECTS - HOVER AND INTERACTION ANIMATIONS
 * ============================================================================
 * Smooth transitions and hover effects for header navigation elements.
 * ============================================================================
 */

/* ========================================================================== */
/* NAVIGATION LINK EFFECTS */
/* ========================================================================== */
.main-header__nav-link {
  transition: all 0.3s ease; /* Smooth transitions */
  position: relative; /* For underline pseudo-element */
}

/* Animated underline on hover */
.main-header__nav-link::after {
  content: ""; /* Empty content */
  position: absolute; /* Absolute positioning */
  bottom: -4px; /* Below text */
  left: 0; /* Start from left */
  width: 0; /* Hidden by default */
  height: 2px; /* Underline thickness */
  background-color: #ffffff; /* White underline */
  transition: width 0.3s ease; /* Animate width */
}

/* HOVER STATE - Dim text */
.main-header__nav-link:hover {
  color: rgba(255, 255, 255, 0.8); /* Slightly dimmed */
}

/* HOVER STATE - Show underline */
.main-header__nav-link:hover::after {
  width: 100%; /* Full width underline */
}

/* ACTIVE STATE - Press down effect */
.main-header__nav-link:active {
  transform: translateY(1px); /* Move down slightly */
}

/* ========================================================================== */
/* DISCOVER BUTTON EFFECTS */
/* ========================================================================== */
.main-header__discover-btn {
  transition: all 0.3s ease; /* Smooth transitions */
  position: relative; /* For ripple effect */
  overflow: hidden; /* Hide ripple overflow */
}

/* Ripple effect pseudo-element */
.main-header__discover-btn::before {
  content: ""; /* Empty content */
  position: absolute; /* Absolute positioning */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  width: 0; /* Hidden by default */
  height: 0; /* Hidden by default */
  border-radius: 50%; /* Circular ripple */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
  transform: translate(-50%, -50%); /* Center the circle */
  transition:
    width 0.6s ease,
    height 0.6s ease; /* Animate expansion */
}

/* HOVER STATE - Lift and shadow */
.main-header__discover-btn:hover {
  background-color: #2a2530; /* Slightly lighter background */
  transform: translateY(-2px); /* Lift up */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Drop shadow */
}

/* HOVER STATE - Expand ripple */
.main-header__discover-btn:hover::before {
  width: 300px; /* Large ripple */
  height: 300px; /* Large ripple */
}

/* ACTIVE STATE - Press down */
.main-header__discover-btn:active {
  transform: translateY(0); /* Reset position */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Smaller shadow */
}

/* ========================================================================== */
/* LOGO LINK EFFECTS */
/* ========================================================================== */
.main-header__logo-link {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease; /* Smooth transitions */
}

/* HOVER STATE - Dim and scale up */
.main-header__logo-link:hover {
  opacity: 0.8; /* Slightly transparent */
  transform: scale(1.05); /* Scale up 5% */
}

/* ACTIVE STATE - Press down */
.main-header__logo-link:active {
  transform: scale(0.98); /* Scale down slightly */
}
