/*
 * Motion scenes on the imp pages: inline SVG drawn like a small Premiere window, animated with CSS on one
 * 15 s clock. The scene parts below are generated (keyframe times from a timeline in seconds); scenes.js
 * starts a scene when it comes into view, adds pause and sound buttons, and plays the sound cues listed in
 * each figure's data-cues ("seconds:sound ...").
 */

.scene {
  --loop: 15s;
  --win: #1e1c1b;
  --panel: #2a2725;
  --row: #34302e;
  --label: #8d847d;
  --video: #6b9bd9;
  --audio: #5aaa67;
  --playhead: #ff6b5e;
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 20px;
  background: var(--win);
  box-shadow: 0 3px 0 #000;
}

.scene svg {
  display: block;
  width: 100%;
  height: auto;
}

.scene text {
  font-family: var(--text);
  fill: var(--label);
  font-size: 12px;
  font-weight: 600;
}

.scene .key {
  opacity: 0;
  transform-origin: 50% 100%;
}

.scene .key rect {
  fill: #fff;
  stroke: #b9ada2;
}

.scene .key .ledge {
  fill: #b9ada2;
  stroke: none;
}

.scene .key text {
  fill: var(--ink);
  font-size: 14px;
  text-anchor: middle;
}

.scene svg * {
  transform-box: fill-box;
  animation-duration: var(--loop);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.scene .bob {
  transform-origin: 50% 100%;
  animation-name: scene-bob;
  animation-duration: 1.6s;
  animation-direction: alternate;
}

@keyframes scene-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

.scene.paused svg * {
  animation-play-state: paused !important;
}

/* Pause and sound buttons, bottom right */

.scene-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.scene-controls button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 10px;
  background: #3a3634;
  box-shadow: 0 2px 0 #000;
  color: #fff;
  cursor: pointer;
}

.scene-controls button:focus-visible {
  outline: 2px solid var(--imp);
  outline-offset: 2px;
}

.scene-controls svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Pause shows bars while playing and a triangle when paused; sound shows a crossed speaker while muted */
.pause .off,
.sound .on,
.scene.paused .pause .on,
.scene.sound .sound .off {
  display: none;
}

.scene.paused .pause .off,
.scene.sound .sound .on {
  display: block;
}

.scene-caption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

@media (max-width: 520px) {
  .scene {
    border-radius: 14px;
  }

  .scene-controls {
    right: 8px;
    bottom: 8px;
  }

  .scene-controls button {
    width: 30px;
    height: 30px;
  }
}

/* ---------- Paste Imp: a picture from the browser, then a WebM file from Explorer, both with Ctrl+V ---------- */

