/* =====================================================================
   SKILLS  -  the scrolling logo strip (marquee), the skill cards with chips,
   and the "skill spotlight" (clicking a chip pops its logo in the strip;
   see js/features/skill-spotlight.js).
   ===================================================================== */

/* ---------- logo strip ---------- */
.stack{margin-bottom:20px;padding:6px 0;background:var(--panel);border:1px solid var(--line);border-radius:6px;transition:background-color .35s ease,border-color .35s ease,color .35s ease}
/* padding above/below so a popped logo is not clipped */
.mq{overflow:hidden;padding-block:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mt{display:flex;width:max-content;animation:mq 45s linear infinite}
.mq:hover .mt,.mq:focus-within .mt{animation-play-state:paused}
.grp{display:flex;gap:52px;padding-right:52px;margin:0;list-style:none}
@keyframes mq{to{transform:translateX(-50%)}}

.it{display:flex;align-items:center;gap:10px;font:500 15px var(--mono);color:var(--text);white-space:nowrap;transition:transform .2s ease}
.it:hover{transform:translateY(-3px) scale(1.06)}
.it svg{width:36px;height:36px;fill:var(--c,var(--text));flex-shrink:0;transform-origin:center;transition:transform .3s ease,filter .3s ease}
.it.on{color:var(--strong)}
.it.on svg{transform:scale(1.2);filter:drop-shadow(0 0 8px var(--c,var(--text)))}
.it.hit svg{animation:logo-hit .9s cubic-bezier(.3,1.5,.5,1)}
@keyframes logo-hit{
  0%{transform:scale(1) rotate(0)}
  40%{transform:scale(1.7) rotate(200deg)}
  100%{transform:scale(1.2) rotate(360deg)}
}

/* ---------- skill cards ---------- */
.skgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}
.skgrid>*{min-width:0}
.card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px 26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span,.chips button{font:13px var(--mono);color:var(--teal);border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--bg);overflow-wrap:anywhere}
/* chips that have a logo in the strip are buttons */
.chips button{cursor:pointer;transition:border-color .2s,background-color .2s,color .2s,transform .2s}
.chips button:hover{border-color:var(--teal);transform:translateY(-1px)}
.chips button:active{transform:scale(.96)}
.chips button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}

@media (prefers-reduced-motion:reduce){
  .mt{animation:none}
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .it,.it svg,.chips button{transition:none}
  .it.hit svg{animation:none}
}