/**
 * skills.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Skills section: two display modes per category:
 *   1. "bars"   — horizontal animated progress bars with percentage labels
 *   2. "radial" — circular SVG progress rings with percentage in center
 *
 * Display mode is set per-category in site-config.json.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── SKILLS CONTAINER ───────────────────────────────────────────
   Grid of skill category cards.
──────────────────────────────────────────────────────────────── */
.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

/* ── SKILL CATEGORY CARD ────────────────────────────────────────
   Card wrapping a group of related skills.
──────────────────────────────────────────────────────────────── */
.skill-category {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}

.skill-category:hover {
  border-color: var(--color-accent-border);
  transform: translateY(-2px);
}

/* Category header: icon + name */
.skill-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.skill-category-icon {
  width: 36px;
  height: 36px;
  background: var(--color-accent-dim);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

.skill-category-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* ── BAR DISPLAY MODE ───────────────────────────────────────────
   Horizontal progress bars with label and percentage.
──────────────────────────────────────────────────────────────── */
.skills-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.skill-bar-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skill-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skill-bar-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.skill-bar-percent {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  font-family: var(--font-mono);
}

/* Track (background) */
.skill-bar-track {
  width: 100%;
  height: 6px;
  background: var(--color-bg-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Fill (animated) — width set via JS data attribute */
.skill-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  width: 0%; /* Starts at 0, animated to target by skills.js */
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on the fill */
.skill-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shimmer 2s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* ── RADIAL DISPLAY MODE ────────────────────────────────────────
   Circular SVG progress rings arranged in a grid.
──────────────────────────────────────────────────────────────── */
.skills-radials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-4);
  justify-items: center;
}

.skill-radial-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* SVG container */
.skill-radial-svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg); /* Start from top */
}

/* Background circle */
.skill-radial-track {
  fill: none;
  stroke: var(--color-bg-primary);
  stroke-width: 6;
}

/* Progress circle — stroke-dashoffset animated by skills.js */
.skill-radial-fill {
  fill: none;
  stroke: url(#radial-gradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 220; /* Circumference of r=35 circle: 2π×35 ≈ 220 */
  stroke-dashoffset: 220; /* Starts fully hidden */
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Percentage text in center */
.skill-radial-center {
  position: relative;
  width: 80px;
  height: 80px;
  margin-top: -80px; /* Overlap the SVG */
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-radial-percent {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  font-family: var(--font-mono);
  /* Counter animation handled by JS */
}

.skill-radial-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: var(--leading-snug);
}

/* SVG gradient definition (injected once by skills.js) */
.radial-gradient-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}