/* A skill as a card, on the screen and on a phone. A soft cloud of the dimension's unchanged
   colour sits behind the mark, from the same family as the vote's islands. During quiet time
   it breathes, slowly, from half its size. */
.skillcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.skillcard .dimline { position: relative; z-index: 1; display: flex; align-items: center; font-weight: 700; color: var(--muted); }
.skillcard .inner { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; }
.skillcard .markwrap { position: relative; flex: none; }
.skillcard .bigmark { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.skillcard .halo { position: absolute; left: 50%; top: 50%; width: 205%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dim) 55%, transparent), color-mix(in srgb, var(--dim) 22%, transparent) 55%, transparent);
  transform: translate(-50%, -50%); opacity: .85; }
.skillcard.breathing .halo { animation: breathe 4s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: translate(-50%, -50%) scale(.5); opacity: .5; } to { transform: translate(-50%, -50%) scale(1.14); opacity: 1; } }
@keyframes breathe-still { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skillcard.breathing .halo { animation-name: breathe-still; } }
.skillcard h2 { position: relative; margin: 0; align-self: stretch; text-align: center; }
.skillcard .desc { position: relative; margin: 0; align-self: stretch; }