/* Cards are positioned from anchors (% of the stage). Physics will offset them via transform later. */
.card {
  position: absolute;
  z-index: var(--z-cards);
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--card-edge), var(--shadow-card-raised);
  user-select: none; /* cards can be grabbed and flung */
}

/* A card being dragged rides above the others (no collisions, just order). */
.card.is-held {
  z-index: calc(var(--z-cards) + 1);
}

.card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Short hover detail, injected from js/content/home.js */
.card__detail {
  position: absolute;
  left: 1.4cqw;
  bottom: 1.4cqw;
  padding: 0.4cqw 0.9cqw;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--card-ink);
  font-size: 1.05cqw;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  translate: 0 0.4cqw;
  pointer-events: none;
  transition: opacity 200ms ease-out, translate 200ms ease-out;
}

.card:hover .card__detail,
.card:focus-visible .card__detail {
  opacity: 1;
  translate: 0 0;
}

.card--about .card__detail {
  left: auto;
  right: 1.6cqw;
  top: 1.6cqw;
  bottom: auto;
}

.card--about   { --x: 0%;   --y: 1.3%;  --w: 39.6%; --h: 98.7%; }
.card--media   { --x: 42.8%; --y: 23.1%; --w: 40.6%; --h: 44.4%; }
.card--stats   { --x: 86.6%; --y: 23.1%; --w: 13.4%; --h: 44.4%; }
.card--clients { --x: 42.8%; --y: 73.6%; --w: 19.6%; --h: 26.4%; }
.card--sphere  { --x: 65.5%; --y: 73.6%; --w: 34.5%; --h: 26.4%; }

/* Shared number/label pair */
.stat__value {
  font-size: 3.5cqw;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 0.5cqw;
  font-size: 1.75cqw;
  font-weight: 400;
  line-height: 1.15;
  text-wrap: pretty;
}

/* About card ---------------------------------------------------------- */
.card--about {
  --tab-r: 2.3cqw;
  border-top-left-radius: 0; /* the tab covers this corner */
  background: var(--surface-purple);
  color: var(--on-color);
}

/* Tab cut out of the top-left corner, with inverted rounded corners */
.card__tab {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  height: 4.1cqw;
  padding: 0 2.6cqw 0 0.6cqw;
  border-bottom-right-radius: var(--tab-r);
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
  font-size: 1.6cqw;
  font-weight: 500;
}

.card__tab svg {
  width: 1.6cqw;
  height: 1.6cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.card__tab::before,
.card__tab::after {
  content: "";
  position: absolute;
  width: var(--tab-r);
  height: var(--tab-r);
  z-index: -1;
  border-top-left-radius: var(--tab-r);
  box-shadow: calc(var(--tab-r) * -0.5) calc(var(--tab-r) * -0.5) 0 calc(var(--tab-r) * 0.5) var(--bg);
}

.card__tab::before { top: 0; left: 100%; }
.card__tab::after  { top: 100%; left: 0; }

.about__portrait {
  position: absolute;
  left: 24%;
  top: 9%;
  width: 64%;
  aspect-ratio: 1;
}

.about__ring,
.about__disc {
  position: absolute;
  border-radius: 50%;
}

.about__ring {
  inset: 0;
  border: 0.55cqw solid var(--on-color);
}

.about__disc {
  inset: 6%;
  background: var(--surface-lilac);
}

.about__figure {
  position: absolute;
  inset: 6% 6% 0;
  width: 88%;
  fill: #3b3a40;
  clip-path: inset(-20% 0 0 0 round 0 0 50% 50%);
}

.about__text {
  position: absolute;
  left: 7.7%;
  right: 7.7%;
  bottom: 5.5%;
}

.about__greeting,
.about__name {
  font-size: 5.3cqw;
  font-weight: 300;
  line-height: 1.05;
  text-wrap: balance;
}

.about__name {
  margin-top: 0.3cqw;
  font-size: 4.6cqw; /* the studio name is one long word; this size fits the card */
}

.about__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  margin-top: 2.6cqw;
  padding-bottom: 0.6cqw;
  border-bottom: 1px dashed rgb(255 255 255 / 0.6);
  font-size: 1.35cqw;
}

.about__contact svg {
  width: 1.5cqw;
  height: 1.5cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.about__badge {
  position: absolute;
  right: 6%;
  bottom: 4.5%;
  width: 24%;
}

.about__badge > circle:first-of-type {
  fill: var(--surface-black);
}

.about__badge text {
  fill: var(--on-color);
  font-size: 8.6px;
  font-weight: 500;
  letter-spacing: 0;
}

.about__badge-dot {
  fill: var(--on-color);
}

/* Media card ---------------------------------------------------------- */
.card--media {
  background: var(--surface-media);
  color: var(--card-ink);
}

.media__demo {
  position: absolute;
  inset: 0;
}

/* Topic name in the corner of a demo card */
.card__topic {
  position: absolute;
  top: 1.6cqw;
  left: 1.9cqw;
  font-size: 1.9cqw;
  font-weight: 500;
}

/* Live mini-demos (js/systems/card-demos.js): never take pointer events from the card */
.card__demo {
  pointer-events: none;
}

.card__demo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Stats card ---------------------------------------------------------- */
.card--stats {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: minmax(0, 1fr); /* a long single-word label must not widen the card */
}

.card--stats .stat__label {
  font-size: 1.5cqw;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2.6cqw;
}

.stat--top {
  background: var(--surface-teal);
  color: var(--card-ink);
}

.stat--bottom {
  background: var(--surface-violet);
  color: var(--on-color);
}

.stats__demo {
  margin-bottom: 0.8cqw;
}

.stat .mark {
  top: 1.2cqw;
  right: 1.2cqw;
}

/* Clients card -------------------------------------------------------- */
.card--clients {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  background: var(--surface-graphite);
  color: var(--on-color);
}

.clients__demo {
  width: 5.4cqw;
  aspect-ratio: 1;
}

.clients__label {
  font-size: 1.9cqw;
  font-weight: 400;
}

/* Sphere card --------------------------------------------------------- */
.card--sphere {
  background: var(--surface-black);
  color: var(--card-ink);
}

.sphere__demo {
  position: absolute;
  left: 6%;
  top: 50%;
  width: 32%;
  aspect-ratio: 1;
  translate: 0 -50%;
}

.sphere__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 56%;
  padding: 0 3cqw;
  border-radius: var(--radius-card);
  background: var(--surface-amber);
}

.sphere__panel .stat__label {
  max-width: 14cqw;
}

/* ---- Mini-demo drawing (js/systems/card-demos.js) ----------------------------------- */
.demo-edges line {
  stroke: color-mix(in srgb, var(--card-ink) 28%, transparent);
  stroke-width: 1.4;
}

.demo-nodes circle {
  fill: var(--card-ink);
}

.demo-pulses circle {
  fill: var(--surface-coral);
}

.demo-code {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.05cqw;
  white-space: nowrap;
}

.demo-code__caret {
  display: inline-block;
  width: 0.5cqw;
  height: 1.2cqw;
  margin-left: 0.1cqw;
  vertical-align: -0.2cqw;
  background: currentColor;
}

.demo-gear {
  fill: var(--on-color);
}

.demo-wire {
  stroke: var(--surface-lilac);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}