/**
 * features.css
 * ─────────────────────────────────────────────────────────────
 * PURPOSE: Styles for "Feature Engineering" (Skills section).
 *          Skills are displayed as ML feature importance scores
 *          with animated progress bars.
 *
 * LOGIC: Each skill card has a progress bar that animates when
 *        scrolled into view (triggered by IntersectionObserver
 *        in animations.js). Hover reveals a tooltip with
 *        projects, years, and confidence level.
 *
 * CUSTOMIZATION: Add new skills in index.html with
 *                data-progress="N" (0–100) attributes.
 *                Skills are grouped by category.
 * ─────────────────────────────────────────────────────────────
 */

#features { background: var(--color-surface); }

/* ── CATEGORY TABS ─────────────────────────────────────────── */
.features__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-10);
}

.features__tab {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
}

.features__tab:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(139, 92, 246, 0.06);
}

.features__tab.active {
  color: white;
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

/* ── SKILLS GRID ───────────────────────────────────────────── */
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

/* ── SKILL CARD ────────────────────────────────────────────── */
.skill-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  transition: all var(--transition-base);
  overflow: hidden;
  cursor: default;
}

.skill-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.skill-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.skill-card:hover::before {
  transform: scaleX(1);
}

/* Card header row */
.skill-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.skill-card__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skill-card__icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all var(--transition-base);
}

.skill-card:hover .skill-card__icon {
  background: rgba(139, 92, 246, 0.18);
  transform: scale(1.1);
}

.skill-card__name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.skill-card__category {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Score badge */
.skill-card__score {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* Progress bar */
.skill-card__bar {
  margin-bottom: var(--space-3);
}

.skill-card__bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.bar-label-left {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bar-label-right {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-primary);
}

/* ── SKILL TOOLTIP (hover reveal) ─────────────────────────── */
.skill-card__tooltip {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--transition-base), max-height var(--transition-base);
}

.skill-card:hover .skill-card__tooltip {
  opacity: 1;
  max-height: 200px;
}

.tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.tooltip-row:first-child { border-top: none; }

.tooltip-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tooltip-value {
  font-size: var(--text-xs);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-align: right;
  max-width: 60%;
}

/* ── FEATURE IMPORTANCE CHART ──────────────────────────────── */
.features__chart {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-top: var(--space-10);
}

.features__chart-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.chart-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.chart-bar-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  width: 140px;
  flex-shrink: 0;
  text-align: right;
  font-weight: var(--weight-medium);
}

.chart-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.chart-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.chart-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 2.5s infinite;
}

.chart-bar-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  width: 36px;
  flex-shrink: 0;
  font-weight: var(--weight-semibold);
}