/**
 * ============================================================================
 * CONTENT LOADER EFFECTS - LOAD MORE BUTTON ANIMATIONS
 * ============================================================================
 * Complex animations including ripple effect, icon rotation, and content fade-in.
 * ============================================================================
 */

/* ========================================================================== */
/* LOAD MORE BUTTON EFFECTS */
/* ========================================================================== */
.content-loader__btn {
  transition: all 0.3s ease; /* Smooth transitions */
  position: relative; /* For ripple effect */
  overflow: hidden; /* Hide ripple overflow */
}

/* Ripple effect pseudo-element */
.content-loader__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 */
}

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

/* BUTTON HOVER STATE - Expand ripple */
.content-loader__btn:hover::before {
  width: 300px; /* Large ripple */
  height: 300px; /* Large ripple */
}

/* BUTTON ACTIVE STATE - Press down */
.content-loader__btn:active {
  transform: translateY(0); /* Reset position */
}

/* DISABLED BUTTON - No hover effects */
.content-loader__btn:disabled:hover {
  transform: none; /* No movement */
  background-color: #211d25; /* Original background */
}

/* ========================================================================== */
/* ICON EFFECTS */
/* ========================================================================== */
.content-loader__icon {
  transition: transform 0.3s ease; /* Smooth rotation */
}

/* ICON HOVER STATE - Rotate */
.content-loader__btn:hover .content-loader__icon {
  transform: rotate(180deg); /* Flip icon */
}

/* ICON LOADING STATE - Spin animation */
.content-loader__btn--loading .content-loader__icon {
  animation: spin 1s linear infinite; /* Continuous spin */
}

/* SPIN ANIMATION - 360 degree rotation */
@keyframes spin {
  from {
    transform: rotate(0deg); /* Start position */
  }
  to {
    transform: rotate(360deg); /* Full rotation */
  }
}

/* ========================================================================== */
/* MESSAGE FADE-IN EFFECT */
/* ========================================================================== */
.content-loader__message {
  animation: fadeIn 0.5s ease-in forwards; /* Fade in animation */
  opacity: 1; /* Final opacity */
}

/* FADE-IN ANIMATION - Opacity and slide up */
@keyframes fadeIn {
  from {
    opacity: 0; /* Invisible */
    transform: translateY(-10px); /* Above final position */
  }
  to {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Final position */
  }
}

/* ========================================================================== */
/* ARTICLE SLIDE-IN EFFECT */
/* ========================================================================== */
.content-loader__articles .recent-highlights__item {
  animation: slideInUp 0.4s ease-out; /* Slide up animation */
}

/* SLIDE-IN ANIMATION - Opacity and slide up */
@keyframes slideInUp {
  from {
    opacity: 0; /* Invisible */
    transform: translateY(20px); /* Below final position */
  }
  to {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Final position */
  }
}
