/* Halden Vos: a minimal physics piece. A stack of thin white business cards on a warm grey table, one line of
   type on each. The cards are HTML, moved by the script as rigid bodies; only the top one wears the accent. */
:root {
  --table: #e6e3dd;     /* the table */
  --card: #fdfcf9;      /* the card */
  --ink: #191816;       /* the names */
  --accent: #d6452c;    /* the role on the top card */
  --muted: #a39f97;     /* the role on the cards underneath, and the hint */
  --edge: #d3cfc6;      /* the thin edge of each card */
  --shade: #1a1610;     /* the colour of the shadows */
  --radius: 3px;        /* how round the corners of a card are */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--table);
  color: var(--ink);
  font-family: 'Hubot Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.stage.is-over {
  cursor: grab;
}

.stage.is-grabbing {
  cursor: grabbing;
}

.stage:focus-visible .pile {
  outline: 1px solid var(--muted);
  outline-offset: 28px;
  border-radius: 6px;
}

/* the pile is a point in the middle of the table: every card is centred on it and moved from there */
.pile {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 0;
  height: 0;
}

.card {
  position: absolute;
  left: calc(var(--w) * -0.5);
  top: calc(var(--h) * -0.5);
  width: var(--w);
  height: var(--h);
  opacity: 0;
  will-change: transform;
}

/* the shadow that grows as the card leaves the table (the script keeps it falling straight down) */
.card__lift {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow:
    0 calc(var(--h) * 0.1) calc(var(--h) * 0.26) color-mix(in srgb, var(--shade) 16%, transparent),
    0 calc(var(--h) * 0.035) calc(var(--h) * 0.12) color-mix(in srgb, var(--shade) 7%, transparent);
  opacity: 0;
  will-change: transform, opacity;
}

.card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow:
    0 0 0 0.5px var(--edge),
    0 1px 0 var(--edge),
    0 1px 3px color-mix(in srgb, var(--shade) 7%, transparent);
  overflow: hidden;
}

/* the cards underneath sit a breath darker, in the shade of the ones above */
.card__dim {
  position: absolute;
  inset: 0;
  background: var(--shade);
  opacity: 0;
  pointer-events: none;
}

.card__line {
  position: absolute;
  left: calc(var(--w) * 0.075);
  right: calc(var(--w) * 0.075);
  bottom: calc(var(--h) * 0.13);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: calc(var(--w) * 0.048);
  line-height: 1;
  white-space: nowrap;
}

.card__name {
  --wd: 100;
  --wg: 600;
  font-stretch: calc(var(--wd) * 1%);
  font-weight: var(--wg);
  letter-spacing: -0.012em;
}

.card__role {
  --wd: 100;
  --wg: 420;
  font-stretch: calc(var(--wd) * 1%);
  font-weight: var(--wg);
  color: var(--muted);
}

.hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7vh;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 450;
  font-stretch: 112%;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}