/* Cards travel on a circular arc: each image keeps its original proportions. */
.card-orbit {
  --orbit-card-width: 128px;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 358px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  touch-action: pan-y;
  cursor: grab;
}

.card-orbit .orbit-card {
  position: absolute;
  left: 50%;
  top: 24px;
  display: block;
  width: var(--orbit-card-width);
  aspect-ratio: 827 / 1335;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface-deep, #0d1424);
  color: var(--ink, #f0ede5);
  box-shadow: 0 12px 24px rgb(0 0 0 / 32%);
  transform-origin: center;
  transition: box-shadow 180ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: grab;
}

.card-orbit .orbit-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  pointer-events: none;
  -webkit-user-drag: none;
}

.card-orbit .orbit-card:focus-visible {
  outline: 3px solid var(--gold, #d9bc79);
  outline-offset: 4px;
  box-shadow: 0 15px 28px rgb(0 0 0 / 45%);
}

.card-orbit .orbit-card:disabled { cursor: default; }
.card-orbit.is-dragging,
.card-orbit.is-dragging .orbit-card { cursor: grabbing; }
.card-orbit[data-selection-full="true"] { cursor: default; }
.card-orbit .orbit-card[aria-hidden="true"] { pointer-events: none; }
.card-orbit .orbit-card[hidden] { display: none; }

@media (hover: hover) {
  .card-orbit .orbit-card:hover:not(:disabled) {
    box-shadow: 0 16px 28px rgb(0 0 0 / 48%);
  }
}

@media (max-width: 600px) {
  .card-orbit {
    --orbit-card-width: 96px;
    height: 284px;
  }
  .card-orbit .orbit-card { top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-orbit .orbit-card { transition: none; }
}