/* BrandForge — Custom Styles */

/* Checkered transparency background for logo cards */
.checkerboard {
  background-image: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%);
  background-size: 16px 16px;
}

/* Color swatch copy feedback */
.copy-feedback {
  animation: fadeInOut 1.2s ease forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* Smooth transitions for section reveals */
.section-enter {
  animation: sectionFade 0.3s ease forwards;
}

@keyframes sectionFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* JSON syntax highlighting */
.json-key { color: #7dd3fc; }
.json-string { color: #86efac; }
.json-number { color: #fbbf24; }
.json-bool { color: #c084fc; }
.json-null { color: #6b7280; }

/* Scrollbar styling for JSON view */
#json-output::-webkit-scrollbar {
  height: 6px;
}
#json-output::-webkit-scrollbar-track {
  background: transparent;
}
#json-output::-webkit-scrollbar-thumb {
  background: #525252;
  border-radius: 3px;
}

/* Font specimen loading */
.font-specimen {
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* Logo card hover state */
.logo-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.logo-card:hover {
  border-color: #d4d4d4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Backdrop card hover */
.backdrop-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.backdrop-card:hover {
  border-color: #d4d4d4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.backdrop-card img {
  transition: transform 0.3s ease;
}
.backdrop-card:hover img {
  transform: scale(1.02);
}

/* Color swatch hover */
.color-swatch-wrapper {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.color-swatch-wrapper:hover {
  transform: translateY(-2px);
}

/* Download button */
#download-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}