/* ============================================================
   SKILLS — FANUCAiLeadCV
   Featured skill bars + four cluster pill grids.
   ============================================================ */

/* ----------------------------------------------------------
   FEATURED SKILLS — horizontal bar chart
---------------------------------------------------------- */

.skills__featured {
  max-width:        640px;
  margin-inline:    auto;
  margin-block-end: var(--space-16);
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-5);
}

/* Individual skill bar */
.skill-bar {}

.skill-bar__header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-block-end: var(--space-2);
}

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

.skill-bar__percent {
  font-size:      var(--text-xs);
  font-weight:    var(--font-semibold);
  color:          var(--color-accent);
  font-family:    var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

/* Progress bar track */
.skill-bar__track {
  height:        6px;
  background:    var(--color-bg-subtle);
  border-radius: var(--radius-full);
  overflow:      hidden;
  border:        1px solid var(--color-border);
}

/* Progress bar fill
   Starts at 0% — animates to --target-width when the #skills section
   receives .is-visible from scroll-reveal.js (scroll-reveal adds it to
   the section element which has data-reveal="slide-up").
   --target-width is set by Alpine: :style="'--target-width: ' + skill.percent + '%'"
*/
.skill-bar__fill {
  height:        100%;
  width:         0%;                       /* start hidden */
  background:    linear-gradient(
                   to right,
                   var(--color-accent),
                   var(--color-accent-hover)
                 );
  border-radius: var(--radius-full);
  transition:    width 1s var(--ease-out) 0.3s;
}

/* Animate to target width when the skills section is revealed */
.skills.is-visible .skill-bar__fill {
  width: var(--target-width, 100%);
}

/* Reduced motion: show bars at full width instantly */
@media (prefers-reduced-motion: reduce) {
  .skill-bar__fill {
    width:      var(--target-width, 100%);
    transition: none;
  }
}

/* ----------------------------------------------------------
   SKILL CLUSTERS GRID
   4 clusters in a 2×2 grid on desktop, stacked on mobile.
---------------------------------------------------------- */

.skills__clusters {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-8);
}

@media (max-width: 640px) {
  .skills__clusters {
    grid-template-columns: 1fr;
  }
}

/* Individual cluster */
.skills__cluster {
  background:    var(--color-surface-1);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-6) var(--space-8);
  transition:    border-color var(--duration-base) var(--ease-out);
}

.skills__cluster:hover {
  border-color: var(--color-border-strong);
}

.skills__cluster-title {
  font-size:        var(--text-sm);
  font-weight:      var(--font-bold);
  letter-spacing:   var(--tracking-wide);
  text-transform:   uppercase;
  color:            var(--color-accent);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-bottom:    1px solid var(--color-border);
}

/* Pill tags */
.skills__tags {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
}

.skills__tag {
  padding:        3px var(--space-3);
  background:     var(--color-bg-subtle);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-full);
  font-size:      var(--text-xs);
  font-weight:    var(--font-medium);
  color:          var(--color-text-secondary);
  line-height:    1.6;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color     var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out),
    transform        var(--duration-fast) var(--ease-out);
  cursor: default;
}

.skills__tag:hover {
  background-color: var(--color-accent-dim-2);
  border-color:     var(--color-border-accent);
  color:            var(--color-text-primary);
  transform:        translateY(-1px);
}