/* Milestone 2, phase one: natural eight-direction character motion. */
.s2047-character-animation-phase-one-ready [data-s2047-animation-enhanced="true"] {
  --s2047-motion-speed: 1;
  --s2047-body-rise: 0px;
  --s2047-body-lean: 0deg;
  transform-origin: 50% 92%;
  backface-visibility: hidden;
  will-change: transform, translate;
}

.s2047-character-animation-phase-one-ready [data-s2047-animation-enhanced="true"][data-s2047-direction8="east"],
.s2047-character-animation-phase-one-ready [data-s2047-animation-enhanced="true"][data-s2047-direction8="north-east"],
.s2047-character-animation-phase-one-ready [data-s2047-animation-enhanced="true"][data-s2047-direction8="south-east"] {
  --s2047-character-mirror: 1;
}
.s2047-character-animation-phase-one-ready [data-s2047-animation-enhanced="true"][data-s2047-direction8="west"],
.s2047-character-animation-phase-one-ready [data-s2047-animation-enhanced="true"][data-s2047-direction8="north-west"],
.s2047-character-animation-phase-one-ready [data-s2047-animation-enhanced="true"][data-s2047-direction8="south-west"] {
  --s2047-character-mirror: -1;
}

.s2047-character-animation-phase-one-ready .s2047-natural-walking {
  animation: s2047-natural-stride calc(.38s / var(--s2047-motion-speed)) linear infinite !important;
}
.s2047-character-animation-phase-one-ready .s2047-natural-walking[data-s2047-natural-stride="1"],
.s2047-character-animation-phase-one-ready .s2047-natural-walking[data-s2047-natural-stride="3"] {
  --s2047-body-lean: .65deg;
}
.s2047-character-animation-phase-one-ready .s2047-natural-walking[data-s2047-natural-stride="0"],
.s2047-character-animation-phase-one-ready .s2047-natural-walking[data-s2047-natural-stride="2"] {
  --s2047-body-lean: -.65deg;
}
.s2047-character-animation-phase-one-ready .s2047-natural-idle {
  animation: s2047-idle-breath 2.8s ease-in-out infinite !important;
}

@keyframes s2047-natural-stride {
  0%   { translate: 0 0; rotate: var(--s2047-body-lean); }
  18%  { translate: 0 -1px; rotate: calc(var(--s2047-body-lean) * -1); }
  50%  { translate: 0 0; rotate: var(--s2047-body-lean); }
  68%  { translate: 0 -1px; rotate: calc(var(--s2047-body-lean) * -1); }
  100% { translate: 0 0; rotate: var(--s2047-body-lean); }
}
@keyframes s2047-idle-breath {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.65px; }
}

/* Direction attributes allow real sprite sheets/renderers to select all eight rows. */
.s2047-character-animation-phase-one-ready [data-s2047-direction8="north"] { --s2047-direction-row: 0; }
.s2047-character-animation-phase-one-ready [data-s2047-direction8="north-east"] { --s2047-direction-row: 1; }
.s2047-character-animation-phase-one-ready [data-s2047-direction8="east"] { --s2047-direction-row: 2; }
.s2047-character-animation-phase-one-ready [data-s2047-direction8="south-east"] { --s2047-direction-row: 3; }
.s2047-character-animation-phase-one-ready [data-s2047-direction8="south"] { --s2047-direction-row: 4; }
.s2047-character-animation-phase-one-ready [data-s2047-direction8="south-west"] { --s2047-direction-row: 5; }
.s2047-character-animation-phase-one-ready [data-s2047-direction8="west"] { --s2047-direction-row: 6; }
.s2047-character-animation-phase-one-ready [data-s2047-direction8="north-west"] { --s2047-direction-row: 7; }

@media (prefers-reduced-motion: reduce) {
  .s2047-character-animation-phase-one-ready .s2047-natural-walking,
  .s2047-character-animation-phase-one-ready .s2047-natural-idle { animation: none !important; }
}