/* Cockpit · Firebird kit · components/stage/cockpit
   A curved arc of project screens in WebGL, with HTML captions and a hidden button list for keyboard and
   screen readers. The element sets the size; the canvas is transparent, so the stage shows the theme's
   surface. Tokens only. */

.cockpit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}

.cockpit__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cockpit__canvas.is-dragging {
  cursor: grabbing;
}

/* Captions: mono micro type under each panel, mapped onto the curve by a per-frame matrix. */
.cockpit__captions {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cockpit__caption {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: var(--ink-muted);
  opacity: 0;
  transform-origin: 0 0;
  transition: color var(--dur-base) var(--ease-standard);
}
.cockpit__caption.is-hovered {
  color: var(--ink);
}
/* If "TITLE — SUBLINE" does not fit on one line, the subline moves to the next line as a whole. */
.cockpit__caption-sub {
  display: inline-block;
  text-wrap: balance;
}

/* The project list: visually hidden, but every button is focusable; focus draws a ring on the panel. */
.cockpit__list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  list-style: none;
  border: 0;
}

/* ── Fallback without WebGL: a horizontally scrollable row with scroll-snap ── */

.cockpit--fallback {
  display: flex;
  align-items: center;
}
.cockpit__row {
  --cockpit-card: clamp(240px, 30vw, 420px);
  position: relative;
  display: flex;
  gap: var(--space-5);
  width: 100%;
  margin: 0;
  /* Room on both sides, so the first and last cards can also snap to the centre. */
  padding: var(--space-6) max(var(--space-page), calc(50% - var(--cockpit-card) / 2));
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cockpit__row::-webkit-scrollbar {
  display: none;
}
.cockpit__card {
  flex: 0 0 var(--cockpit-card);
  scroll-snap-align: center;
}
.cockpit__card-button {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.cockpit__card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--glass-shadow);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.cockpit__card-caption {
  color: var(--ink-muted);
  transition: color var(--dur-base) var(--ease-standard);
}
.cockpit__card-button:hover .cockpit__card-image,
.cockpit__card-button:focus-visible .cockpit__card-image {
  transform: translateY(calc(var(--space-1) * -1));
}
.cockpit__card-button:hover .cockpit__card-caption,
.cockpit__card-button:focus-visible .cockpit__card-caption {
  color: var(--ink);
}
.cockpit__card-button:focus-visible {
  outline: none;
}
.cockpit__card-button:focus-visible .cockpit__card-image {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}