/* ============================================================
   NO PERRY — OX_ESCAPE_SEQUENCE
   Chibi pixel chase: left-facing ox + gatherer, Bear Paws ganker, dust.
   Native frames: ox 64×32 (×4), ganker/dust 32×32 (×4). Display 5×.

   Layer stack (inside #hero):
     canvas / ambient          z 0
     rear mist                 z 2
     vignettes                 z 3
     Hero UI / title / CTAs    z 4
     OX_ESCAPE_SEQUENCE        z 5
   ============================================================ */

.ox-escape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 128px;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.ox-escape-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.ox-unit,
.ganker-unit {
  position: absolute;
  bottom: 6%;
  left: 0;
  will-change: transform;
  transform: translate3d(110vw, 0, 0);
}

.ox-unit {
  width: 320px;
  height: 160px;
}
.ganker-unit {
  width: 160px;
  height: 160px;
}

.ox-run,
.ganker-run {
  position: absolute;
  inset: 0;
}

.ox-sprite,
.ganker-sprite,
.ox-dust-sprite,
.ganker-dust-sprite,
.ox-spark {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
}

.ox-sprite,
.ganker-sprite {
  position: absolute;
  left: 0;
  bottom: 8px;
  filter:
    drop-shadow(0 0 1px rgba(255, 236, 170, 0.9))
    drop-shadow(0 0 8px rgba(201, 162, 39, 0.35))
    drop-shadow(0 8px 0 rgba(0, 0, 0, 0.55));
}

.ox-sprite {
  width: 320px;
  height: 160px;
  background-image: url('../assets/ox-escape/ox-run.png');
  background-size: 1280px 160px;
}
.ganker-sprite {
  width: 160px;
  height: 160px;
  background-image: url('../assets/ox-escape/ganker-run.png');
  background-size: 640px 160px;
}

.ox-dust-sprite,
.ganker-dust-sprite {
  position: absolute;
  width: 96px;
  height: 96px;
  background-image: url('../assets/ox-escape/dust.png');
  background-size: 384px 96px;
  opacity: 0.85;
  z-index: 0;
}
/* Facing left: dust is kicked backward (to the right). */
.ox-dust-sprite { right: -12px; bottom: 4px; }
.ganker-dust-sprite { right: -6px; bottom: 6px; }

.ox-sprite,
.ganker-sprite { z-index: 1; }

.ox-spark {
  position: absolute;
  left: -10px;
  top: 28px;
  width: 96px;
  height: 96px;
  background-image: url('../assets/ox-escape/spark.png');
  background-size: 384px 96px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.ganker-badge {
  position: absolute;
  top: 14px;
  left: 4px;
  z-index: 3;
  padding: 3px 5px 2px;
  font-family: Cinzel, Palatino, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f4d56a;
  background: rgba(16, 8, 4, 0.9);
  border: 1px solid #c9a227;
  box-shadow: 0 0 0 1px #2a1c0a, 0 0 8px rgba(201, 162, 39, 0.4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.1s linear, transform 0.12s ease;
  pointer-events: none;
}
.ox-escape.is-near-catch .ganker-badge {
  opacity: 1;
  transform: translateY(0);
}

.ox-escape.is-playing .ox-sprite {
  animation: oxRunFrames 0.3s steps(4) infinite;
}
.ox-escape.is-playing .ganker-sprite {
  animation: gkRunFrames 0.16s steps(4) infinite;
}
.ox-escape.is-closing .ganker-sprite {
  animation-duration: 0.11s;
}
.ox-escape.is-playing .ox-dust-sprite,
.ox-escape.is-playing .ganker-dust-sprite {
  animation: oxDustFrames 0.34s steps(4) infinite;
}

.ox-escape.is-glancing .ox-sprite {
  background-image: url('../assets/ox-escape/ox-glance.png');
  background-size: 320px 160px;
  background-position: 0 0;
  animation: none;
}
.ox-escape.is-ox-bounce .ox-sprite {
  background-image: url('../assets/ox-escape/ox-hop.png');
  background-size: 320px 160px;
  background-position: 0 0;
  animation: none;
}
.ox-escape.is-ox-bounce .ox-run {
  animation: oxCargoHop 0.45s cubic-bezier(0.2, 1.35, 0.32, 1);
}
.ox-escape.is-lunging .ganker-sprite {
  background-image: url('../assets/ox-escape/ganker-lunge.png');
  background-size: 160px 160px;
  background-position: 0 0;
  animation: none;
}
.ox-escape.is-lunging .ganker-run {
  animation: gkLunge 0.28s ease-out;
}
.ox-escape.is-lunging .ox-spark {
  animation: oxSparkBurst 0.4s steps(4) forwards;
}

@keyframes oxRunFrames {
  from { background-position: 0 0; }
  to { background-position: -1280px 0; }
}
@keyframes gkRunFrames {
  from { background-position: 0 0; }
  to { background-position: -640px 0; }
}
@keyframes oxDustFrames {
  from { background-position: 0 0; }
  to { background-position: -384px 0; }
}
@keyframes oxCargoHop {
  0% { transform: translate(0, 0) rotate(0deg); }
  32% { transform: translate(10px, -16px) rotate(-5deg); }
  58% { transform: translate(-2px, -3px) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes gkLunge {
  0% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(-16px) scaleX(1.08); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes oxSparkBurst {
  0% { opacity: 0; background-position: 0 0; }
  25% { opacity: 0.7; }
  100% { opacity: 0; background-position: -384px 0; }
}

@media (max-width: 900px) {
  .ox-escape { bottom: 18px; height: 148px; }
  .ox-unit,
  .ox-sprite {
    width: 256px;
    height: 128px;
  }
  .ganker-unit,
  .ganker-sprite {
    width: 128px;
    height: 128px;
  }
  .ox-sprite { background-size: 1024px 128px; }
  .ganker-sprite { background-size: 512px 128px; }
  .ox-escape.is-playing .ox-sprite { animation-name: oxRunFrames900; }
  .ox-escape.is-playing .ganker-sprite { animation-name: gkRunFrames900; }
  .ox-escape.is-glancing .ox-sprite,
  .ox-escape.is-ox-bounce .ox-sprite {
    background-size: 256px 128px;
    animation: none;
  }
  .ox-escape.is-lunging .ganker-sprite {
    background-size: 128px 128px;
    animation: none;
  }
  @keyframes oxRunFrames900 {
    from { background-position: 0 0; }
    to { background-position: -1024px 0; }
  }
  @keyframes gkRunFrames900 {
    from { background-position: 0 0; }
    to { background-position: -512px 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ox-escape { display: none !important; }
}