/**
 * ============================================================================
 * SEARCH POPUP EFFECTS - MODAL SEARCH INTERFACE ANIMATIONS
 * ============================================================================
 * Complex animations for search modal including slide-in, hover effects, and transitions.
 * ============================================================================
 */

/* ========================================================================== */
/* CLOSE BUTTON EFFECTS */
/* ========================================================================== */
.search-popup__close {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* CLOSE BUTTON HOVER STATE - Rotate and scale */
.search-popup__close:hover {
  color: rgba(255, 255, 255, 0.7); /* Dimmed white */
  transform: rotate(90deg) scale(1.1); /* Rotate and grow */
}

/* CLOSE BUTTON ACTIVE STATE - Press down */
.search-popup__close:active {
  transform: rotate(90deg) scale(0.95); /* Rotate and shrink */
}

/* ========================================================================== */
/* SEARCH INPUT EFFECTS */
/* ========================================================================== */
.search-popup__input {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* INPUT FOCUS STATE - Darken and glow */
.search-popup__input:focus {
  background-color: #0a0a0a; /* Darker background */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); /* Subtle glow */
}

/* ========================================================================== */
/* SEARCH BUTTON EFFECTS */
/* ========================================================================== */
.search-popup__search-btn {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* BUTTON HOVER STATE - Lighten and scale */
.search-popup__search-btn:hover {
  background-color: #2a2530; /* Lighter background */
  transform: scale(1.05); /* Scale up */
}

/* BUTTON ACTIVE STATE - Press down */
.search-popup__search-btn:active {
  transform: scale(0.95); /* Scale down */
}

/* SEARCH ICON EFFECTS */
.search-popup__search-icon {
  transition: transform 0.3s ease; /* Smooth transform */
}

/* ICON HOVER STATE - Scale up */
.search-popup__search-btn:hover .search-popup__search-icon {
  transform: scale(1.1); /* Grow icon */
}

/* ========================================================================== */
/* CATEGORY ITEM EFFECTS */
/* ========================================================================== */
.search-popup__category-item {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* CATEGORY HOVER STATE - Lift and shadow */
.search-popup__category-item:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Lighter background */
  transform: translateY(-2px); /* Lift up */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

/* CATEGORY ACTIVE STATE - Press down */
.search-popup__category-item:active {
  transform: translateY(0); /* Reset position */
}

/* CATEGORY EMOJI EFFECTS */
.search-popup__category-emoji {
  transition: transform 0.3s ease; /* Smooth transform */
}

/* EMOJI HOVER STATE - Scale and rotate */
.search-popup__category-item:hover .search-popup__category-emoji {
  transform: scale(1.2) rotate(10deg); /* Grow and tilt */
}

/* CATEGORY NAME EFFECTS */
.search-popup__category-name {
  transition: color 0.3s ease; /* Smooth color change */
}

/* NAME HOVER STATE - Brighten */
.search-popup__category-item:hover .search-popup__category-name {
  color: rgba(255, 255, 255, 1); /* Pure white */
}

/* ========================================================================== */
/* SEARCH RESULT ITEM EFFECTS */
/* ========================================================================== */
.search-popup__result-item {
  transition: all 0.3s ease; /* Smooth transitions */
}

/* RESULT HOVER STATE - Lighten and shadow */
.search-popup__result-item:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Lighter background */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

/* RESULT CATEGORY EFFECTS */
.search-popup__result-category {
  transition: color 0.3s ease; /* Smooth color change */
}

/* CATEGORY HOVER STATE - Brighten */
.search-popup__result-item:hover .search-popup__result-category {
  color: rgba(255, 255, 255, 0.8); /* Brighter white */
}

/* RESULT TITLE EFFECTS */
.search-popup__result-title {
  transition: color 0.3s ease; /* Smooth color change */
}

/* TITLE HOVER STATE - Brighten */
.search-popup__result-item:hover .search-popup__result-title {
  color: rgba(255, 255, 255, 1); /* Pure white */
}

/* RESULT EXCERPT EFFECTS */
.search-popup__result-excerpt {
  transition: color 0.3s ease; /* Smooth color change */
}

/* EXCERPT HOVER STATE - Brighten */
.search-popup__result-item:hover .search-popup__result-excerpt {
  color: rgba(255, 255, 255, 0.9); /* Brighter white */
}

/* RESULT DATE EFFECTS */
.search-popup__result-date {
  transition: color 0.3s ease; /* Smooth color change */
}

/* DATE HOVER STATE - Brighten */
.search-popup__result-item:hover .search-popup__result-date {
  color: rgba(255, 255, 255, 0.7); /* Brighter white */
}

/* ========================================================================== */
/* POPUP CONTAINER ANIMATION */
/* ========================================================================== */
.search-popup__container {
  transition: transform 0.3s ease; /* Smooth transform */
}

/* CONTAINER SLIDE-IN ANIMATION */
.search-popup--active .search-popup__container {
  animation: popupSlideIn 0.3s ease; /* Slide in from top */
}

/* SLIDE-IN KEYFRAMES - Opacity and position */
@keyframes popupSlideIn {
  from {
    transform: translateY(-20px); /* Above final position */
    opacity: 0; /* Invisible */
  }
  to {
    transform: translateY(0); /* Final position */
    opacity: 1; /* Fully visible */
  }
}

/* ========================================================================== */
/* OVERLAY FADE-IN ANIMATION */
/* ========================================================================== */
.search-popup__overlay {
  transition: opacity 0.3s ease; /* Smooth opacity */
}

/* OVERLAY FADE-IN ANIMATION */
.search-popup--active .search-popup__overlay {
  animation: overlayFadeIn 0.3s ease; /* Fade in */
}

/* FADE-IN KEYFRAMES - Opacity only */
@keyframes overlayFadeIn {
  from {
    opacity: 0; /* Invisible */
  }
  to {
    opacity: 1; /* Fully visible */
  }
}