slingshot-card {
  view-transition-name: card-slingshot;
}

.card-slingshot {
  color: #e2e2e2;
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(29, 238, 205, 0.22), transparent 60%),
    #121212;
}

:root[data-theme="dark"] .card-slingshot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.card-slingshot::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #ffd7a8, #ffa8f1, #96dbfa, #1deecd);
}

.card-slingshot .card-meta {
  font-family: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
  color: #afafaf;
  opacity: 1;
}

.card-slingshot .card-title {
  color: #1deecd;
  text-shadow: 0 0 3px rgba(29, 238, 205, 0.3), 0 0 9px rgba(29, 238, 205, 0.2);
}