/* Pet sprite playback override.
   Loaded after all portal CSS so each sprite sheet lands exactly on a frame. */

@keyframes dapPetWalk48x6 {
  from { background-position: 0 0; }
  to { background-position: -360px 0; }
}

@keyframes dapPetIdle48x4 {
  from { background-position: 0 0; }
  to { background-position: -216px 0; }
}

@keyframes dapPetWalk32x6 {
  from { background-position: 0 0; }
  to { background-position: -280px 0; }
}

@keyframes dapPetIdle32x4Bird {
  from { background-position: 0 0; }
  to { background-position: -168px 0; }
}

@keyframes dapPetWalk32x4Rat,
@keyframes dapPetIdle32x4Rat {
  from { background-position: 0 0; }
  to { background-position: -156px 0; }
}

html body .portal .pet-cat-orange .petSpritewalk,
html body .portal .pet-dog-1 .petSpritewalk {
  animation-name: dapPetWalk48x6 !important;
  animation-duration: .62s !important;
  animation-timing-function: steps(5, end) !important;
  animation-iteration-count: infinite !important;
}

html body .portal .pet-cat-orange .petSpriteidle,
html body .portal .pet-dog-1 .petSpriteidle {
  animation-name: dapPetIdle48x4 !important;
  animation-duration: 1s !important;
  animation-timing-function: steps(3, end) !important;
  animation-iteration-count: infinite !important;
}

html body .portal .pet-bird-1 .petSpritewalk {
  animation-name: dapPetWalk32x6 !important;
  animation-duration: .62s !important;
  animation-timing-function: steps(5, end) !important;
  animation-iteration-count: infinite !important;
}

html body .portal .pet-bird-1 .petSpriteidle {
  animation-name: dapPetIdle32x4Bird !important;
  animation-duration: 1s !important;
  animation-timing-function: steps(3, end) !important;
  animation-iteration-count: infinite !important;
}

html body .portal .pet-rat-1 .petSpritewalk {
  animation-name: dapPetWalk32x4Rat !important;
  animation-duration: .62s !important;
  animation-timing-function: steps(3, end) !important;
  animation-iteration-count: infinite !important;
}

html body .portal .pet-rat-1 .petSpriteidle {
  animation-name: dapPetIdle32x4Rat !important;
  animation-duration: 1s !important;
  animation-timing-function: steps(3, end) !important;
  animation-iteration-count: infinite !important;
}

/* The pet is explicitly enabled by the user, so its own pixel animation remains active
   even when the OS asks the rest of the portal to reduce decorative motion. */
@media (prefers-reduced-motion: reduce) {
  html body .portal .petCompanion {
    display: block !important;
  }

  html body .portal .petSpritewalk,
  html body .portal .petSpriteidle {
    animation-iteration-count: infinite !important;
  }

  html body .portal .pet-cat-orange .petSpritewalk,
  html body .portal .pet-dog-1 .petSpritewalk,
  html body .portal .pet-bird-1 .petSpritewalk,
  html body .portal .pet-rat-1 .petSpritewalk {
    animation-duration: .62s !important;
  }

  html body .portal .pet-cat-orange .petSpriteidle,
  html body .portal .pet-dog-1 .petSpriteidle,
  html body .portal .pet-bird-1 .petSpriteidle,
  html body .portal .pet-rat-1 .petSpriteidle {
    animation-duration: 1s !important;
  }
}