/* Optional presentation modes are independent of both page layout and visual
   style. Multiple iPods keeps three physical cases in a carousel while only
   the centre case owns the live canvas, controls, and powered display. */

.type-picker-checkbox {
  display: flex;
  gap: 9px;
  align-items: center;
  width: fit-content;
  font-size: 14px;
  cursor: pointer;
}

.type-picker-checkbox input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #ff9900;
}

body[data-multiple-ipods] .ipod-stage {
  --carousel-carrier-width: 369px;
  --carousel-carrier-height: 621px;
  --carousel-step: 410px;
  --carousel-duration: 640ms;
  --carousel-ease: cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-carrier-width);
  height: var(--carousel-carrier-height);
  overflow: visible;
}

body[data-multiple-ipods] .ipod-stage > .ipod {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin: 0;
  transform: translate3d(0, 0, 0);
  transition: transform var(--carousel-duration) var(--carousel-ease);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ipod-carousel-card {
  --carousel-x: 0px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-carrier-width, 369px);
  height: var(--carousel-carrier-height, 621px);
  border: 0;
  outline: none;
  transform: translate3d(var(--carousel-x), 0, 0);
  transition: transform var(--carousel-duration) var(--carousel-ease);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ipod-carousel-card[data-carousel-active] {
  z-index: 4;
}

.ipod-carousel-card[data-carousel-slot="left"] {
  --carousel-x: calc(-1 * var(--carousel-step));
}

.ipod-carousel-card[data-carousel-slot="right"] {
  --carousel-x: var(--carousel-step);
}

.ipod-carousel-card[data-carousel-slot="backlog"] {
  --carousel-x: calc(-2 * var(--carousel-step));
  cursor: default;
  pointer-events: none;
}

.ipod-carousel-card > .ipod {
  flex: 0 0 auto;
  margin: 0;
  transform: translateZ(0);
  cursor: pointer;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ipod-carousel-card:focus-visible {
  outline: 3px solid rgba(148, 63, 245, 0.65);
  outline-offset: 8px;
  border-radius: 38px;
}

/* Sprout original is one fixed, ordered run: 3G, 4G, then Mini. Selecting any
   case translates the complete run until that case reaches centre. Nothing
   wraps, fades, or leaves the run; selecting a case on the left simply moves
   the same strip back to the right. */
body[data-multiple-ipods]:not([data-site-concept="board-reveal"])
  .ipod-stage[data-carousel-direction] > .ipod {
  transform: translate3d(var(--carousel-shift, 0px), 0, 0);
}

body[data-multiple-ipods]:not([data-site-concept="board-reveal"])
  .ipod-stage[data-carousel-direction]
  .ipod-carousel-card {
  transform: translate3d(
    calc(var(--carousel-x) + var(--carousel-shift, 0px)),
    0,
    0
  );
}

/* The board-reveal column has room for the centre and its predecessor. Its
   third case waits one place further left. Each turn advances the conveyor:
   centre exits right, left becomes centre, and backlog becomes left. The
   outgoing case is then recycled to backlog without an animated jump. */
body[data-multiple-ipods][data-site-concept="board-reveal"]
  .ipod-stage[data-carousel-direction="left"] > .ipod {
  transform: translate3d(var(--carousel-step), 0, 0);
}

body[data-multiple-ipods][data-site-concept="board-reveal"]
  .ipod-stage[data-carousel-direction="left"]
  .ipod-carousel-card[data-carousel-slot="left"] {
  transform: translate3d(0, 0, 0);
}

body[data-multiple-ipods][data-site-concept="board-reveal"]
  .ipod-stage[data-carousel-direction="left"]
  .ipod-carousel-card[data-carousel-slot="backlog"] {
  transform: translate3d(calc(-1 * var(--carousel-step)), 0, 0);
}

body[data-multiple-ipods] .ipod-stage.is-carousel-resetting > .ipod,
body[data-multiple-ipods] .ipod-stage.is-carousel-resetting .ipod-carousel-card {
  transition: none;
}

/* A suspended runtime can already be fully lit when its case returns to the
   centre. Its LCD, tone and 3G LEDs use the global palette/illumination clock. */
body[data-multiple-ipods] .ipod.is-carousel-waking .ipod-screen-lcd {
  --carousel-wake-final-opacity: 1;
  animation: sprout-carousel-wake var(--visual-fade-duration)
    var(--visual-fade-ease) both;
}

body.dark-mode[data-multiple-ipods]
  .ipod.is-carousel-waking[data-lcd-state="on"] .ipod-screen-lcd {
  --carousel-wake-final-opacity: 1;
}

body.dark-mode[data-multiple-ipods]
  .ipod.is-carousel-waking[data-lcd-state="backlit"] .ipod-screen-lcd {
  --carousel-wake-final-opacity: calc(0.06 + var(--backlight-level) * 0.94);
}

body[data-multiple-ipods]
  .ipod.is-carousel-waking .ipod-screen::before {
  --carousel-wake-final-opacity: 1;
  transition: none;
  animation: sprout-carousel-wake var(--visual-fade-duration)
    var(--visual-fade-ease) both;
}

body[data-multiple-ipods]
  .ipod.is-carousel-waking .ipod-labels {
  --carousel-wake-final-opacity: calc(
    var(--label-rest-opacity)
    + (var(--label-lit-opacity) - var(--label-rest-opacity))
    * var(--backlight-level)
  );
  transition: none;
  animation: sprout-carousel-wake var(--visual-fade-duration)
    var(--visual-fade-ease) both;
}

@keyframes sprout-carousel-wake {
  0% {
    opacity: 0;
  }
  100% {
    opacity: var(--carousel-wake-final-opacity);
  }
}

/* Keep useful side targets on a phone. The complete carousel still exists,
   but the viewport clips it to a readable slice either side of the centre. */
@media (max-width: 600px) {
  body[data-multiple-ipods] .ipod-stage {
    --carousel-step: 285px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-multiple-ipods] .ipod-stage > .ipod,
  body[data-multiple-ipods] .ipod-carousel-card {
    transition: none;
  }

  body[data-multiple-ipods] .ipod.is-carousel-waking .ipod-screen-lcd,
  body[data-multiple-ipods] .ipod.is-carousel-waking .ipod-screen::before,
  body[data-multiple-ipods] .ipod.is-carousel-waking .ipod-labels {
    animation: none;
  }
}