/* ==========================================================================
   NIGHTWING — ABOUT + SKILLS
   ========================================================================== */

/* ---- About ---------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-10);
  align-items: start;
}

.about-media {
  position: sticky;
  top: 7rem;
}
.about-media .ph-block { aspect-ratio: 4/5; width: 100%; }

.about-media-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.about-media-frame::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  pointer-events: none;
}
.about-media-tag {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(9,12,18,0.8);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--color-accent-bright);
  backdrop-filter: blur(8px);
}

.about-copy p {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: 1.75;
  margin-bottom: var(--sp-5);
}
.about-copy strong { color: var(--white); font-weight: 600; }
.about-copy em { color: var(--color-accent-bright); font-style: normal; font-weight: 600; }

.about-principles {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.principle {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.principle:hover { border-color: var(--line-blue); transform: translateY(-3px); }
.principle-icon { width: 22px; height: 22px; color: var(--color-accent-bright); margin-bottom: var(--sp-3); }
.principle-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--white); margin-bottom: var(--sp-1); }
.principle-desc { font-size: var(--fs-xs); color: var(--grey-500); line-height: 1.5; }

/* ---- Skills ---------------------------------------------------------- */
.skills-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-10);
}

.skills-intro { position: sticky; top: 7rem; align-self: start; }
.skills-intro-desc { color: var(--color-text-muted); font-size: var(--fs-md); line-height: 1.7; margin-top: var(--sp-4); max-width: 40ch; }

.skill-categories { margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); }
.skill-cat-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  text-align: left;
  color: var(--grey-300);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  width: 100%;
}
.skill-cat-btn .cat-name { font-weight: 600; font-family: var(--font-display); }
.skill-cat-btn .cat-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--grey-500); }
.skill-cat-btn.is-active, .skill-cat-btn:hover {
  border-color: var(--line-blue);
  color: var(--white);
  background: var(--color-surface-raised);
}
.skill-cat-btn.is-active .cat-count { color: var(--color-accent-bright); }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.skill-card {
  position: relative;
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.skill-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-blue);
  background: var(--color-surface-raised);
}
.skill-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.skill-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--ink-800);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-bright);
  font-size: 1.15rem;
}
.skill-level-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.skill-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--white); margin-bottom: var(--sp-3); }
.skill-bar-track { height: 4px; background: var(--ink-800); border-radius: var(--r-pill); overflow: hidden; }
.skill-bar-fill {
  height: 100%; width: 0%;
  background: var(--grad-accent);
  border-radius: var(--r-pill);
  transition: width 1.1s var(--ease-out);
}
.skill-card[data-cat] { display: none; }
.skill-card.is-visible { display: block; animation: fade-up var(--dur-slow) var(--ease-out) both; }