/*
  Pixel-art hero (see js/pixel-hero.js).
  Colors are variables so a page can adjust them, e.g. a lighter hair color on
  a dark background. data-px on an ancestor picks the animation.
*/

.px-hero {
  --px-hair: #1a1f2d;
  --px-skin: #f1e3cf;
  --px-eye: #1a1f2d;
  --px-mouth: #b5523f;
  --px-shirt: #f0a952;
  --px-shirt-dk: #d98a36;
  --px-pants: #3b4668;
  --px-shoe: #1a1f2d;
  shape-rendering: crispEdges;
}

.px-hero .c-hair { fill: var(--px-hair); }
.px-hero .c-skin { fill: var(--px-skin); }
.px-hero .c-eye { fill: var(--px-eye); }
.px-hero .c-mouth { fill: var(--px-mouth); }
.px-hero .c-shirt { fill: var(--px-shirt); }
.px-hero .c-shirt-dk { fill: var(--px-shirt-dk); }
.px-hero .c-pants { fill: var(--px-pants); }
.px-hero .c-shoe { fill: var(--px-shoe); }
.c-teal { fill: #3f8f94; }
.c-white { fill: #ffffff; }
.c-red { fill: #c8553d; }
.c-gold { fill: #f3d27a; }
.c-green { fill: #4fa761; }
.c-glow { fill: #dff7e3; }

/* Two-frame animations: frame A shows for the first half, frame B the second. */
.pxf { opacity: 0; }

[data-px="idle"] .pxf-stand,
[data-px="point"] .pxf-point { opacity: 1; }

[data-px="walk"] .pxf-stand,
[data-px="flag"] .pxf-flagA { animation: px-a 0.5s steps(1) infinite; }
[data-px="walk"] .pxf-stride,
[data-px="flag"] .pxf-flagB { animation: px-b 0.5s steps(1) infinite; }

[data-px="wave"] .pxf-wave1,
[data-px="cheer"] .pxf-cheer1 { animation: px-a 0.6s steps(1) infinite; }
[data-px="wave"] .pxf-wave2,
[data-px="cheer"] .pxf-cheer2 { animation: px-b 0.6s steps(1) infinite; }

[data-px="walk"] .px-frames,
[data-px="flag"] .px-frames { animation: px-step 0.5s steps(1) infinite; }
[data-px="cheer"] .px-frames { animation: px-hop 0.6s steps(1) infinite; }

@keyframes px-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes px-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes px-step { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes px-hop { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Without motion, hold the first frame of each pose. */
@media (prefers-reduced-motion: reduce) {
  .pxf { animation: none !important; }
  [data-px="walk"] .pxf-stand,
  [data-px="flag"] .pxf-flagA,
  [data-px="wave"] .pxf-wave1,
  [data-px="cheer"] .pxf-cheer1 { opacity: 1; }
}