/* interactivity.css */
/* Full-card click target with gentle hover */

.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;

  /* make the whole card the link */
  text-decoration:none;
  color:inherit;

  padding:10px 10px 14px;
  border-radius:14px;

  transition: transform 160ms ease, background-color 160ms ease;
}

.card:hover{
  background:rgba(15,17,19,0.03);
  transform:translateY(-2px);
}

.card:active{
  transform:translateY(0);
}

/* Strong keyboard focus */
.card:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
}

/* Optional: make the icon feel “alive” on hover without shifting layout */
.card .icon{
  transform:scale(1);
  transform-origin:center;
  will-change:transform;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover .icon{
  transform:scale(1.06);
}

.card:active .icon{
  transform:scale(0.99);
}

/* Skip link motion */
.skip-link{
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card,
  .card .icon,
  .skip-link{
    transition:none !important;
  }
  .card:hover{
    transform:none;
  }
  .card:hover .icon{
    transform:none;
  }
}