/* ------------------------------------------------------------------
   cats.css - GENERATED from the sprite rects in the Unity .meta files.
   Do not hand-edit the @keyframes; retune with the custom properties
   (--idle-dur / --react-dur) or regenerate.

   Unity rect y is measured from the BOTTOM of the sheet, so the CSS
   offset is  top = sheetHeight - (y + height).  Already applied below.
   ------------------------------------------------------------------ */

/* ---- pip ---- pivot anchor: bottom */
.cat--pip {
  --sheet: url("assets/cats/pip.png");
  --sheet-w: 717.69px;
  --sheet-h: 239.34px;
  --box-w: 135.54px;
  --box-h: 120.0px;
  --idle-frames: 2;
  --idle-dur: 2.6s;
  --react-frames: 3;
  --react-dur: 1.2s;
}
.cat--pip .cat__sprite { bottom:0; left:50%; transform:translateX(-50%); }
.cat--pip .cat__sprite { animation-name: pip-idle; }
.cat--pip.is-reacting .cat__sprite { animation-name: pip-react; }

@keyframes pip-idle {
  0% { width:131.57px; height:98.51px; background-position:-17.52px -76.69px; }
  50% { width:131.24px; height:97.52px; background-position:-158.68px -77.69px; }
}

@keyframes pip-react {
  0% { width:135.54px; height:120.0px; background-position:-293.22px -55.21px; }
  25% { width:131.9px; height:117.02px; background-position:-436.69px -58.18px; }
  50% { width:132.56px; height:98.84px; background-position:-577.19px -76.36px; }
}

/* ---- momo ---- pivot anchor: bottom */
.cat--momo {
  --sheet: url("assets/cats/momo.png");
  --sheet-w: 676.51px;
  --sheet-h: 296.15px;
  --box-w: 159.85px;
  --box-h: 76.0px;
  --idle-frames: 2;
  --idle-dur: 3.2s;
  --react-frames: 2;
  --react-dur: 1.5s;
}
.cat--momo .cat__sprite { bottom:0; left:50%; transform:translateX(-50%); }
.cat--momo .cat__sprite { animation-name: momo-idle; }
.cat--momo.is-reacting .cat__sprite { animation-name: momo-react; }

@keyframes momo-idle {
  0% { width:159.85px; height:76.0px; background-position:-8.56px -115.25px; }
  50% { width:159.49px; height:76.0px; background-position:-175.19px -115.25px; }
}

@keyframes momo-react {
  0% { width:159.85px; height:76.0px; background-position:-341.82px -115.25px; }
  33.333% { width:159.14px; height:76.0px; background-position:-510.59px -115.25px; }
}

/* ---- kimchi ---- pivot anchor: top */
.cat--kimchi {
  --sheet: url("assets/cats/kimchi.png");
  --sheet-w: 622.93px;
  --sheet-h: 311.47px;
  --box-w: 184.0px;
  --box-h: 92.0px;
  --idle-frames: 3;
  --idle-dur: 1.65s;
  --react-frames: 3;
  --react-dur: 1.12s;
}
.cat--kimchi .cat__sprite { top:0; left:50%; transform:translateX(-50%); }
.cat--kimchi .cat__sprite { animation-name: kimchi-idle; }
.cat--kimchi.is-reacting .cat__sprite { animation-name: kimchi-react; }

@keyframes kimchi-idle {
  0% { width:183.65px; height:87.44px; background-position:-15.1px -43.89px; }
  33.333% { width:184.0px; height:86.38px; background-position:-212.44px -44.24px; }
  66.667% { width:183.65px; height:86.73px; background-position:-409.44px -43.89px; }
}

@keyframes kimchi-react {
  0% { width:183.65px; height:87.79px; background-position:-15.1px -180.84px; }
  25% { width:183.65px; height:88.14px; background-position:-212.79px -180.49px; }
  50% { width:183.65px; height:92.0px; background-position:-409.44px -176.98px; }
}

/* ---- void ---- pivot anchor: center */
.cat--void {
  --sheet: url("assets/cats/void.png");
  --sheet-w: 687.08px;
  --sheet-h: 249.85px;
  --box-w: 102.78px;
  --box-h: 116.0px;
  --idle-frames: 4;
  --idle-dur: 2.0s;
  --react-frames: 4;
  --react-dur: 1.25s;
}
.cat--void .cat__sprite { top:50%; left:50%; transform:translate(-50%,-50%); }
.cat--void .cat__sprite { animation-name: void-idle; }
.cat--void.is-reacting .cat__sprite { animation-name: void-react; }

@keyframes void-idle {
  0% { width:102.45px; height:116.0px; background-position:-51.56px -3.97px; }
  25% { width:102.12px; height:116.0px; background-position:-214.81px -3.97px; }
  50% { width:102.12px; height:116.0px; background-position:-381.05px -3.97px; }
  75% { width:102.45px; height:116.0px; background-position:-547.28px -3.97px; }
}

@keyframes void-react {
  0% { width:102.12px; height:116.0px; background-position:-51.56px -129.22px; }
  20% { width:102.12px; height:116.0px; background-position:-214.81px -129.22px; }
  40% { width:102.78px; height:116.0px; background-position:-380.39px -129.22px; }
  60% { width:102.45px; height:116.0px; background-position:-547.28px -129.22px; }
}