.paste-scene .browser { animation-name: pa-browser; }
@keyframes pa-browser {
  0.00%, 36.00% { opacity: 1; }
  38.67%, 94.67% { opacity: 0; }
  97.33%, 100.00% { opacity: 1; }
}
.paste-scene .explorer { animation-name: pa-explorer; }
@keyframes pa-explorer {
  0.00%, 36.00% { opacity: 0; }
  38.67%, 94.67% { opacity: 1; }
  97.33%, 100.00% { opacity: 0; }
}
.paste-scene .pick1 { animation-name: pa-pick1; }
@keyframes pa-pick1 {
  0.00%, 4.67% { opacity: 0; }
  6.00% { opacity: 1; }
  20.00% { opacity: 1; }
  21.33%, 100.00% { opacity: 0; }
}
.paste-scene .pick2 { animation-name: pa-pick2; }
@keyframes pa-pick2 {
  0.00%, 44.00% { opacity: 0; }
  45.33% { opacity: 1; }
  60.00% { opacity: 1; }
  61.33%, 100.00% { opacity: 0; }
}
.paste-scene .kc1 { animation-name: pa-kc1; }
@keyframes pa-kc1 {
  0.00%, 6.67% { opacity: 0; transform: translateY(8px) scale(0.8); }
  8.33% { opacity: 1; transform: none; }
  15.33% { opacity: 1; transform: none; }
  17.00%, 100.00% { opacity: 0; transform: translateY(-6px); }
}
.paste-scene .kv1 { animation-name: pa-kv1; }
@keyframes pa-kv1 {
  0.00%, 20.67% { opacity: 0; transform: translateY(8px) scale(0.8); }
  22.33% { opacity: 1; transform: none; }
  28.67% { opacity: 1; transform: none; }
  30.33%, 100.00% { opacity: 0; transform: translateY(-6px); }
}
.paste-scene .kc2 { animation-name: pa-kc2; }
@keyframes pa-kc2 {
  0.00%, 46.67% { opacity: 0; transform: translateY(8px) scale(0.8); }
  48.33% { opacity: 1; transform: none; }
  55.33% { opacity: 1; transform: none; }
  57.00%, 100.00% { opacity: 0; transform: translateY(-6px); }
}
.paste-scene .kv2 { animation-name: pa-kv2; }
@keyframes pa-kv2 {
  0.00%, 60.00% { opacity: 0; transform: translateY(8px) scale(0.8); }
  61.67% { opacity: 1; transform: none; }
  68.00% { opacity: 1; transform: none; }
  69.67%, 100.00% { opacity: 0; transform: translateY(-6px); }
}
.paste-scene .fly1 { animation-name: pa-fly1; transform-origin: 0 0; }
@keyframes pa-fly1 {
  0.00%, 25.00% { opacity: 0; transform: none; }
  25.33% { opacity: 1; transform: none; }
  30.00% { opacity: 1; transform: translate(316px, 192px) scale(0.69, 0.23); }
  30.67%, 100.00% { opacity: 0; transform: translate(316px, 192px) scale(0.69, 0.23); }
}
.paste-scene .fly2 { animation-name: pa-fly2; transform-origin: 0 0; }
@keyframes pa-fly2 {
  0.00%, 63.00% { opacity: 0; transform: none; }
  63.33% { opacity: 1; transform: none; }
  66.67% { opacity: 1; transform: translate(380px, 70px) scale(0.6); }
  67.33%, 100.00% { opacity: 0; transform: translate(380px, 70px) scale(0.6); }
}
.paste-scene .convert { animation-name: pa-convert; }
@keyframes pa-convert {
  0.00%, 66.67% { opacity: 0; }
  68.33% { opacity: 1; }
  76.67% { opacity: 1; }
  78.33%, 100.00% { opacity: 0; }
}
.paste-scene .bar { animation-name: pa-bar; transform-origin: 0 50%; }
@keyframes pa-bar {
  0.00%, 68.00% { transform: scaleX(0); }
  75.33%, 100.00% { transform: scaleX(1); }
}
.paste-scene .land1 { animation-name: pa-land1; transform-origin: 0 50%; }
@keyframes pa-land1 {
  0.00%, 30.00% { opacity: 0; transform: scaleX(0.2); }
  31.67% { opacity: 1; transform: scaleX(1.04); }
  32.67%, 94.67% { opacity: 1; transform: none; }
  97.33%, 100.00% { opacity: 0; transform: none; }
}
.paste-scene .land2 { animation-name: pa-land2; transform-origin: 0 50%; }
@keyframes pa-land2 {
  0.00%, 77.33% { opacity: 0; transform: scaleX(0.2); }
  79.00% { opacity: 1; transform: scaleX(1.04); }
  80.00%, 94.67% { opacity: 1; transform: none; }
  97.33%, 100.00% { opacity: 0; transform: none; }
}
.paste-scene .imp { animation-name: pa-imp; transform-origin: 50% 100%; }
@keyframes pa-imp {
  0.00% { transform: none; }
  30.33% { transform: none; }
  31.67% { transform: translateY(-12px) rotate(-3deg); }
  33.33% { transform: none; }
  77.67% { transform: none; }
  79.00% { transform: translateY(-12px) rotate(-3deg); }
  80.67% { transform: none; }
  100.00% { transform: none; }
}

/* ---------- Caption Imp: plain captions become karaoke, the spoken word lit word by word ---------- */

