/* ============================================================
   Global
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   Card hover lift
   ============================================================ */
.project-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  border-color: rgba(99, 102, 241, 0.5);
}

/* ============================================================
   Alpine.js toggle panel transition helper
   (complements x-transition, provides base state)
   ============================================================ */
.detail-panel {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ============================================================
   Fun facts list (rendered by HTMX)
   ============================================================ */
.fun-facts-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fun-fact-item {
  display: flex;
  gap: 0.75rem;
  color: #9ca3af; /* gray-400 */
  font-size: 0.9rem;
  line-height: 1.6;
}

.fun-fact-item::before {
  content: "✦";
  color: #6366f1; /* indigo-500 */
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   Skill tag hover
   ============================================================ */
.skill-tag {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.skill-tag:hover {
  background-color: rgba(99, 102, 241, 0.2);
  color: #c7d2fe; /* indigo-200 */
}