/* ============================================================
   SKILLS
   ============================================================ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-3);
}

.skill-card {
  position: relative;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--deep-2);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med);
  cursor: default;
}

.skill-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-primary);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med);
  pointer-events: none;
}

.skill-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(139,92,246,0.28), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-med);
  pointer-events: none;
}

.skill-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
}
.skill-card:hover::before { opacity: 1; }
.skill-card:hover::after { opacity: 1; }

.skill-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
  color: var(--cyan);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-med);
  position: relative;
}
.skill-card:hover .skill-icon {
  transform: rotate(-8deg) scale(1.08);
  color: var(--violet-2);
}
.skill-icon svg { width: 20px; height: 20px; }

.skill-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: var(--sp-2);
  position: relative;
}

.skill-bar-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.skill-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: var(--grad-primary);
  transition: width 1.1s var(--ease-out);
}
.skill-card.is-visible .skill-bar-fill { width: var(--lvl, 0%); }

.skill-level {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-top: 0.4rem;
  display: block;
}