/* ════════════════════════════════════════
   animations.css  —  SushiDAW Pixel Art Edition
   ════════════════════════════════════════ */

/* ── Slot bounce (item placed) ── */
@keyframes slotBounce {
  0%   { transform: scale(1.2);   }
  60%  { transform: scale(0.95);  }
  100% { transform: scale(1);     }
}

/* ── Ghost cell breathing ── */
@keyframes ghostPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.97); }
  50%       { opacity: 1;   transform: scale(1.03); }
}

/* ── Gemini indicator fade ── */
@keyframes gemFade {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;  }
}

/* ── Logo finish-btn emoji bounce ── */
@keyframes rollBounce {
  0%,100% { transform: rotate(-6deg) scale(1);    }
  40%      { transform: rotate(7deg)  scale(1.18); }
  70%      { transform: rotate(-3deg) scale(0.95); }
}

/* ── FLOATING buttons — gentle hover lift ── */
@keyframes floatBtn {
  0%, 100% { transform: translateY(0px);  box-shadow: 4px 4px 0 var(--ink); }
  50%       { transform: translateY(-4px); box-shadow: 4px 8px 0 var(--ink); }
}

@keyframes floatFinish {
  0%, 100% { transform: translateY(0px);  box-shadow: 4px 4px 0 var(--ink); }
  50%       { transform: translateY(-5px); box-shadow: 4px 9px 0 var(--ink); }
}

@keyframes floatPill {
  0%, 100% { transform: translateY(0px);   box-shadow: 3px 3px 0 rgba(0,0,0,0.45); }
  50%       { transform: translateY(-3px);  box-shadow: 3px 6px 0 rgba(0,0,0,0.45); }
}

/* ── Play button pulse ── */
@keyframes playPulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--ink); filter: brightness(1); }
  50%       { box-shadow: 4px 4px 0 var(--ink); filter: brightness(1.15); }
}

/* ── Shelf pill entrance ── */
@keyframes pillSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
.shelf-pill { animation: pillSlideIn 0.22s ease-out both, floatPill 3.4s ease-in-out 0.3s infinite; }
.shelf-pill:nth-child(1)  { animation-delay: 0.02s, 0.0s; }
.shelf-pill:nth-child(2)  { animation-delay: 0.05s, 0.5s; }
.shelf-pill:nth-child(3)  { animation-delay: 0.08s, 1.0s; }
.shelf-pill:nth-child(4)  { animation-delay: 0.11s, 1.5s; }
.shelf-pill:nth-child(5)  { animation-delay: 0.14s, 0.7s; }
.shelf-pill:nth-child(6)  { animation-delay: 0.17s, 1.2s; }
.shelf-pill:nth-child(7)  { animation-delay: 0.20s, 0.3s; }
.shelf-pill:nth-child(8)  { animation-delay: 0.23s, 1.8s; }

/* ── Channel row entrance ── */
@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0);     }
}
.channel-row { animation: rowSlideIn 0.20s ease-out both; }

/* ── Add layer ripple ── */
@keyframes addRipple {
  0%   { transform: scale(0.8); opacity: 0.8; }
  60%  { transform: scale(1.2); opacity: 0.3; }
  100% { transform: scale(1);   opacity: 0;   }
}
.add-ripple {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,0.4);
  animation: addRipple 0.4s ease-out forwards;
  pointer-events: none;
}

/* ── Roll modal name pop ── */
@keyframes rollNamePop {
  from { opacity: 0; transform: scale(0.5) rotate(-5deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);  }
}

/* ── Score pop (game reward) ── */
@keyframes scorePopUp {
  0%   { opacity: 0; transform: translateY(0)    scale(0.6); }
  30%  { opacity: 1; transform: translateY(-20px) scale(1.2); }
  70%  { opacity: 1; transform: translateY(-30px) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.9); }
}

/* ── Pixel star twinkle ── */
@keyframes pixelStar {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%       { opacity: 1; transform: scale(1); }
}

/* ── Step header tick flash ── */
@keyframes tickFlash {
  0%   { opacity: 1; color: var(--accent); }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}
.step-num.ticking { animation: tickFlash 0.12s ease-out; }

/* ── Page load fade-in ── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.topbar         { animation: pageFadeIn 0.35s ease-out 0.05s both; }
.transport      { animation: pageFadeIn 0.35s ease-out 0.10s both; }
.rack-area      { animation: pageFadeIn 0.35s ease-out 0.18s both; }
.ingredient-shelf { animation: pageFadeIn 0.45s ease-out 0.25s both; }

/* ── Theme transition ── */
* { transition: background-color 0.22s, border-color 0.18s, color 0.18s, box-shadow 0.18s; }
.cell { transition: transform 0.07s, filter 0.09s, outline 0.06s !important; }

/* ── Wobble hover utility ── */
.wobble-hover:hover { animation: wiggle 0.35s ease-in-out; }
@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-4deg); }
  45%  { transform: rotate(4deg); }
  70%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}