/**
 * ============================================================================
 * ARTICLE DISPLAY EFFECTS - INTERACTIVE ELEMENT ANIMATIONS
 * ============================================================================
 * Hover effects for category badge and empty state link.
 * ============================================================================
 */

/* ========================================================================== */
/* CATEGORY BADGE EFFECTS */
/* ========================================================================== */
.article-display__category {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* CATEGORY HOVER STATE - Lift */
.article-display__category:hover {
  background-color: #2a2530; /* Lighter background */
  transform: translateY(-2px); /* Lift up */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

/* ========================================================================== */
/* EMPTY STATE LINK EFFECTS */
/* ========================================================================== */
.article-display__empty-link {
  transition: all 0.3s ease; /* Smooth transitions */
  position: relative; /* For ripple effect */
  overflow: hidden; /* Hide ripple overflow */
}

/* Ripple effect pseudo-element */
.article-display__empty-link::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 */
}

/* LINK HOVER STATE - Lift and shadow */
.article-display__empty-link:hover {
  background-color: #2a2530; /* Lighter background */
  transform: translateY(-2px); /* Lift up */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Drop shadow */
}

/* LINK HOVER STATE - Expand ripple */
.article-display__empty-link:hover::before {
  width: 300px; /* Large ripple */
  height: 300px; /* Large ripple */
}