/**
 * ============================================================================
 * ARTICLE COMMENTS - EFFECTS STYLES
 * ============================================================================
 * Animations, transitions, and interactive effects for the comments component.
 * Provides smooth visual feedback and enhanced user experience.
 * ============================================================================
 */

/* ========================================================================== */
/* COMMENTS CONTAINER - SUBTLE HOVER EFFECT */
/* ========================================================================== */
.article-comments__container {
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.article-comments__container:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* ========================================================================== */
/* TITLE - FADE IN ANIMATION */
/* ========================================================================== */
.article-comments__title {
  animation: fadeInUp 0.6s ease-out;
}

/* ========================================================================== */
/* CONTAINER - FADE IN WITH DELAY */
/* ========================================================================== */
.article-comments__container {
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

/* ========================================================================== */
/* KEYFRAME ANIMATIONS */
/* ========================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}