/* ═══════════════════════════════════════════════════════════
   ПЕЛЬМЕНЬ — PIXEL GAME STYLE
   animations.css — All @keyframes and animation utilities
═══════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sprite-float {
  0%, 100% { transform: translateY(0px)  rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(8deg); }
  66%       { transform: translateY(-8px)  rotate(-5deg); }
}

@keyframes cloud-drift {
  from { transform: translateX(-80px); }
  to   { transform: translateX(110vw); }
}

@keyframes coin-flip {
  0%, 35%, 100% { transform: scaleX(1); }
  17%            { transform: scaleX(0.05); }
}

@keyframes q-bump {
  0%, 55%, 100% { transform: translateY(0); }
  27%            { transform: translateY(-10px); }
}

@keyframes pixel-blink {
  0%,  49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pixel-glow-pulse {
  0%, 100% { text-shadow: 3px 3px 0 #000, 0 0 12px rgba(200,114,42,0.35); }
  50%       { text-shadow: 3px 3px 0 #000, 0 0 32px rgba(232,168,95,0.8); }
}

@keyframes badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@keyframes step-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* pelmeni flies from upper-left into the open mouth */
@keyframes pelmeni-fly {
  0%   { opacity: 0; transform: translate(  0px,  0px) scale(0.55) rotate(-25deg); }
  8%   { opacity: 1; transform: translate(  8px,  2px) scale(0.65) rotate(-18deg); }
  50%  { opacity: 1; transform: translate( 42px, 10px) scale(1.00) rotate( -5deg); }
  67%  { opacity: 1; transform: translate( 80px, 21px) scale(1.20) rotate(  5deg); }
  75%  { opacity: 0; transform: translate( 86px, 23px) scale(0.05) rotate( 12deg); }
  100% { opacity: 0; transform: translate(  0px,  0px) scale(0.55) rotate(-25deg); }
}

/* mouth opens in anticipation, closes after eating */
@keyframes mouth-open {
  0%, 38%, 82%, 100% { opacity: 0; }
  46%, 74%           { opacity: 1; }
}

/* body squish on the nom moment */
@keyframes caracal-nom {
  0%, 62%, 100% { transform: scale(1); }
  68%           { transform: scaleX(1.10) scaleY(0.90); }
  73%           { transform: scaleX(0.94) scaleY(1.06); }
  79%           { transform: scale(1); }
}

/* ── Animation utilities ───────────────────────────────── */

.pixel-blink      { animation: pixel-blink 0.9s step-end infinite; }
.pixel-glow-pulse { animation: pixel-glow-pulse 2.2s ease-in-out infinite; }
.badge-pop-anim   { animation: badge-pop 0.35s steps(4); }

.anim-fade-in { animation: fadeInUp 0.6s steps(6) both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
