/* Animate image fragments within the same crop as the existing chair artwork. */
.chair-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #304a3b;
}
.chair-animation {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.chair-stage.is-assembling .chair-poster { opacity: 0; }
.chair-stage.is-assembling .chair-animation { display: block; }
.chair-piece {
  opacity: 0;
  transform-box: view-box;
}
.chair-seed { opacity: 1; }
.brand-art figcaption.is-chair-story { position: relative; }
.is-chair-story .chair-caption-copy { opacity: 0; }
.chair-chapter {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}
.is-chair-story .chair-chapter { display: flex; }
.chair-chapter-number { color: #c7b295; font-variant-numeric: tabular-nums; }
.chair-chapter-name { min-width: 7.5em; text-align: left; }
.chair-beats { display: flex; gap: 4px; margin-left: 3px; }
.chair-beats i {
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: rgb(244 240 228 / .2);
}
.chair-beats .is-complete { background: #b59a7e; }
.chair-beats .is-current { background: #f4f0e4; transform: scaleY(1.65); }
@media (max-width: 380px) {
  .chair-chapter { gap: 8px; left: 16px; right: 16px; }
  .chair-beats { gap: 3px; margin-left: 0; }
  .chair-beats i { width: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .chair-stage.is-assembling .chair-poster { opacity: 1; }
  .chair-stage.is-assembling .chair-animation { display: none; }
  .is-chair-story .chair-caption-copy { opacity: 1; }
  .is-chair-story .chair-chapter { display: none; }
}
@media print {
  .chair-stage.is-assembling .chair-poster { opacity: 1; }
  .chair-animation { display: none !important; }
  .is-chair-story .chair-caption-copy { opacity: 1; }
  .is-chair-story .chair-chapter { display: none; }
}