/* ─────────────────────────────────────────────────────────────────────────────
   Agent scenes — the hero illustration system.

   One scene per rotating headline word. Every scene is the same stage: a single
   workbench line with agents standing behind it, doing one recognisable piece of
   work. The bench is what holds the set together — it never moves, so switching
   scenes reads as the same team changing jobs rather than six unrelated loops.

   Two colours carry all the meaning:
     --scene-worker  ink      the agents. Never gold.
     --scene-work    gold     the thing being produced or moved. Never the agent.
   plus --scene-rail, a low-contrast neutral for everything that is scenery:
   the bench, empty slots, the shelf, the box.

   Rules for adding a scene: keep the bench at y=150 in the 0 0 320 200 viewBox,
   author the static markup at a frame that reads correctly on its own (that
   frame is what reduced-motion users see), and drive motion only from the
   keyframes below. No glow, no particles, no gradients.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --scene-worker: rgba(10, 10, 10, 0.82);
  --scene-work:   #8A6508;
  --scene-rail:   rgba(10, 10, 10, 0.30);
  --scene-ink-on-work: #F4F4F3;
}

[data-theme="dark"] {
  --scene-worker: rgba(245, 245, 244, 0.78);
  --scene-work:   #D4AF37;
  --scene-rail:   rgba(255, 255, 255, 0.28);
  --scene-ink-on-work: #0A0A0A;
}

.scene-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 256 / 124;
}

.ascene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.ascene.active {
  opacity: 1;
  transform: translateY(0);
}

/* Only the visible scene animates — a paused loop off-screen would be a frame
   ahead by the time it fades in. */
.ascene * { animation-play-state: paused; }
.ascene.active * { animation-play-state: running; }

.scene-worker { fill: var(--scene-worker); }
.scene-work   { fill: var(--scene-work); }
.scene-rail   { fill: none; stroke: var(--scene-rail); stroke-width: 2; }
.scene-rail-solid { fill: var(--scene-rail); }
.scene-eye    { fill: var(--scene-ink-on-work); }
.scene-count  {
  fill: var(--scene-worker);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

/* ── Motion vocabulary ──────────────────────────────────────────────────────
   Every scene is built from these. A hand travelling a line is "working on it";
   a gold shape travelling into an outline is "placing it"; a machine head
   tracking across its work is "it is running"; something gold growing upward is
   "it worked" — a bar of returns, or a part building on a print bed. Nothing
   else. */

/* Agents are alive but not fidgety: 2px, slow, offset per agent so a group of
   them doesn't pulse in unison. */
@keyframes agentBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* A hand working across something — the scan, the typing, the assembling. */
@keyframes handWork {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(10px, -3px); }
  60%      { transform: translate(20px, 0); }
}

@keyframes handReach {
  0%, 100% { transform: translate(0, 0); }
  40%      { transform: translate(8px, -6px); }
}

/* Gold artifact leaving the hands and landing in its slot, then the loop
   resets it invisibly so the placement always reads forward. It arcs up on the
   way so it passes over the shelf rather than sliding through everything
   already sitting on it. */
@keyframes placeItem {
  0%       { transform: translate(0, 0); opacity: 0; }
  8%       { transform: translate(0, 0); opacity: 1; }
  32%      { transform: translate(calc(var(--to-x, 90px) * 0.4),
                                  calc(var(--to-y, -12px) - 44px)); opacity: 1; }
  55%      { transform: translate(var(--to-x, 90px), var(--to-y, -12px)); opacity: 1; }
  92%      { transform: translate(var(--to-x, 90px), var(--to-y, -12px)); opacity: 1; }
  100%     { transform: translate(var(--to-x, 90px), var(--to-y, -12px)); opacity: 0; }
}

/* Something sent away: it goes, it does not come back. */
@keyframes sendOff {
  0%       { transform: translate(0, 0) scale(1); opacity: 0; }
  10%      { transform: translate(0, 0) scale(1); opacity: 1; }
  70%      { transform: translate(78px, -34px) scale(0.55); opacity: 1; }
  100%     { transform: translate(104px, -46px) scale(0.4); opacity: 0; }
}

/* A result registering: a bar stepping up, a slot confirming. */
@keyframes barRise {
  0%, 15%   { transform: scaleY(0.18); }
  45%, 100% { transform: scaleY(1); }
}

/* A machine head tracking across its work. Symmetric, so it turns around at
   each end rather than snapping home the way handWork does. */
@keyframes gantrySweep {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(24px); }
}

@keyframes settleIn {
  0%, 50%  { opacity: 0; transform: scale(0.7); }
  62%      { opacity: 1; transform: scale(1.12); }
  72%, 94% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1); }
}

/* The scan pass across a box. */
@keyframes scanSweep {
  0%, 100% { transform: translateX(0); opacity: 0.25; }
  20%      { opacity: 1; }
  50%      { transform: translateX(52px); opacity: 1; }
  80%      { opacity: 0.25; }
}

/* Three stacked numbers cross-faded to give a counter that ticks with no JS. */
@keyframes tickDigit {
  0%, 32%   { opacity: 1; }
  33%, 100% { opacity: 0; }
}

.agent-group   { animation: agentBob 3.2s ease-in-out infinite; }
.hand-work     { animation: handWork 4s ease-in-out infinite; }
.hand-reach    { animation: handReach 4s ease-in-out infinite; }
.artifact-place{ animation: placeItem 4s ease-in-out infinite; }
.artifact-send { animation: sendOff 4s ease-in-out infinite; }
/* transform-box: fill-box so these scale about their own edge. SVG defaults to
   view-box, which would pivot them around the middle of the stage instead —
   a bar would sink through the bench on its way up. */
.bar-rise      { animation: barRise 4s ease-in-out infinite;
                 transform-box: fill-box; transform-origin: bottom; }
.mark-settle   { animation: settleIn 4s ease-in-out infinite;
                 transform-box: fill-box; transform-origin: center; }
.print-head    { animation: gantrySweep 4s ease-in-out infinite; }
.scan-bar      { animation: scanSweep 4s ease-in-out infinite; }
.tick-digit    { animation: tickDigit 4s linear infinite; opacity: 0; }

/* ── Reduced motion ─────────────────────────────────────────────────────────
   Each scene's markup is authored at a frame that reads on its own — the
   artifact already placed, the bar already up — so stopping every animation
   leaves a correct still, not a half-finished one. Scene changes become an
   instant swap rather than a drift. */
@media (prefers-reduced-motion: reduce) {
  .ascene, .ascene * { animation: none !important; transition: none !important; }
  .ascene { transform: none; }
  .artifact-place, .artifact-send, .mark-settle, .tick-digit { opacity: 1; }
  .artifact-place { transform: translate(var(--to-x, 90px), var(--to-y, -12px)); }
  .tick-digit:not(.tick-final) { opacity: 0; }
}