/* nextmakerlab pixel layer — sizes and motion for pixel.js.
   Only transform and opacity animate. Frames step with steps(); every sprite
   keeps one still frame under prefers-reduced-motion. */

:where(.px) { --s: 3; }                   /* source pixel → screen pixels */
.px {
  display: inline-block;
  position: relative;
  width: calc(var(--px-w, 24) * var(--s) * 1px);
  height: calc(var(--px-h, 24) * var(--s) * 1px);
  line-height: 0;
  vertical-align: bottom;
  pointer-events: none;
  user-select: none;
}
.px-move, .px-win { display: block; width: 100%; height: 100%; }
.px-win { overflow: hidden; }
.px-strip {
  display: block;
  width: calc(var(--px-n, 1) * 100%);
  max-width: none;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: px-frames var(--px-dur, 1s) steps(var(--px-n, 1)) infinite;
  will-change: transform;
}
@keyframes px-frames { to { transform: translateX(-100%); } }

/* sizes per kind and slot (the page session may override --s) */
/* defaults use :where() so any page rule (e.g. .mc-peng { --s: 3 }) wins whatever the load order */
:where(.px-penguin) { --s: 4; }       /* 24 × 20 box, the 16 px penguin inside it is 64 px tall */
:where(.px-block)   { --s: 3; }
:where(.px-prop)    { --s: 4; }
[data-px-slot="drop"].px-penguin  { --s: 8; }
[data-px-slot="empty"].px-penguin { --s: 4; }

/* walk: along the parent's width, turn, walk back (pixel.js sets --px-run / --px-trip) */
.px-m-walk > .px-move { animation: px-walk var(--px-trip, 8s) linear infinite; }
.px-m-walk .px-win    { animation: px-turn var(--px-trip, 8s) steps(1) infinite; }
@keyframes px-walk {
  0%, 2%   { transform: translateX(0); }
  48%, 52% { transform: translateX(var(--px-run, 0px)); }
  98%, 100% { transform: translateX(0); }
}
@keyframes px-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }

/* hop: a result arrived */
.px-m-hop > .px-move { animation: px-hop 600ms steps(6) infinite; }
@keyframes px-hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--s) * -4px)); }
}

/* slide: belly slide once across the parent, then out of view */
.px-m-slide > .px-move { animation: px-slide calc(var(--px-trip, 4s) / 2) linear 1 forwards; }
@keyframes px-slide {
  0%   { transform: translateX(calc(var(--s) * -24px)); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(calc(var(--px-run, 0px) + var(--s) * 24px)); opacity: 0; }
}

/* hero-field blocks: drift in, settle, then follow scroll by at most 12 px */
.px-field { transform: translateY(var(--px-par, 0px)); }
.px-field > .px-move {
  animation: px-drift 1400ms steps(14) var(--px-delay, 0ms) both,
             px-bob 3200ms steps(4) calc(var(--px-delay, 0ms) + 1400ms) infinite;
}
@keyframes px-drift {
  from { transform: translate(var(--px-from-x, 0px), var(--px-from-y, -60px)); opacity: 0; }
  to   { transform: translate(0, 0); opacity: 1; }
}
@keyframes px-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--s) * -1px)); }
}

/* footer-scene: the word in pixel letters on an ice floor; the penguin rests on the ice */
.px-scene {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  line-height: 0;
  text-align: center;
}
.px-scene-word { display: inline-block; image-rendering: pixelated; image-rendering: crisp-edges; }
.px-scene-track {
  position: absolute;
  left: 0;
  bottom: calc(var(--px-s, 1) * 8px);
  height: 0;
}
.px-scene-track > .px-penguin {
  --s: var(--px-s, 1);
  position: absolute;
  left: 0; bottom: 0;
}
.px-scene-track > .px-penguin:not(.px-m-slide) { left: calc(var(--px-s, 1) * 5px); }

/* PX.burst */
.px-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2147483000; }
.px-burst > i { position: absolute; left: -3px; top: -3px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .px-strip, .px-move, .px-win, .px-field, .px-field > .px-move { animation: none !important; }
  .px-field > .px-move { opacity: 1; transform: none; }
}