@tailwind base;
@tailwind components;
@tailwind utilities;

/* ====================== CONFIGURABLE CARD DIMENSIONS ====================== */
:root {
  --card-image-height: 256px;   /* ← CHANGE THIS to resize ALL portrait images */
                                /* Examples: 280px, 320px, 400px, etc. */
}

/* Progress bars & animations (unchanged from your original) */
.progress-bar {
  height: 20px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  transition: width 0.4s ease;
}

.most-desired {
  animation: borderGlow 4s ease-in-out infinite;
  box-shadow: 
    0 0 0 3px rgba(245, 158, 11, 0.3),
    0 0 0 6px rgba(245, 158, 11, 0.2),
    0 0 20px rgba(245, 158, 11, 0.6);
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,0.4), 0 0 20px rgba(245,158,11,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(245,158,11,0.2), 0 0 30px rgba(245,158,11,0.8); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

/* Portrait image styling */
.card-image {
  //height: var(--card-image-height);
  width: 100%;
  object-fit: cover;
}