/* ─── the card object ────────────────────────────────────────────────────
   A struck collectible, not a UI tile. Portrait always. The capture fills
   the well; provenance is integrated over a bottom gradient — mono credit
   line, the model in Humane, the serial beside a struck registration mark.
   A bevelled, edge-lit tier frame carries rarity (docs/design.md R3).
   ───────────────────────────────────────────────────────────────────────── */

.card {
  --tier: var(--t-common);
  --glow: transparent;
  --glow-r: 0px;
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  background: #0a0a0c;
  isolation: isolate;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.9),
    0 0 var(--glow-r) var(--glow);
}

/* the frame: a 1px gradient border drawn with a double background so the
   legendary conic can live in the border box itself. */
.card__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--frame-mat, linear-gradient(180deg, var(--tier), rgba(255, 255, 255, 0.06)));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 3;
  pointer-events: none;
}

/* an inner hairline gives the frame its bevel */
.card__bevel {
  position: absolute;
  inset: 3px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  z-index: 3;
  pointer-events: none;
}

.card__well {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
}

.card__well img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── the unstruck card ──
   Tier 1: card art is only ever the spotter's own validated capture — never
   stock, press, or generated car imagery. So a card nobody has caught yet
   shows no car at all: its art is the mintage figure itself, struck into the
   tier material. The number is the brand, so the blank still says something. */
.card__numeral {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      130% 85% at 50% 8%,
      color-mix(in srgb, var(--tier) 22%, transparent),
      transparent 62%
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.02) 0 2px,
      transparent 2px 9px
    ),
    #07070a;
}

/* the figure sits high in the well so the provenance strip doesn't cover it */
.card__numeral .fig {
  font-family: var(--display);
  font-weight: 700;
  font-size: 9.5rem;
  line-height: 0.72;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transform: translateY(-14%);
  color: transparent;
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--tier) 85%, #fff),
    color-mix(in srgb, var(--tier) 45%, transparent) 60%,
    transparent
  );
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.9;
}

.card__numeral .await {
  position: absolute;
  bottom: 30%;
  color: var(--dimmer);
  font-size: 0.44rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-family: var(--mono);
}

/* ── the provenance strip, over a bottom gradient on the capture ── */
.card__prov {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.6rem 0.85rem 0.8rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82) 42%, #000 100%);
}

.card__credit {
  color: var(--dim);
  font-size: 0.46rem;
  letter-spacing: 0.24em;
  margin-bottom: 0.28rem;
}

.card__model {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.82;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--bone);
}

.card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.card__serial {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  color: var(--bone);
}

.card__serial span {
  color: var(--dim);
  font-size: 0.42rem;
  vertical-align: super;
}

/* the struck registration mark — deterministic from card identity,
   decorative, never scannable */
.card__reg {
  width: 26px;
  height: 26px;
  opacity: 0.85;
  flex: none;
}

.card__reg rect {
  fill: var(--bone);
}

/* ── tier plate, straddling the bottom rail ── */
.card__tier {
  position: absolute;
  z-index: 4;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.3rem 0.5rem 0.26rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.44rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tier);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
  backdrop-filter: blur(6px);
}

/* ── the sheen ── a tracking specular band; only the rail's centred card and
   hovered cards get it, so it reads as light catching an object. */
.card__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.14) 45%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 70%
  );
  background-size: 260% 100%;
  background-position: var(--sheen, 120%) 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.card.is-lit .card__sheen,
.card:hover .card__sheen {
  opacity: 1;
}

/* ─── tier materials ──────────────────────────────────────────────────────
   matte ink → brushed steel → gold → violet edge-light → holo. */

.card[data-tier="common"] {
  --tier: var(--t-common);
  --frame-mat: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
}

.card[data-tier="uncommon"] {
  --tier: var(--t-uncommon);
  --frame-mat: linear-gradient(160deg, #fff, var(--t-uncommon) 35%, rgba(221, 228, 232, 0.25));
  --glow: rgba(221, 228, 232, 0.16);
  --glow-r: 26px;
}

.card[data-tier="rare"] {
  --tier: var(--t-rare);
  --frame-mat: linear-gradient(160deg, #f7e4a6, var(--t-rare) 45%, #b8862f);
  --glow: rgba(232, 192, 90, 0.2);
  --glow-r: 34px;
}

.card[data-tier="epic"] {
  --tier: var(--t-epic);
  --frame-mat: linear-gradient(160deg, #e7d6ff, var(--t-epic) 40%, var(--violet));
  --glow: rgba(125, 57, 235, 0.3);
  --glow-r: 42px;
}

.card[data-tier="legendary"] {
  --tier: var(--t-legendary);
  --frame-mat: var(--holo);
  --glow: rgba(59, 232, 196, 0.26);
  --glow-r: 48px;
}

/* the legendary frame turns slowly — the only animated material */
@property --holo-a {
  syntax: "<angle>";
  initial-value: 210deg;
  inherits: false;
}

.card[data-tier="legendary"] .card__frame {
  background: conic-gradient(
    from var(--holo-a),
    #3be8c4,
    #6fd0ff,
    #7d39eb,
    #b48cff,
    #3be8c4
  );
  animation: holo-turn 14s linear infinite;
}

@keyframes holo-turn {
  to {
    --holo-a: 570deg;
  }
}