/* Shared interaction policy; dark-theme.css owns theme-specific shadow colors. */
:root {
  --card-radius: 6px;
  --card-transition-duration: 220ms;
  --card-transition-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
  --card-hover-lift: -2px;
  --card-image-hover-scale: 1.04;
  --card-arrow-offset: 2px;
  --card-hover-border: color-mix(in srgb, var(--color-accent) 22%, var(--color-border-strong));
  --card-hover-surface: color-mix(in srgb, var(--color-accent) 3%, var(--color-surface-alt));
  --card-link-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-text-primary));
}

.blog-article-card,
.proj-card {
  position: relative;
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: var(--card-transition-duration);
  transition-timing-function: var(--card-transition-easing);
}

.blog-article-image,
.blog-article-read > span,
.proj-repo-arrow,
.proj-owner-arrow {
  transition-property: transform, color;
  transition-duration: var(--card-transition-duration);
  transition-timing-function: var(--card-transition-easing);
}

.blog-article-link:hover,
.blog-article-link:focus {
  color: var(--color-text-primary);
  text-decoration: none;
}

/* A native repository link fills the card; the owner keeps a separate destination. */
.proj-card {
  isolation: isolate;
}

.proj-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
}

.proj-owner-badge {
  position: relative;
  z-index: 1;
}

.proj-name,
.proj-name:hover {
  color: var(--card-link-color);
}

.proj-owner-badge:hover {
  color: var(--color-text-muted);
}

.proj-name,
.proj-owner-badge {
  transition: color var(--card-transition-duration) var(--card-transition-easing),
    border-color var(--card-transition-duration) var(--card-transition-easing);
}

.blog-article-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--card-radius);
  pointer-events: none;
}

.blog-article-link:focus-visible,
.blog-article-link:focus-visible::after,
.proj-name:focus-visible::after {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

.proj-owner-badge:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--card-link-color);
  border-color: var(--color-accent);
}

.blog-article-card:has(.blog-article-link:focus-visible),
.proj-card:has(a:focus-visible) {
  transform: translateY(var(--card-hover-lift));
  border-color: var(--card-hover-border);
  background-color: var(--card-hover-surface);
  box-shadow: var(--card-hover-shadow);
}

.blog-article-link:focus-visible .blog-article-image {
  transform: scale(var(--card-image-hover-scale));
}

.blog-article-link:focus-visible .blog-article-read > span,
.proj-name:focus-visible .proj-repo-arrow,
.proj-owner-badge:focus-visible .proj-owner-arrow {
  transform: translate(var(--card-arrow-offset), calc(-1 * var(--card-arrow-offset)));
  color: var(--card-link-color);
}

.blog-article-link:focus-visible .blog-article-read,
.proj-name:focus-visible,
.proj-owner-badge:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .blog-article-card:hover,
  .proj-card:hover {
    transform: translateY(var(--card-hover-lift));
    border-color: var(--card-hover-border);
    background-color: var(--card-hover-surface);
    box-shadow: var(--card-hover-shadow);
  }

  .blog-article-card:hover .blog-article-image {
    transform: scale(var(--card-image-hover-scale));
  }

  .blog-article-link:hover .blog-article-read > span,
  .proj-name:hover .proj-repo-arrow,
  .proj-owner-badge:hover .proj-owner-arrow {
    transform: translate(var(--card-arrow-offset), calc(-1 * var(--card-arrow-offset)));
    color: var(--card-link-color);
  }

  .blog-article-link:hover .blog-article-read,
  .proj-name:hover,
  .proj-owner-badge:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .proj-owner-badge:hover {
    color: var(--card-link-color);
    border-color: var(--color-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --card-transition-duration: 0s;
    --card-hover-lift: 0px;
    --card-image-hover-scale: 1;
    --card-arrow-offset: 0px;
  }
}