/* ==========================================================================
   robots.css — robot-specific motion keyframes for robots.js scenes.
   Reuses spots.css palette + shared loops (k-bob, k-blink, k-twinkle, k-pulse,
   k-rise, k-float); adds the bits the helper-bots need. Gated, like spots.css,
   on html.js + reduced-motion so print / no-JS show a clean static frame.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* The perpetual gentle wave belongs to the interlude couriers only — a spot
     robot waving forever reads as a broken machine. */
  html.js .interlude .k-wave { animation: k-wave 2.6s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: top center; }
  html.js .k-conveyor { animation: k-conveyor 2.4s linear infinite; }
  html.js .k-fade     { animation: k-fade 4.6s var(--ease-breathe) infinite; transform-box: fill-box; }
  html.js .k-dash     { stroke-dasharray: 3 12; animation: k-dash 3.4s linear infinite; }

  /* Spot robots greet the room ONCE the scene has assembled — three quick
     oscillations, then the arm rests for the remainder of the cycle.
     --wave-dur (9–13s, stamped per instance) sets the rare encore period.
     The delay rides the spot's --reveal-delay + 1.6s so the greeting always
     lands AFTER the robot's own k-pop (max ~1.06s post-delay) — a wave from
     a still-invisible robot would be a wave to no one. */
  html.js .spot.is-visible .k-wave {
    animation: k-wave-hello var(--wave-dur, 11s) var(--ease-breathe) infinite;
    animation-delay: calc(var(--reveal-delay, 0ms) + 1.6s);
    transform-box: fill-box;
    transform-origin: top center;
  }

  /* SCENE ASSEMBLY — robots.js wraps each scene piece in .k-pop with --pi set
     to its narrative order (glow → ground → cast → props → sparkles). Pieces
     squash in from below and settle when the spot scrolls into view. The
     spot's own --reveal-delay (inherited) keeps the cascade behind the
     container's choreographed entrance (e.g. the hero's 1300ms hold). */
  html.js .spot .k-pop {
    opacity: 0;
    transform: translateY(14px) scale(0.6);
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  html.js .spot .k-pop--ctr { transform-origin: center; }
  html.js .spot.is-visible .k-pop {
    animation: k-pop 0.62s var(--ease-out) both;
    animation-delay: calc(var(--pi, 0) * 110ms + var(--reveal-delay, 0ms));
  }

  /* SECONDARY MOTION — the antenna sways an eighth of a period behind its
     body's bob (follow-through), keyed to the same per-instance clock. */
  html.js .spot .k-antenna {
    animation: k-antenna-lag var(--bob-dur, 4.4s) var(--ease-breathe) infinite;
    animation-delay: calc(var(--bob-delay, 0s) - var(--bob-dur, 4.4s) / 8);
    transform-box: fill-box;
    transform-origin: center bottom;
  }

  /* Pupils glance somewhere every ~11s — stepped, darty, alive. */
  html.js .spot .k-gaze {
    animation: k-gaze 11s steps(1, end) infinite;
    animation-delay: var(--gaze-delay, 0s);
    transform-box: fill-box;
  }
}

@keyframes k-wave     { 0%,100% { transform: rotate(7deg); } 50% { transform: rotate(-12deg); } }
@keyframes k-wave-hello {
  0%       { transform: rotate(7deg); }
  3%       { transform: rotate(-14deg); }
  6%       { transform: rotate(7deg); }
  9%       { transform: rotate(-14deg); }
  12%      { transform: rotate(7deg); }
  15%      { transform: rotate(-10deg); }
  18%,100% { transform: rotate(7deg); }
}
@keyframes k-conveyor { from { transform: translateX(0); } to { transform: translateX(44px); } }
@keyframes k-fade     { 0%,42% { opacity: .9; } 70%,100% { opacity: .12; } }
@keyframes k-dash     { to { stroke-dashoffset: -30; } }
@keyframes k-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.6); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes k-antenna-lag {
  0%, 100% { transform: rotate(2.5deg); }
  50%      { transform: rotate(-2.5deg); }
}
@keyframes k-gaze {
  0%, 78%  { transform: translateX(0); }
  80%, 88% { transform: translateX(1.6px); }
  90%, 94% { transform: translateX(-1.2px); }
  96%, 100%{ transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .spot .k-wave, .spot .k-conveyor, .spot .k-fade, .spot .k-dash,
  .spot .k-pop, .spot .k-antenna, .spot .k-gaze,
  .interlude .k-wave { animation: none !important; }
  .spot .k-pop { opacity: 1 !important; transform: none !important; }
}