/* Work wheel — cards ride the rim of a huge disc whose centre sits below the
   page, so only the top arc shows. Geometry is solved in js/wheel.js. */
.wheel-zone {
  position: relative;
  margin-top: 60px;
  width: 100%;
  height: 432px;              /* JS rescales */
  overflow: hidden;
  pointer-events: none;
}
.wheel { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.disc  { position: absolute; left: 0; top: 0; will-change: transform; }

.card {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(10, 10, 10, 0.07);
  pointer-events: auto;       /* hovering a card slows the wheel */
}
.card img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder until the exports arrive: a quiet number and a ghost of UI. */
.card .ph {
  position: absolute; left: 14px; bottom: 12px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: #a5a5a5;
}
.card .ghost {
  position: absolute; inset: 18% 14% auto;
  display: flex; flex-direction: column; gap: 8px;
}
.card .ghost i { display: block; height: 7px; border-radius: 4px; background: #e6e6e6; }
.card .ghost i:nth-child(1) { width: 45%; height: 10px; background: #dedede; }
.card .ghost i:nth-child(2) { width: 90%; }
.card .ghost i:nth-child(3) { width: 70%; }
.card .ghost i:nth-child(4) { width: 100%; height: 48px; border-radius: 10px; margin-top: 8px; }

.wheel-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(237, 237, 237, 0) 0%, var(--bg) 100%);
  pointer-events: none;
}