/* Brand-led motion layer, kept separate to avoid stale edge caches. */
.card-grid { gap: 18px; }

.ai-card {
  --mx: 50%;
  --my: 50%;
  min-height: 184px;
  isolation: isolate;
  padding: 24px;
  border-color: rgba(var(--card-accent), .17);
  background:
    radial-gradient(circle at 82% 115%, rgba(var(--card-accent), .1), transparent 42%),
    linear-gradient(145deg, rgba(14, 33, 49, .92), rgba(6, 17, 28, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 14px 44px rgba(0,0,0,.08);
  animation: model-card-arrive .58s cubic-bezier(.2,.75,.2,1) both;
  animation-delay: calc(var(--card-index, 0) * 65ms);
}

.ai-card::before {
  top: 0;
  width: 100%;
  height: 1px;
  opacity: .72;
  background: linear-gradient(90deg, transparent 4%, rgba(var(--card-accent), .7) 35%, transparent 74%);
  transform: translateX(-72%);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

.ai-card::after {
  right: -72px;
  bottom: -116px;
  width: 230px;
  height: 230px;
  opacity: .58;
  background: radial-gradient(circle, rgba(var(--card-accent), .16), transparent 67%);
  filter: blur(2px);
  animation: model-aura 4.8s ease-in-out infinite;
  animation-delay: calc(var(--card-index, 0) * -370ms);
}

.ai-card:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: rgba(var(--card-accent), .45);
  background:
    radial-gradient(circle at 80% 112%, rgba(var(--card-accent), .17), transparent 44%),
    linear-gradient(145deg, rgba(18, 40, 58, .98), rgba(7, 20, 32, .99));
  box-shadow: 0 24px 58px rgba(0,0,0,.25), 0 0 32px rgba(var(--card-accent), .055);
}

.ai-card:hover::before { transform: translateX(42%); }
.ai-card:hover::after { opacity: 1; transform: scale(1.18); }

.model-logo {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--card-accent), .24);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.2), inset 0 1px 0 #fff;
  transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s;
}

.model-logo::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border: 1px solid rgba(var(--card-accent), .12);
  border-radius: 21px;
  opacity: 0;
  transform: scale(.86);
  transition: opacity .3s, transform .3s;
}

.model-logo img { width: 34px; height: 34px; object-fit: contain; }
.model-logo > span { display: none; color: rgb(var(--card-accent)); font: 800 12px ui-monospace, monospace; }
.model-logo.logo-failed img { display: none; }
.model-logo.logo-failed > span { display: block; }
.theme-codex .model-logo, .theme-harness .model-logo, .theme-kimi .model-logo { background: #f7f8f8; }
.theme-opencode .model-logo { background: #151020; }
.theme-hermes .model-logo { background: #17130c; }
.theme-grok .model-logo { padding: 0; overflow: hidden; background: #050505; }
.theme-grok .model-logo img { width: 100%; height: 100%; }
.theme-ark .model-logo { background: #091b28; }
.theme-ark .model-logo img { width: 46px; height: 46px; }

.ai-card:hover .model-logo {
  transform: translateY(-3px) rotate(-2deg) scale(1.06);
  box-shadow: 0 13px 30px rgba(0,0,0,.28), 0 0 22px rgba(var(--card-accent), .13);
}
.ai-card:hover .model-logo::after { opacity: 1; transform: scale(1); }

.card-arrow {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(142,166,178,.12);
  border-radius: 50%;
  font-size: 13px;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.ai-card:hover .card-arrow {
  color: rgb(var(--card-accent));
  border-color: rgba(var(--card-accent), .3);
  background: rgba(var(--card-accent), .07);
  transform: translate(2px,-2px) rotate(5deg);
}

.ai-card h3 { font-size: 22px; transition: color .25s, transform .3s; }
.ai-card:hover h3 { color: rgb(var(--card-accent)); transform: translateX(3px); }

@keyframes model-card-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes model-aura {
  0%, 100% { transform: scale(.9); opacity: .42; }
  50% { transform: scale(1.12); opacity: .8; }
}

@media (max-width: 520px) {
  .card-grid { gap: 14px; }
  .ai-card { min-height: 166px; padding: 22px; }
  .model-logo { width: 54px; height: 54px; border-radius: 15px; }
  .model-logo img { width: 31px; height: 31px; }
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .ai-card::after { display: none; }
  .ai-card {
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
    animation: none !important;
  }
  .ai-card:hover,
  .ai-card:hover .model-logo,
  .ai-card:hover h3 {
    transform: none;
  }
  .ai-card:active {
    transform: scale(.985);
  }
}

@media (hover: none) {
  .ai-card, .ai-card::after { animation: none !important; }
  .ai-card:active { transform: scale(.985); border-color: rgba(var(--card-accent), .4); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-card, .ai-card::after { animation: none !important; }
}