/* ============================================================
 * Card primitive — 3D flip card (front + back)
 * Generic. Theme variants (.card-them, .card-jaz, .card-video)
 * live in your LP's own stylesheet — they color the faces.
 * ============================================================ */

.card {
  position: relative;
  width: calc(100vw - 32px);
  max-width: 1400px;
  height: calc(100vh - 180px);
  cursor: pointer;
  outline: none;
}
/* Suppress mouse-click outline only — keep visible focus ring for keyboard users (WCAG 2.4.11) */
.card:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
}
.card.is-flipped .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 8px;
  transition: opacity 0s 400ms;
}
.face-back { transform: rotateY(180deg); }

/* Hide whichever face is facing away — defeats stacking-context bleed
 * from filter/animation children (e.g. play-circle pulse-glow). */
.card.is-flipped .face-front { opacity: 0; }
.card:not(.is-flipped) .face-back { opacity: 0; }

@media (max-width: 900px) {
  .card { width: calc(100vw - 16px); height: calc(100dvh - 144px); }
  .face { padding: 28px 22px; }
}