/* Skills: grey section under the Certificates card; icons are moved by Matter.js bodies (skills.js). */
#skills-list { margin-top: 24px; }
#skills-list img { object-fit: contain; }

.sk-ic { --z: 60px; display: grid; place-items: center; width: var(--z); height: var(--z); border-radius: calc(var(--z) * .3); background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 22px -16px rgba(0,0,0,.35); }
.sk-ic img { width: 50%; height: 50%; }
.sk-ic img[src$="/cloudmonitoring.svg"], .sk-ic img[src$="/databases.svg"], .sk-ic img[src$="/llmapis.svg"] { width: 76%; height: 76%; } /* two logos in one icon: give it more of the tile */
.sk-mono { display: grid; place-items: center; width: 50%; height: 50%; border-radius: 28%; background: #0a0a0a; color: #fff; font: 600 calc(var(--z) * .19) "Geist Mono", monospace; letter-spacing: -.02em; }
.sk-lv { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 500 10.5px var(--sans); letter-spacing: .01em; white-space: nowrap; }
.sk-lv.sk-expert { background: #0a0a0a; color: #fff; }
.sk-lv.sk-intermediate { background: #e4e6ea; color: #0a0a0a; }
.sk-lv.sk-beginner { color: var(--muted); box-shadow: inset 0 0 0 1px #d4d6da; }

.sk-phys { position: relative; height: 380px; overflow: hidden; border-radius: 20px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.55)); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sk-body { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; cursor: grab; }
.sk-phys.go .sk-body { opacity: 1; }
.sk-body:active { cursor: grabbing; }
.sk-body .sk-ic { --z: inherit; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .25s; }
.sk-body img { pointer-events: none; }
.sk-phys.hovering .sk-body:not(.hot) .sk-ic { opacity: .4; }
.sk-body.pinned { z-index: 1; }
.sk-body:not(.pinned) { z-index: 2; } /* anything that has fallen covers the grid, names included */
.sk-body.hot { z-index: 3; }
.sk-body.hot .sk-ic { transform: scale(1.14); box-shadow: 0 0 0 2px #0a0a0a, 0 18px 34px -14px rgba(0,0,0,.45); }

/* hover card */
.sk-hov { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; border-radius: 16px; background: #fff; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 36px -14px rgba(0,0,0,.35); pointer-events: none; opacity: 0; scale: .94; transition: opacity .15s, scale .15s; }
.sk-hov.on { opacity: 1; scale: 1; }
.sk-hov .sk-ic { --z: 38px; box-shadow: none; background: #f3f4f6; }
.sk-hov b { display: block; font-size: 14px; font-weight: 600; color: var(--fg); }
.sk-hov small { display: block; font-size: 12px; color: var(--muted); }
.sk-hov .sk-lv { margin-left: 4px; }

.sk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sk-again { flex: none; appearance: none; border: 0; padding: 6px 12px; border-radius: 999px; background: #fff; font: 500 12px var(--sans); color: var(--text); cursor: pointer;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .3s, transform .3s; }
.sk-again.on { opacity: 1; transform: none; pointer-events: auto; }
.sk-again:hover { color: var(--fg); }

/* the neat grid: name and level under each icon until it falls */
.sk-name { position: absolute; left: 50%; top: calc(100% + 7px); width: var(--cell); transform: translateX(-50%); text-align: center; line-height: 1.25; pointer-events: none; transition: opacity .2s; }
.sk-name b { display: block; font-size: 12px; font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-name small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; }
.sk-expert .sk-name small { color: #0a0a0a; }
.sk-intermediate .sk-name small { color: #6b6f75; }
.sk-beginner .sk-name small { color: #a4a8ae; }
.sk-body:not(.pinned) .sk-name { opacity: 0; }
.sk-body.pinned.hot .sk-ic { transform: translateY(-3px) scale(1.06); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 16px 28px -16px rgba(0,0,0,.45); }
@media (max-width: 559px) { .sk-name b { font-size: 11px; } .sk-name small { font-size: 10px; } }