/* About — animated skills showcase. Tokens from tokens.css. */
.sk-showcase {
  width: 100%;                 /* full-bleed band */
  margin: clamp(32px, 6vw, 72px) 0 clamp(24px, 4vw, 40px);
  padding: 0;
}

.sk-showcase__card {
  position: relative;
  overflow: hidden;           /* clips the marquee — no page overflow */
  isolation: isolate;
  padding: clamp(40px, 7vw, 88px) 0 clamp(44px, 7vw, 88px);
  border-radius: 0;
  background: var(--brand-fill, #2b6f91);
  color: #fff;
}
.sk-showcase__card::before {   /* single soft coral accent, not a gradient wash */
  content: "";
  position: absolute;
  z-index: -1;
  right: -12%;
  top: -40%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 108, 99, 0.28), transparent);
  pointer-events: none;
}

.sk-showcase__head {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 32px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.sk-showcase__lede { max-width: 56ch; }
.sk-showcase__eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.sk-showcase__eyebrow span { color: #ffd2cf; margin-right: 6px; }
.sk-showcase__head h2 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}
.sk-showcase__lede { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }

.sk-rows {
  display: grid;
  gap: clamp(6px, 1.2vw, 14px);
}
.sk-row { overflow: hidden; padding: 14px 0; }

.sk-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: skScroll var(--sk-dur, 60s) linear infinite;
}
.sk-row--right .sk-track { animation-direction: reverse; }

.sk-group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--sk-gap, clamp(12px, 1.6vw, 22px));
  margin: 0;
  padding: 0 var(--sk-gap, clamp(12px, 1.6vw, 22px)) 0 0;   /* trailing gap makes -50% loop exact */
  list-style: none;
}

@keyframes skScroll { to { transform: translate3d(-50%, 0, 0); } }

/* big, tilted pills */
.sk-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: clamp(16px, 2.2vw, 30px) clamp(26px, 4vw, 56px);
  border-radius: var(--radius-pill);
  font-size: clamp(1.05rem, 2.3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  border: 1.5px solid transparent;
}
.sk-pill--d { background: #1d4d67; color: #fff; }               /* tonal dark */
.sk-pill--l { background: #fff; color: var(--ink-900); }         /* light */
.sk-pill--a { background: var(--coral); color: var(--ink-900); }
.sk-group .sk-pill:nth-child(3n+1) { transform: translateY(6px) rotate(-3deg); }
.sk-group .sk-pill:nth-child(3n+2) { transform: translateY(-5px) rotate(2deg); }
.sk-group .sk-pill:nth-child(3n)   { transform: translateY(2px) rotate(-1deg); }

.sk-toggle {
  position: absolute;
  right: clamp(14px, 3vw, 24px);
  top: clamp(14px, 3vw, 24px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.sk-toggle svg { width: 18px; height: 18px; }
.sk-toggle__play { display: none; }
.sk-showcase__card.is-paused .sk-toggle__play { display: block; }
.sk-showcase__card.is-paused .sk-toggle__pause { display: none; }
.sk-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
  .sk-toggle:hover { background: #fff; color: var(--blue-deep); }
  .sk-showcase__card:hover .sk-track { animation-play-state: paused; }
}
.sk-showcase__card.is-paused .sk-track { animation-play-state: paused; }

@media (max-width: 560px) {
  .sk-group { --sk-gap: 10px; }
  .sk-pill { padding: 12px 22px; font-size: 1rem; }
  .sk-showcase__head { padding-right: 72px; }
}

/* Reduced motion: no movement; show one wrapped, static set. */
@media (prefers-reduced-motion: reduce) {
  .sk-track { animation: none; width: auto; }
  .sk-group[aria-hidden="true"], .sk-toggle { display: none; }
  .sk-row, .sk-track { width: 100%; max-width: 100%; }
  .sk-group { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; padding: 0 clamp(20px, 5vw, 64px); }
  .sk-pill { white-space: normal; }
  .sk-row { padding: 4px 0; }
  .sk-rows { -webkit-mask-image: none; mask-image: none; }
  .sk-pill { transform: none !important; }
}