/*
 * <DemoCard> styles. The card is a quiet surface that lifts on hover. The
 * card itself is the tinted stage: the screenshot sits on it with its own
 * shadow and only its top corners showing, so it reads as an app rising
 * into view rather than a picture in a frame. No fake browser chrome.
 */
.demo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--bg));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--ink) 4%, var(--bg));
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.demo-card:hover,
.demo-card.is-selected {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--bg));
  box-shadow: var(--shadow-lg);
}

/* The keyboard cursor owns the highlight while j and k are in use. */
.is-keyboard-mode .demo-card:hover:not(.is-selected) {
  transform: none;
  border-color: color-mix(in srgb, var(--ink) 14%, var(--bg));
  box-shadow: none;
}

.demo-card-stage {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: var(--space-4) var(--space-4) 0;
}

.demo-card-shot {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base, 240ms) var(--ease-out);
}

.demo-card:hover .demo-card-shot {
  transform: translateY(-3px);
}

.demo-card-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.demo-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.demo-card-title {
  font-weight: var(--weight-medium);
  color: var(--ink);
  line-height: 1.35;
  /* Two lines reserved and two shown; the full title is in the tooltip. */
  min-height: calc(2em * 1.35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--duration-fast) var(--ease-out);
}

.demo-card:hover .demo-card-title,
.demo-card.is-selected .demo-card-title {
  color: var(--accent);
}

.is-keyboard-mode .demo-card:hover:not(.is-selected) .demo-card-title {
  color: var(--ink);
}

.demo-card-desc {
  min-height: calc(2em * 1.5);
  font-size: var(--text-sm);
  color: var(--ink-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-card-shot {
    background: #1b1d21;
  }
}

:root[data-theme="dark"] .demo-card-shot {
  background: #1b1d21;
}