/* Foreground expertise artwork: consistent 64-unit silhouettes, upper-left
   ceramic light, inset seams, and quiet status pulses. No filter animation. */
.expertise-icon.qa-icon { --expertise-accent: var(--accent-green); }
.expertise-icon.ai-icon { --expertise-accent: var(--accent-purple); }
.expertise-icon.fullstack-icon { --expertise-accent: var(--accent-orange); }
.expertise-icon.webxr-icon { --expertise-accent: var(--accent-cyan); }
.expertise-icon.comms-icon { --expertise-accent: var(--accent-blue); }

.expertise-card .expertise-icon {
  --expertise-light: color-mix(in oklab, var(--expertise-accent) 24%, white);
  --expertise-shade: color-mix(in oklab, var(--expertise-accent) 42%, var(--bg-dark));
  color: var(--expertise-accent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--expertise-light) 25%, transparent),
    inset 0 -1px 0 color-mix(in oklab, var(--expertise-shade) 25%, transparent);
}
.expertise-card .expertise-icon svg {
  animation: none;
  filter: none;
  transform: none;
}
.expertise-icon .expertise-face {
  fill: var(--expertise-accent);
  fill-opacity: 0.09;
}
.expertise-icon .expertise-keyline {
  stroke: var(--expertise-light);
  stroke-width: 0.9;
  fill: none;
  opacity: 0.8;
}
.expertise-icon .expertise-seam {
  stroke: var(--expertise-accent);
  stroke-width: 1.3;
  opacity: 0.46;
}
.expertise-icon .expertise-detail { stroke-width: 1.2; opacity: 0.58; }
.expertise-icon .expertise-lens {
  fill: var(--expertise-shade);
  fill-opacity: 0.35;
  stroke-width: 1.7;
}
.expertise-icon .expertise-signal {
  fill: currentColor;
  stroke: none;
  animation: vectorBreathe 6s ease-in-out infinite;
}
.expertise-icon .expertise-signal:nth-of-type(2n) { animation-delay: -2s; }
.expertise-icon .expertise-signal:nth-of-type(3n) { animation-delay: -4s; }
.expertise-card .qa-icon .checkmark-draw {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
html[data-theme="light"] .expertise-card .expertise-icon {
  color: color-mix(in oklab, var(--expertise-accent) 65%, var(--text-primary));
}
html[data-theme="light"] .expertise-card .expertise-icon svg { stroke: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .expertise-icon .expertise-signal { animation: none; }
  .expertise-card:hover .expertise-icon { transform: none; }
}
@media (forced-colors: active) {
  .expertise-card .expertise-icon { color: CanvasText; }
  .expertise-card .expertise-icon svg { stroke: CanvasText; }
  .expertise-icon .expertise-keyline,
  .expertise-icon .expertise-seam { stroke: CanvasText; }
}