/* terminal-pass.css — the live 3D "terminal pass" membership card.
   Shared by the sign-up funnel and the account page so both render the
   identical card from one source. Pairs with src/shared/terminal-pass.js.
   Uses only v3 tokens (tokens.css) so it themes in light + dark. */

.pf-stage { perspective: 1200px; }

.pf-card {
  position: relative;
  width: 384px;
  max-width: 100%;
  height: 242px;
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--paper);
  background:
    radial-gradient(120% 120% at 12% 108%, oklch(0.42 0.10 150 / 0.55), transparent 52%),
    linear-gradient(152deg, oklch(0.31 0.055 152) 0%, oklch(0.225 0.04 154) 56%, oklch(0.165 0.028 152) 100%);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.14),
    0 18px 36px rgba(0, 0, 0, 0.12),
    0 30px 60px rgba(0, 0, 0, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
}
.pf-card.is-hot { transition: transform 80ms linear, box-shadow 420ms var(--ease-out); }

.pf-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.22), transparent 46%);
  opacity: 0; transition: opacity 300ms var(--ease-out); mix-blend-mode: screen;
}
.pf-card.is-hot .pf-sheen { opacity: 1; }

.pf-wm {
  position: absolute; right: -22px; bottom: -30px;
  color: rgba(255, 255, 255, 0.07); pointer-events: none; z-index: 0;
}

.pf-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; z-index: 1;
}
.pf-card__brand { display: flex; align-items: center; gap: 9px; }
.pf-card__word {
  font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
  line-height: 1.04; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper);
}
.pf-card__word span { display: block; }

.pf-card__avatar {
  width: 46px; height: 46px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--paper); overflow: hidden; flex-shrink: 0;
}
.pf-card__avatar-img { width: 100%; height: 100%; object-fit: cover; display: none; }

.pf-card__mid { position: relative; z-index: 1; }
.pf-card__acct-label {
  font-family: var(--font-sans); font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-bottom: 5px;
}
.pf-card__acct {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 18.5px; letter-spacing: 0.14em; color: var(--paper);
}

.pf-card__bot {
  display: flex; justify-content: space-between; align-items: flex-end;
  position: relative; z-index: 1; gap: 12px;
}
.pf-card__since-label {
  font-family: var(--font-sans); font-size: 8px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-bottom: 3px;
}
.pf-card__since {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.92);
}
.pf-card__id { text-align: right; min-width: 0; }
.pf-card__name {
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600;
  color: var(--paper); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-card__plan {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.82 0.16 140); margin-top: 3px;
}
.pf-card__email {
  font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.55);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 440px) {
  .pf-card { width: 320px; height: 202px; padding: 18px 19px; }
}

/* No cursor tilt for reduced-motion users (JS also no-ops the handlers). */
@media (prefers-reduced-motion: reduce) {
  .pf-card { transition: none; }
  .pf-card.is-hot .pf-sheen { opacity: 0; }
}