/* ==========================================================================
   Koi pond (js/pond.js): the last screen on the timeline. The screen shows a
   live preview; its detail view is a pond to play with, with no text.
   ========================================================================== */

.timeline__card--pond .timeline__card-media,
.timeline-detail--pond .timeline-detail__media {
  background: var(--color-background);
}

.koi-pond {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.koi-pond canvas {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

/* The preview only swims; a tap goes to the screen. It is a mini pond,
   360 x 203 inside, scaled to fit the screen (js/timeline.js fitMini). */
.timeline__card--pond .timeline__card-media {
  overflow: hidden;
}

.timeline__card--pond .koi-pond {
  inset: auto;
  top: 0;
  left: 0;
  width: 360px;
  height: 203px;
  transform-origin: 0 0;
  pointer-events: none;
}

.timeline__card--pond .timeline__card-caption {
  visibility: hidden;
}

.timeline-detail--pond .timeline-detail__info {
  display: none;
}

.koi-pond--play {
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The pond in the detail view has no outline and no shadow, on a plain page,
   so the water has no edge */
.timeline-detail--pond .timeline-detail__media {
  box-shadow: none;
}

.timeline-detail--pond .timeline-detail__backdrop {
  background: var(--color-background);
}

.koi-pond--play:focus {
  outline: none;
}

.koi-pond--play:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 4px;
}