.caption-scene .ab0 { animation-name: ca-ab0; transform-origin: 50% 50%; }
@keyframes ca-ab0 {
  0.00%, 20.00% { opacity: 0; transform: scale(0.85); }
  20.80% { opacity: 1; transform: none; }
  26.67% { opacity: 1; transform: none; }
  27.20%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .at0 { animation-name: ca-at0; }
@keyframes ca-at0 {
  0.00%, 20.00% { fill: #fff; }
  20.53%, 26.67% { fill: #26201e; }
  27.20%, 100.00% { fill: #fff; }
}
.caption-scene .ab1 { animation-name: ca-ab1; transform-origin: 50% 50%; }
@keyframes ca-ab1 {
  0.00%, 26.67% { opacity: 0; transform: scale(0.85); }
  27.47% { opacity: 1; transform: none; }
  33.33% { opacity: 1; transform: none; }
  33.87%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .at1 { animation-name: ca-at1; }
@keyframes ca-at1 {
  0.00%, 26.67% { fill: #fff; }
  27.20%, 33.33% { fill: #26201e; }
  33.87%, 100.00% { fill: #fff; }
}
.caption-scene .ab2 { animation-name: ca-ab2; transform-origin: 50% 50%; }
@keyframes ca-ab2 {
  0.00%, 33.33% { opacity: 0; transform: scale(0.85); }
  34.13% { opacity: 1; transform: none; }
  40.00% { opacity: 1; transform: none; }
  40.53%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .at2 { animation-name: ca-at2; }
@keyframes ca-at2 {
  0.00%, 33.33% { fill: #fff; }
  33.87%, 40.00% { fill: #26201e; }
  40.53%, 100.00% { fill: #fff; }
}
.caption-scene .ab3 { animation-name: ca-ab3; transform-origin: 50% 50%; }
@keyframes ca-ab3 {
  0.00%, 40.00% { opacity: 0; transform: scale(0.85); }
  40.80% { opacity: 1; transform: none; }
  49.33% { opacity: 1; transform: none; }
  49.87%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .at3 { animation-name: ca-at3; }
@keyframes ca-at3 {
  0.00%, 40.00% { fill: #fff; }
  40.53%, 49.33% { fill: #26201e; }
  49.87%, 100.00% { fill: #fff; }
}
.caption-scene .bb0 { animation-name: ca-bb0; transform-origin: 50% 50%; }
@keyframes ca-bb0 {
  0.00%, 53.33% { opacity: 0; transform: scale(0.85); }
  54.13% { opacity: 1; transform: none; }
  60.00% { opacity: 1; transform: none; }
  60.53%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .bt0 { animation-name: ca-bt0; }
@keyframes ca-bt0 {
  0.00%, 53.33% { fill: #fff; }
  53.87%, 60.00% { fill: #26201e; }
  60.53%, 100.00% { fill: #fff; }
}
.caption-scene .bb1 { animation-name: ca-bb1; transform-origin: 50% 50%; }
@keyframes ca-bb1 {
  0.00%, 60.00% { opacity: 0; transform: scale(0.85); }
  60.80% { opacity: 1; transform: none; }
  66.67% { opacity: 1; transform: none; }
  67.20%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .bt1 { animation-name: ca-bt1; }
@keyframes ca-bt1 {
  0.00%, 60.00% { fill: #fff; }
  60.53%, 66.67% { fill: #26201e; }
  67.20%, 100.00% { fill: #fff; }
}
.caption-scene .bb2 { animation-name: ca-bb2; transform-origin: 50% 50%; }
@keyframes ca-bb2 {
  0.00%, 66.67% { opacity: 0; transform: scale(0.85); }
  67.47% { opacity: 1; transform: none; }
  73.33% { opacity: 1; transform: none; }
  73.87%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .bt2 { animation-name: ca-bt2; }
@keyframes ca-bt2 {
  0.00%, 66.67% { fill: #fff; }
  67.20%, 73.33% { fill: #26201e; }
  73.87%, 100.00% { fill: #fff; }
}
.caption-scene .bb3 { animation-name: ca-bb3; transform-origin: 50% 50%; }
@keyframes ca-bb3 {
  0.00%, 73.33% { opacity: 0; transform: scale(0.85); }
  74.13% { opacity: 1; transform: none; }
  84.00% { opacity: 1; transform: none; }
  84.53%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .bt3 { animation-name: ca-bt3; }
@keyframes ca-bt3 {
  0.00%, 73.33% { fill: #fff; }
  73.87%, 84.00% { fill: #26201e; }
  84.53%, 100.00% { fill: #fff; }
}
.caption-scene .plain { animation-name: ca-plain; }
@keyframes ca-plain {
  0.00%, 18.00% { opacity: 1; }
  18.67%, 95.33% { opacity: 0; }
  96.67%, 100.00% { opacity: 1; }
}
.caption-scene .kar1 { animation-name: ca-kar1; }
@keyframes ca-kar1 {
  0.00%, 18.00% { opacity: 0; }
  18.67%, 49.33% { opacity: 1; }
  50.00%, 100.00% { opacity: 0; }
}
.caption-scene .kar2 { animation-name: ca-kar2; }
@keyframes ca-kar2 {
  0.00%, 49.33% { opacity: 0; }
  50.00%, 95.33% { opacity: 1; }
  96.67%, 100.00% { opacity: 0; }
}
.caption-scene .press { animation-name: ca-press; transform-origin: 50% 50%; }
@keyframes ca-press {
  0.00%, 10.67% { transform: none; filter: none; }
  12.00% { transform: scale(0.94); }
  14.00% { transform: none; filter: brightness(1.12); }
  16.67%, 100.00% { transform: none; filter: none; }
}
.caption-scene .made0 { animation-name: ca-made0; transform-origin: 0 50%; }
@keyframes ca-made0 {
  0.00%, 14.67% { opacity: 0; transform: scaleX(0.2); }
  16.33% { opacity: 1; transform: scaleX(1.04); }
  17.33%, 94.67% { opacity: 1; transform: none; }
  97.33%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .made1 { animation-name: ca-made1; transform-origin: 0 50%; }
@keyframes ca-made1 {
  0.00%, 16.00% { opacity: 0; transform: scaleX(0.2); }
  17.67% { opacity: 1; transform: scaleX(1.04); }
  18.67%, 94.67% { opacity: 1; transform: none; }
  97.33%, 100.00% { opacity: 0; transform: none; }
}
.caption-scene .sweep { animation-name: ca-sweep; animation-timing-function: linear; }
@keyframes ca-sweep {
  0.00%, 18.67% { transform: none; }
  85.33% { transform: translateX(490px); }
  95.33% { transform: translateX(490px); }
  100.00% { transform: none; }
}
.caption-scene .imp { animation-name: ca-imp; transform-origin: 50% 100%; }
@keyframes ca-imp {
  0.00% { transform: none; }
  14.33% { transform: none; }
  15.67% { transform: translateY(-12px) rotate(-3deg); }
  17.33% { transform: none; }
  100.00% { transform: none; }
}
.caption-scene .word { font-family: var(--text); font-size: 22px; font-weight: 800; fill: #fff; }
.caption-scene .plain .word { stroke: #000; stroke-width: 3px; paint-order: stroke; }

/* ---------- Beat Imp: Ctrl+Shift+B marks the hits, then the song plays over them ---------- */

.beat-scene .m0 { animation-name: be-m0; transform-origin: 50% 0; }
@keyframes be-m0 {
  0.00%, 9.33% { opacity: 0; transform: scale(0.2); }
  10.33% { opacity: 1; transform: scale(1.2); }
  11.33%, 17.13% { opacity: 1; transform: none; }
  17.73% { opacity: 1; transform: scale(1.5); }
  19.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m1 { animation-name: be-m1; transform-origin: 50% 0; }
@keyframes be-m1 {
  0.00%, 9.73% { opacity: 0; transform: scale(0.2); }
  10.73% { opacity: 1; transform: scale(1.2); }
  11.73%, 23.80% { opacity: 1; transform: none; }
  24.40% { opacity: 1; transform: scale(1.5); }
  26.00%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m2 { animation-name: be-m2; transform-origin: 50% 0; }
@keyframes be-m2 {
  0.00%, 10.13% { opacity: 0; transform: scale(0.2); }
  11.13% { opacity: 1; transform: scale(1.2); }
  12.13%, 27.13% { opacity: 1; transform: none; }
  27.73% { opacity: 1; transform: scale(1.5); }
  29.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m3 { animation-name: be-m3; transform-origin: 50% 0; }
@keyframes be-m3 {
  0.00%, 10.53% { opacity: 0; transform: scale(0.2); }
  11.53% { opacity: 1; transform: scale(1.2); }
  12.53%, 32.13% { opacity: 1; transform: none; }
  32.73% { opacity: 1; transform: scale(1.5); }
  34.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m4 { animation-name: be-m4; transform-origin: 50% 0; }
@keyframes be-m4 {
  0.00%, 10.93% { opacity: 0; transform: scale(0.2); }
  11.93% { opacity: 1; transform: scale(1.2); }
  12.93%, 37.13% { opacity: 1; transform: none; }
  37.73% { opacity: 1; transform: scale(1.5); }
  39.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m5 { animation-name: be-m5; transform-origin: 50% 0; }
@keyframes be-m5 {
  0.00%, 11.33% { opacity: 0; transform: scale(0.2); }
  12.33% { opacity: 1; transform: scale(1.2); }
  13.33%, 48.80% { opacity: 1; transform: none; }
  49.40% { opacity: 1; transform: scale(1.5); }
  51.00%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m6 { animation-name: be-m6; transform-origin: 50% 0; }
@keyframes be-m6 {
  0.00%, 11.73% { opacity: 0; transform: scale(0.2); }
  12.73% { opacity: 1; transform: scale(1.2); }
  13.73%, 53.80% { opacity: 1; transform: none; }
  54.40% { opacity: 1; transform: scale(1.5); }
  56.00%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m7 { animation-name: be-m7; transform-origin: 50% 0; }
@keyframes be-m7 {
  0.00%, 12.13% { opacity: 0; transform: scale(0.2); }
  13.13% { opacity: 1; transform: scale(1.2); }
  14.13%, 58.80% { opacity: 1; transform: none; }
  59.40% { opacity: 1; transform: scale(1.5); }
  61.00%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m8 { animation-name: be-m8; transform-origin: 50% 0; }
@keyframes be-m8 {
  0.00%, 12.53% { opacity: 0; transform: scale(0.2); }
  13.53% { opacity: 1; transform: scale(1.2); }
  14.53%, 60.47% { opacity: 1; transform: none; }
  61.07% { opacity: 1; transform: scale(1.5); }
  62.67%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m9 { animation-name: be-m9; transform-origin: 50% 0; }
@keyframes be-m9 {
  0.00%, 12.93% { opacity: 0; transform: scale(0.2); }
  13.93% { opacity: 1; transform: scale(1.2); }
  14.93%, 70.47% { opacity: 1; transform: none; }
  71.07% { opacity: 1; transform: scale(1.5); }
  72.67%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m10 { animation-name: be-m10; transform-origin: 50% 0; }
@keyframes be-m10 {
  0.00%, 13.33% { opacity: 0; transform: scale(0.2); }
  14.33% { opacity: 1; transform: scale(1.2); }
  15.33%, 77.13% { opacity: 1; transform: none; }
  77.73% { opacity: 1; transform: scale(1.5); }
  79.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m11 { animation-name: be-m11; transform-origin: 50% 0; }
@keyframes be-m11 {
  0.00%, 13.73% { opacity: 0; transform: scale(0.2); }
  14.73% { opacity: 1; transform: scale(1.2); }
  15.73%, 82.13% { opacity: 1; transform: none; }
  82.73% { opacity: 1; transform: scale(1.5); }
  84.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m12 { animation-name: be-m12; transform-origin: 50% 0; }
@keyframes be-m12 {
  0.00%, 14.13% { opacity: 0; transform: scale(0.2); }
  15.13% { opacity: 1; transform: scale(1.2); }
  16.13%, 87.13% { opacity: 1; transform: none; }
  87.73% { opacity: 1; transform: scale(1.5); }
  89.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .m13 { animation-name: be-m13; transform-origin: 50% 0; }
@keyframes be-m13 {
  0.00%, 14.53% { opacity: 0; transform: scale(0.2); }
  15.53% { opacity: 1; transform: scale(1.2); }
  16.53%, 92.13% { opacity: 1; transform: none; }
  92.73% { opacity: 1; transform: scale(1.5); }
  94.33%, 97.33% { opacity: 1; transform: none; }
  99.00%, 100.00% { opacity: 0; transform: none; }
}
.beat-scene .kb { animation-name: be-kb; }
@keyframes be-kb {
  0.00%, 3.33% { opacity: 0; transform: translateY(8px) scale(0.8); }
  5.00% { opacity: 1; transform: none; }
  12.67% { opacity: 1; transform: none; }
  14.33%, 100.00% { opacity: 0; transform: translateY(-6px); }
}
.beat-scene .sweep { animation-name: be-sweep; animation-timing-function: linear; }
@keyframes be-sweep {
  0.00%, 17.33% { opacity: 0; transform: none; }
  17.40% { opacity: 1; transform: none; }
  97.33% { opacity: 1; transform: translateX(492px); }
  98.67%, 100.00% { opacity: 0; transform: translateX(492px); }
}
.beat-scene .imp { animation-name: be-imp; transform-origin: 50% 100%; }
@keyframes be-imp {
  0.00% { transform: none; }
  17.00% { transform: none; }
  18.33% { transform: translateY(5px) scaleY(0.95); }
  20.00% { transform: none; }
  37.00% { transform: none; }
  38.33% { transform: translateY(5px) scaleY(0.95); }
  40.00% { transform: none; }
  48.67% { transform: none; }
  50.00% { transform: translateY(5px) scaleY(0.95); }
  51.67% { transform: none; }
  70.33% { transform: none; }
  71.67% { transform: translateY(5px) scaleY(0.95); }
  73.33% { transform: none; }
  87.00% { transform: none; }
  88.33% { transform: translateY(5px) scaleY(0.95); }
  90.00% { transform: none; }
  100.00% { transform: none; }
}

/* ---------- Motion Imp: a Whip Pan and a Flash that find the cut, a Fade In on the title ---------- */

.motion-scene .tilesA { animation-name: mo-tilesA; }
@keyframes mo-tilesA {
  0.00%, 32.67% { opacity: 1; }
  34.00%, 56.67% { opacity: 0; }
  58.00%, 100.00% { opacity: 1; }
}
.motion-scene .tilesB { animation-name: mo-tilesB; }
@keyframes mo-tilesB {
  0.00%, 32.67% { opacity: 0; }
  34.00%, 56.67% { opacity: 1; }
  58.00%, 100.00% { opacity: 0; }
}
.motion-scene .chipA { animation-name: mo-chipA; }
@keyframes mo-chipA {
  0.00%, 32.67% { fill: #f8f5f1; }
  34.00%, 56.67% { fill: #2b2826; }
  58.00%, 100.00% { fill: #f8f5f1; }
}
.motion-scene .chipB { animation-name: mo-chipB; }
@keyframes mo-chipB {
  0.00%, 32.67% { fill: #2b2826; }
  34.00%, 56.67% { fill: #f8f5f1; }
  58.00%, 100.00% { fill: #2b2826; }
}
.motion-scene .chipAt { animation-name: mo-chipAt; }
@keyframes mo-chipAt {
  0.00%, 32.67% { fill: #26201e; }
  34.00%, 56.67% { fill: #d9d2cc; }
  58.00%, 100.00% { fill: #26201e; }
}
.motion-scene .chipBt { animation-name: mo-chipBt; }
@keyframes mo-chipBt {
  0.00%, 32.67% { fill: #d9d2cc; }
  34.00%, 56.67% { fill: #26201e; }
  58.00%, 100.00% { fill: #d9d2cc; }
}
.motion-scene .ringWhip { animation-name: mo-ringWhip; }
@keyframes mo-ringWhip {
  0.00%, 6.00% { opacity: 0; }
  7.00% { opacity: 1; }
  30.67% { opacity: 1; }
  31.67%, 100.00% { opacity: 0; }
}
.motion-scene .ringFade { animation-name: mo-ringFade; }
@keyframes mo-ringFade {
  0.00%, 36.67% { opacity: 0; }
  37.67% { opacity: 1; }
  56.00% { opacity: 1; }
  57.00%, 100.00% { opacity: 0; }
}
.motion-scene .ringFlash { animation-name: mo-ringFlash; }
@keyframes mo-ringFlash {
  0.00%, 60.67% { opacity: 0; }
  61.67% { opacity: 1; }
  92.00% { opacity: 1; }
  93.00%, 100.00% { opacity: 0; }
}
.motion-scene .add { animation-name: mo-add; transform-origin: 50% 50%; }
@keyframes mo-add {
  0.00% { transform: none; }
  10.33% { transform: none; filter: none; }
  11.33% { transform: scale(0.95); filter: brightness(1.1); }
  12.67% { transform: none; filter: none; }
  40.33% { transform: none; filter: none; }
  41.33% { transform: scale(0.95); filter: brightness(1.1); }
  42.67% { transform: none; filter: none; }
  65.00% { transform: none; filter: none; }
  66.00% { transform: scale(0.95); filter: brightness(1.1); }
  67.33% { transform: none; filter: none; }
  100.00% { transform: none; }
}
.motion-scene .layer1 { animation-name: mo-layer1; transform-origin: 50% 50%; }
@keyframes mo-layer1 {
  0.00%, 12.67% { opacity: 0; transform: scaleY(0.2); }
  14.67%, 94.67% { opacity: 1; transform: none; }
  96.67%, 100.00% { opacity: 0; transform: none; }
}
.motion-scene .layer2 { animation-name: mo-layer2; transform-origin: 50% 50%; }
@keyframes mo-layer2 {
  0.00%, 67.33% { opacity: 0; transform: scaleY(0.2); }
  69.33%, 94.67% { opacity: 1; transform: none; }
  96.67%, 100.00% { opacity: 0; transform: none; }
}
.motion-scene .sweep { animation-name: mo-sweep; animation-timing-function: linear; }
@keyframes mo-sweep {
  0.00%, 16.00% { transform: none; }
  23.33% { transform: translateX(70px); }
  70.67% { transform: translateX(70px); }
  78.67% { transform: translateX(170px); }
  94.67% { transform: translateX(170px); }
  100.00% { transform: none; }
}
.motion-scene .clipA { animation-name: mo-clipA; }
@keyframes mo-clipA {
  0.00%, 20.67% { transform: none; opacity: 1; }
  23.33% { transform: translateX(-380px); opacity: 1; }
  23.67%, 97.33% { transform: translateX(-380px); opacity: 0; }
  97.67%, 100.00% { transform: none; opacity: 1; }
}
.motion-scene .clipB { animation-name: mo-clipB; }
@keyframes mo-clipB {
  0.00%, 20.67% { transform: translateX(380px); opacity: 1; }
  23.33%, 77.33% { transform: none; opacity: 1; }
  77.67%, 97.33% { transform: none; opacity: 0; }
  97.67%, 100.00% { transform: translateX(380px); opacity: 1; }
}
.motion-scene .streaks { animation-name: mo-streaks; }
@keyframes mo-streaks {
  0.00%, 20.33% { opacity: 0; }
  21.33%, 22.67% { opacity: 0.9; }
  24.00%, 100.00% { opacity: 0; }
}
.motion-scene .title { animation-name: mo-title; }
@keyframes mo-title {
  0.00%, 43.33% { opacity: 0; }
  52.00%, 77.33% { opacity: 1; }
  77.67%, 100.00% { opacity: 0; }
}
.motion-scene .flash { animation-name: mo-flash; }
@keyframes mo-flash {
  0.00%, 76.00% { opacity: 0; }
  77.33% { opacity: 1; }
  80.67%, 100.00% { opacity: 0; }
}
.motion-scene .imp { animation-name: mo-imp; transform-origin: 50% 100%; }
@keyframes mo-imp {
  0.00% { transform: none; }
  21.00% { transform: none; }
  22.33% { transform: translateX(8px) rotate(4deg); }
  24.00% { transform: none; }
  43.67% { transform: none; }
  45.00% { transform: translateX(8px) rotate(4deg); }
  46.67% { transform: none; }
  77.00% { transform: none; }
  78.33% { transform: translateX(8px) rotate(4deg); }
  80.00% { transform: none; }
  100.00% { transform: none; }
}