/* Clickable feed cards (Twitter / TikTok pattern).
   Any element with [data-card-link] becomes a clickable surface. The hover
   affordance is a subtle neon-pink border lift + faint glow that matches the
   rest of the dark theme without yelling. */

[data-card-link] {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 200ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: rgba(236, 72, 153, 0.08);
}

[data-card-link]:hover {
  border-color: rgba(236, 72, 153, 0.55);
  box-shadow: 0 6px 22px rgba(236, 72, 153, 0.14), 0 0 0 1px rgba(236, 72, 153, 0.18);
  transform: translateY(-1px);
}

@media (hover: none) {
  /* Don't apply hover lift on touch — the press state below handles it. */
  [data-card-link]:hover {
    transform: none;
    box-shadow: none;
    border-color: inherit;
  }
}

[data-card-link]:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.12);
}

/* Keyboard focus parity with hover so the card is reachable via Tab. */
[data-card-link]:focus-visible {
  outline: 2px solid rgba(236, 72, 153, 0.7);
  outline-offset: 2px;
}

/* Reduced-motion users get the color/shadow change but no movement. */
@media (prefers-reduced-motion: reduce) {
  [data-card-link],
  [data-card-link]:hover,
  [data-card-link]:active {
    transition: border-color 160ms ease, box-shadow 200ms ease;
    transform: none;
  }
}

/* Brief highlight when arriving at /song/<id>#take-<id> so the user spots
   which take they tapped. The :target pseudo-class handles fragment
   navigation natively. */
[id^="take-"]:target {
  animation: take-highlight-flash 1800ms ease-out 1;
  border-color: rgba(236, 72, 153, 0.7) !important;
}

@keyframes take-highlight-flash {
  0%   { box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.6), 0 0 24px rgba(236, 72, 153, 0.35); }
  100% { box-shadow: 0 0 0 1px rgba(236, 72, 153, 0); }
}