/* The holographic card: a museum pass on a black page. The card is a deep violet-black; its engraved lines and its
   title catch a rainbow foil that slides as the card tilts. */
:root {
  --page: #000000;          /* the page */
  --ink: #f6f3ff;           /* the card's words */
  --muted: #9a94b4;
  --card: #15121f;          /* the card */
  --card-deep: #08070d;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.pass {
  display: grid;
  justify-items: center;
  gap: 26px;
  perspective: 1100px;
}

/* ---------------------------------------------------------------- the card: the script tilts and turns it */
.card {
  --gx: 50%;
  --gy: 30%;
  --glare: 0.5;
  --px: 0px;
  --py: 0px;
  position: relative;
  display: block;
  width: min(340px, 78vw);
  aspect-ratio: 340 / 476;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.card:focus-visible {
  outline: none;
}

.card:focus-visible .card__face {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 3px var(--page), 0 0 0 5px var(--ink);
}

.card__face {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(124, 92, 255, 0.28), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 110, 170, 0.16), transparent 60%),
    linear-gradient(160deg, var(--card), var(--card-deep));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card__face--front {
  grid-template-rows: auto 1fr auto;
  padding: 24px 24px 22px;
}

.card__face--back {
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 30px 26px;
  text-align: center;
  transform: rotateY(180deg);
}

/* the engraving, in the foil */
.card__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card__lines path {
  fill: none;
  stroke: url(#foil);
  stroke-width: 0.9;
  opacity: 0.6;
}

/* a dark veil at the foot, over the engraving and under the words, so the small print reads */
.card__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(to bottom, transparent, rgba(8, 7, 13, 0.82) 62%);
  pointer-events: none;
}

/* a wide band of light that slides across as the card turns */
.card__sheen {
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.12) 47%, rgba(255, 255, 255, 0.02) 54%, transparent 60%);
  transform: translate(var(--sheen, 0%), 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}

/* the glare: where the light hits, on both faces */
.card__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06) 28%, transparent 56%);
  opacity: var(--glare);
  transform: translateZ(1px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the front */
/* the words float a little: a 2D shift, and their own hidden back: Safari would otherwise show the front's words,
   mirrored, through the back */
.card__top,
.card__title,
.card__foot {
  position: relative;
  transform: translate(var(--px), var(--py));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card__top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
}

.card__mark {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.card__brand {
  font-family: 'Unbounded Variable', sans-serif;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.card__kind {
  font-size: 12px;
  color: var(--muted);
}

/* the title in foil too: a gradient clipped to the letters, slid by the script */
.card__title {
  align-self: center;
  font-family: 'Unbounded Variable', sans-serif;
  font-size: clamp(36px, 12vw, 46px);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: transparent;
  background: linear-gradient(115deg, #ffffff 18%, #ffd2ec 30%, #c4f4ff 42%, #fff1bf 54%, #ffffff 66%, #e2d4ff 80%, #ffffff 92%);
  background-size: 260% 100%;
  background-position: var(--title, 50%) 0;
  -webkit-background-clip: text;
  background-clip: text;
}

.card__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.card__foot > span {
  display: grid;
  gap: 3px;
}

.card__foot > span:last-child {
  text-align: right;
}

.card__small {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.card__name {
  font-size: 16px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- the back */
.card__code {
  width: 100%;
  height: 92px;
  border-radius: 12px;
}

.card__note {
  max-width: 24ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.card__brand--back {
  margin-top: 6px;
}

/* ---------------------------------------------------------------- the hint */
.pass__hint {
  margin: 0;
  font-size: 14px;
  font-weight: 560;
  color: var(--muted);
}