/* Custom styles for BGRemoverAPI - Enterprise DevTools Aesthetic */

html {
  scroll-behavior: smooth;
}

/* Subtle tech grid background */
.tech-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Ambient glow blobs */
.radial-glow {
  background: radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.12) 0%, rgba(6, 78, 59, 0.04) 50%, transparent 80%);
}

.radial-glow-cyan {
  background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
}

/* Bento card with subtle border highlight */
.bento-card {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  border-color: rgba(16, 185, 129, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px -5px rgba(16, 185, 129, 0.15);
}

/* Checkerboard pattern for transparent PNGs */
.checkerboard {
  background-color: #111827;
  background-image:
    linear-gradient(45deg, #0d131f 25%, transparent 25%),
    linear-gradient(-45deg, #0d131f 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0d131f 75%),
    linear-gradient(-45deg, transparent 75%, #0d131f 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Slider Handle touch ergonomics */
#sliderHandle {
  touch-action: none;
  user-select: none;
  transition: opacity 0.15s ease;
}

#sliderHandle:hover div,
#sliderHandle:active div {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
}

/* Comparison Box */
#comparisonBox {
  user-select: none;
  touch-action: pan-y;
}

/* Details summary remove default arrow */
details summary::-webkit-details-marker {
  display: none;
}
details summary {
  list-style: none;
}

/* Code tab transitions */
.tab-btn {
  transition: all 0.15s ease-in-out;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0B0F17;
}
::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #374151;
}