/* AfriNative — Tools I use (infinite marquee + focus cards) */

.an-tools-section {
  background: #ffffff !important;
}

.an-tools {
  --an-ink: #0f1b2d;
  --an-muted: #5b6b7f;
  --an-line: #e3e9f2;
  --an-coral: #fe4a49;
  --an-navy: #001730;
  --an-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --an-tools-speed: 42s;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 0 8px;
}

.an-tools__rail {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  padding: 8px 0 4px;
}

.an-tools__track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: an-tools-marquee var(--an-tools-speed) linear infinite;
  will-change: transform;
}

.an-tools:hover .an-tools__track,
.an-tools:focus-within .an-tools__track {
  animation-play-state: paused;
}

@keyframes an-tools-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .an-tools__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    transform: none;
  }

  .an-tools__rail {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .an-tools__track .an-tools__card[aria-hidden="true"] {
    display: none;
  }
}

.an-tools__card {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 200px;
  max-width: 240px;
  padding: 14px 16px;
  border: 1px solid var(--an-line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: 0 10px 28px rgba(15, 27, 45, 0.05);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.35s var(--an-ease),
    border-color 0.35s ease,
    box-shadow 0.35s var(--an-ease);
}

.an-tools__card:hover,
.an-tools__card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--an-coral) 35%, var(--an-line));
  box-shadow: 0 16px 36px rgba(15, 27, 45, 0.1);
  outline: none;
}

.an-tools__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--an-navy) 92%, #fff);
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.an-tools__card:nth-child(3n) .an-tools__mark {
  background: var(--an-coral);
}

.an-tools__card:nth-child(4n) .an-tools__mark {
  background: color-mix(in srgb, var(--an-navy) 70%, var(--an-coral));
}

.an-tools__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.an-tools__name {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--an-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.an-tools__kind {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--an-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.an-tools__hint {
  margin: 18px 0 0;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  color: #7a8494;
}

@media (max-width: 640px) {
  .an-tools__card {
    min-width: 176px;
    padding: 12px 14px;
    gap: 10px;
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .an-tools__mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 12px;
  }

  .an-tools__name {
    font-size: 13px;
  }
}