/* Small scene layers reuse the existing WebP images. No full-frame raster sheets. */
.scene-motion { position: relative; }
.scene-sprite { display: none; pointer-events: none; }
.motion-ready .scene-sprite { display: block; position: absolute; }
.scene-frame { animation-play-state: paused !important; }
.scene-playing .scene-frame { animation-play-state: running !important; }
.scene-motion-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: 14px/1 var(--mono);
  cursor: pointer;
}
.scene-motion-toggle[hidden] { display: none; }
.scene-motion-toggle:hover { background: #edf3e9; color: var(--green); }
.scene-motion-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Lift the three existing message regions out of the static Discord illustration. */
.scene-discord.motion-ready > img {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M0 0h100v100H0z'/%3E%3Cpath fill='black' d='M52.8 14.5h34.8v15H52.8zM58 30.5h34v15H58zM56.5 46h33v13H56.5z'/%3E%3C/svg%3E");
  mask-mode: luminance;
  mask-size: 100% 100%;
}
.scene-discord.motion-ready .discord-reply {
  background-image: url('assets/builder-story/discord-community-v1.webp');
  background-repeat: no-repeat;
  image-rendering: pixelated;
  mix-blend-mode: multiply;
  filter: brightness(1.04);
  animation: discord-reply 9s ease-out infinite backwards;
}
.reply-1 {
  left: 52.8%; top: 14.5%; width: 34.8%; height: 15%;
  background-size: 287.3563% 666.6667%;
  background-position: 80.9816% 17.0588%;
}
.reply-2 {
  left: 58%; top: 30.5%; width: 34%; height: 15%;
  background-size: 294.1176% 666.6667%;
  background-position: 87.8788% 35.8824%;
}
.reply-3 {
  left: 56.5%; top: 46%; width: 33%; height: 13%;
  background-size: 303.0303% 769.2308%;
  background-position: 84.3284% 52.8736%;
}
.scene-discord.motion-ready .reply-2 { animation-delay: 0.8s; }
.scene-discord.motion-ready .reply-3 { animation-delay: 1.6s; }
@keyframes discord-reply {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  18%, 86% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-2px); }
}

/* Pixel progress inside the recorded lesson screen; the illustration stays still. */
.recorded-progress {
  left: 63.1%; top: 46.9%; width: 16.4%; height: 1.4%;
  transform: rotate(3deg);
  overflow: hidden;
  background: #5e625c;
}
.playback-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #8db678;
  transform-origin: left center;
  animation: lesson-progress 10s steps(16, end) infinite;
}
@keyframes lesson-progress {
  0%, 10% { transform: scaleX(0.2); }
  80%, 100% { transform: scaleX(1); }
}
@media print {
  .scene-motion > img { mask-image: none !important; }
  .scene-sprite, .scene-motion-toggle { display: none !important; }
}