/* Card component: the 6 "Selected works" cards on the homepage.
   Each card is an <a> wrapping a .css-ga6n8x preview frame - selected
   structurally via :has() since the generated markup gives card anchors
   no shared class across all 6 (see README "Known gaps" for why). */

/* .css-ga6n8x carries a leftover inline opacity from the Figma Sites export
   (a scroll-reveal entrance animation frozen mid-flight at scrape time):
   0.9 on some cards, 0 (fully invisible) on one, unset on others. Normalize
   to one resting value so "brighten on hover" reads the same on every card. */
#container a:has(.css-ga6n8x) .css-ga6n8x {
  opacity: 0.9 !important;
}

@media (hover: hover) and (pointer: fine) {
  #container a:has(.css-ga6n8x) {
    transition: transform 200ms ease;
  }
  #container a:has(.css-ga6n8x) .css-ga6n8x {
    transition: opacity 200ms ease;
  }

  /* Pre-rendered hover shadow, faded in via opacity - box-shadow itself
     can't be animated on the compositor, so a real transition would jank. */
  #container a:has(.css-ga6n8x) .css-ga6n8x::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
  }

  /* Preview image leans in slightly. Clipped by the existing
     overflow:hidden/clip wrappers a couple of levels up, so this
     never escapes the card's rounded frame. */
  #container a:has(.css-ga6n8x) .css-ga6n8x img {
    transition: transform 300ms ease;
  }

  /* Title gains a trailing arrow. Injected via ::after (not real markup)
     so it needs no HTML changes and can't drift out of sync across the
     18 near-duplicate card copies. .css-n8r9b9 is the title+description
     wrapper on every card; the title is always its first child. */
  #container a:has(.css-ga6n8x) .css-n8r9b9 > p:first-child::after {
    content: " \2192";
    display: inline-block;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  /* Tag row (.css-wee7lw) ripples in with a short per-chip stagger,
     applied only on the way in - see the :hover rules below. */
  #container a:has(.css-ga6n8x) .css-wee7lw > * {
    transition: transform 200ms ease;
  }

  #container a:has(.css-ga6n8x):hover {
    transform: translateY(-3px);
  }
  #container a:has(.css-ga6n8x):hover .css-ga6n8x {
    opacity: 1 !important;
  }
  #container a:has(.css-ga6n8x):hover .css-ga6n8x::after {
    opacity: 1;
  }
  #container a:has(.css-ga6n8x):hover .css-ga6n8x img {
    transform: scale(1.05);
  }
  #container a:has(.css-ga6n8x):hover .css-n8r9b9 > p:first-child::after {
    opacity: 1;
    transform: translateX(0);
  }
  #container a:has(.css-ga6n8x):hover .css-wee7lw > *:nth-child(1) {
    transition-delay: 0ms;
    transform: translateY(-2px);
  }
  #container a:has(.css-ga6n8x):hover .css-wee7lw > *:nth-child(2) {
    transition-delay: 40ms;
    transform: translateY(-2px);
  }
  #container a:has(.css-ga6n8x):hover .css-wee7lw > *:nth-child(3) {
    transition-delay: 80ms;
    transform: translateY(-2px);
  }
  #container a:has(.css-ga6n8x):hover .css-wee7lw > *:nth-child(4) {
    transition-delay: 120ms;
    transform: translateY(-2px);
  }
  #container a:has(.css-ga6n8x):hover .css-wee7lw > *:nth-child(5) {
    transition-delay: 160ms;
    transform: translateY(-2px);
  }
}

/* Press state - also fires on touch, so it stays outside the hover guard. */
#container a:has(.css-ga6n8x):active {
  transform: translateY(-1px) scale(0.99);
  transition: transform 100ms ease;
}

@media (prefers-reduced-motion: reduce) {
  #container a:has(.css-ga6n8x),
  #container a:has(.css-ga6n8x) .css-ga6n8x,
  #container a:has(.css-ga6n8x) .css-ga6n8x::after,
  #container a:has(.css-ga6n8x) .css-ga6n8x img,
  #container a:has(.css-ga6n8x) .css-n8r9b9 > p:first-child::after,
  #container a:has(.css-ga6n8x) .css-wee7lw > * {
    transition: none;
  }
}