/* v43 — reusable interactive portfolio tag standard
   Apply .interactive-skill-tags (optionally data-interactive-tags) to any tag group. */

.interactive-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.interactive-skill-tags > span {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.012);
  color: rgba(255,255,255,.56);
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 220ms ease;
}

.interactive-skill-tags > span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(214,255,75,.14), rgba(214,255,75,.035));
  transform: translateX(-105%);
  transition: transform 220ms cubic-bezier(.2,.75,.2,1);
}

@media (hover:hover) and (pointer:fine) {
  .interactive-skill-tags > span:hover {
    color: #d6ff4b;
    border-color: rgba(214,255,75,.72);
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(214,255,75,.08),
      0 0 22px rgba(214,255,75,.10),
      inset 0 0 18px rgba(214,255,75,.035);
  }

  .interactive-skill-tags > span:hover::before {
    transform: translateX(0);
  }
}

.interactive-skill-tags > span:focus-visible,
.interactive-skill-tags > span.is-active {
  outline: none;
  color: #d6ff4b;
  border-color: rgba(214,255,75,.86);
  background: rgba(214,255,75,.055);
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 0 0 1px rgba(214,255,75,.11),
    0 0 26px rgba(214,255,75,.14),
    inset 0 0 18px rgba(214,255,75,.045);
}

.interactive-skill-tags > span:focus-visible::before,
.interactive-skill-tags > span.is-active::before {
  transform: translateX(0);
}

.interactive-skill-tags > span:active {
  transform: translateY(0) scale(.985);
}

/* FAQ keeps its existing rectangular system; this layer only adds interaction. */
.faq-support-role.interactive-skill-tags > span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 761px) and (max-width: 1180px) {
  .interactive-skill-tags {
    gap: 9px;
  }
  .faq-support-role.interactive-skill-tags > span {
    padding: 10px 13px;
  }
}

@media (max-width: 760px) {
  .interactive-skill-tags {
    gap: 7px;
  }
  .faq-support-role.interactive-skill-tags > span {
    min-height: 40px;
    padding: 9px 11px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interactive-skill-tags > span,
  .interactive-skill-tags > span::before {
    transition: none !important;
  }
}