/* ============================================================
   LANGUAGES — FANUCAiLeadCV
   Three language pills with SVG circular progress rings.
   Values baked so rings render without JS.
   Phase 5.6: animate stroke-dashoffset from full to target on scroll.
   ============================================================ */

/* ----------------------------------------------------------
   LANGUAGES LIST
---------------------------------------------------------- */

.languages__list {
  list-style:      none;
  display:         flex;
  justify-content: center;
  gap:             var(--space-12);
  flex-wrap:       wrap;
  max-width:       640px;
  margin-inline:   auto;
}

@media (max-width: 480px) {
  .languages__list {
    gap: var(--space-8);
  }
}

/* ----------------------------------------------------------
   LANGUAGE PILL
   Vertical layout: ring → language name → level label.
---------------------------------------------------------- */

.language-pill {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  text-align:     center;
}

/* ----------------------------------------------------------
   SVG RING
   r=40, circumference ≈ 251.2px
   stroke-dashoffset baked by Alpine or the no-JS fallback.
---------------------------------------------------------- */

.lang-ring {
  display:         block;
  overflow:        visible;
  /* Subtle ambient glow behind ring */
  filter: drop-shadow(0 0 8px rgba(255, 203, 6, 0.25));
  transition: filter var(--duration-base) var(--ease-out);
}

.language-pill:hover .lang-ring {
  filter: drop-shadow(0 0 16px rgba(255, 203, 6, 0.50));
}

/* Track ring — dim background circle */
.lang-ring__track {
  color: var(--color-bg-subtle);
  stroke: var(--color-bg-subtle);
}

/* Progress ring — FANUC yellow
   CSS overrides the SVG presentation attribute set by Alpine, starting
   all rings at full offset (hidden). When timeline.js detects .is-visible
   on the list container, it sets an inline style → target offset, and the
   CSS transition handles the drawing animation.
   CSS beats SVG attributes in specificity, but inline styles (set by JS)
   beat CSS — so the animation sequence is:
     1. CSS: stroke-dashoffset: 251.2 (hidden, overrides Alpine attribute)
     2. JS: el.style.strokeDashoffset = target (triggers transition)
*/
.lang-ring__progress {
  stroke:             var(--color-accent);
  stroke-dashoffset:  251.2;              /* hidden — full circumference */
  transition:         stroke-dashoffset 1.2s var(--ease-out) 0.2s;
}

/* Reduced motion: skip animation — show rings at final values.
   We reset the offset override so the Alpine-set SVG attribute shows through.
   Since we remove the CSS override and there's no inline style yet,
   the browser uses the SVG attribute value (correct target). */
@media (prefers-reduced-motion: reduce) {
  .lang-ring__progress {
    stroke-dashoffset: unset;  /* let Alpine SVG attribute value show */
    transition: none;
  }
}

/* Percentage text inside the ring */
.lang-ring__percent-text {
  fill:           var(--color-text-primary);
  font-size:      18px;
  font-weight:    700;
  font-family:    var(--font-sans);
}

/* ----------------------------------------------------------
   LANGUAGE NAME + LEVEL LABELS
---------------------------------------------------------- */

.language-pill__name {
  font-size:   var(--text-base);
  font-weight: var(--font-semibold);
  color:       var(--color-text-primary);
  line-height: 1;
}

.language-pill__level {
  font-size:      var(--text-xs);
  font-weight:    var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-text-muted);
}