/* ==============================================
   buttons.css - Gradient Buttons, Shimmer Effects
   ============================================== */

/* Gradient Button */
.gradient-btn {
  background-image: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gradient-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
  color: #fff;
}

/* Import Button (green gradient, same style as gradient-btn) */
.import-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.import-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
  color: #fff;
}

/* Export Button (blue gradient, same style as import-btn) */
.export-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.export-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4);
  color: #fff;
}

/* Shimmer Animation for Fancy Buttons */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Pulse Animation for Status Indicators */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: translate(25%, 25%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(25%, 25%) scale(1.15);
  }
}