/* ==========================================================
   Kitbot motion graphic (built by js/kitbot.js)
   Motion rules: see "Motion" in DESIGN.md.
   ========================================================== */

.kb-stage {
  --kb-scale: 0.7;
  --kb-spin: 14s;      /* one full turn */
  --kb-wheel: 1.1s;    /* one wheel revolution */
  /* RSL blink: 1.2s cycle (kb-blink) */
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 3.4;
  background: var(--surface);
  border-radius: var(--r-hold);
  overflow: hidden;
}
@media (min-width: 640px) { .kb-stage { --kb-scale: 1; } }
@media (min-width: 1024px) { .kb-stage { --kb-scale: 1.05; aspect-ratio: 4 / 3.6; } }

.kb-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

/* floor shadow */
.kb-shadow {
  position: absolute;
  left: 50%; top: 74%;
  width: calc(340px * var(--kb-scale));
  height: calc(90px * var(--kb-scale));
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(13, 31, 51, 0.22), rgba(13, 31, 51, 0));
  border-radius: 50%;
}

.kb-world {
  position: absolute;
  left: 50%; top: 74%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: scale(var(--kb-scale)) rotateX(-22deg);
}
.kb-spin {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(-35deg);
}
.kb-box, .kb-wheel {
  position: absolute;
  transform-style: preserve-3d;
}
.kb-face {
  position: absolute;
  /* Faces stay double-sided and overlap by 1px (see SEAM in kitbot.js),
     so no background shows through the edges. */
}
/* simple fixed lighting: top bright, sides darker */
.kb-face--top { filter: brightness(1.12); }
.kb-face--front { filter: brightness(1); }
.kb-face--back { filter: brightness(0.86); }
.kb-face--left, .kb-face--right { filter: brightness(0.78); }
.kb-face--bottom { filter: brightness(0.55); }
.kb-face--label {
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* wheels */
.kb-disc {
  position: absolute;
  left: -24px; top: -24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #20262E;
  border: 5px solid #0F141A;
  overflow: hidden;
}
.kb-hub {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-conic-gradient(#8B96A3 0deg 14deg, #2C333C 14deg 60deg);
}

/* caption + control */
.kb-caption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0 var(--s-5) var(--s-5);
}
.kb-caption__title { font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.2; }
.kb-caption__text { margin-top: var(--s-1); color: var(--text-2); }
.kb-toggle { flex: none; }

@media (prefers-color-scheme: dark) {
  .kb-shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
}

/* motion (only when the visitor allows it) */
@media (prefers-reduced-motion: no-preference) {
  .kb-spin { animation: kb-turn var(--kb-spin) linear infinite; }
  .kb-wheel--left .kb-hub { animation: kb-roll var(--kb-wheel) linear infinite; }
  .kb-wheel--right .kb-hub { animation: kb-roll var(--kb-wheel) linear infinite reverse; }
  .kb-rsl .kb-face { animation: kb-blink 1.2s steps(1, end) infinite; }
  .kb-stage.is-paused .kb-spin,
  .kb-stage.is-paused .kb-hub,
  .kb-stage.is-paused .kb-rsl .kb-face { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-toggle { display: none; }
}
/* no JavaScript: hide the empty stage control */
.kb-stage:not(.is-ready) .kb-toggle { display: none; }

@keyframes kb-turn {
  from { transform: rotateY(-35deg); }
  to   { transform: rotateY(325deg); }
}
/* robot signal light: on, off, on... like an enabled robot */
@keyframes kb-blink {
  50% { background-color: #6E4A2A; }
}
@keyframes kb-roll {
  to { transform: rotate(360deg); }
}