/* ==========================================================================
   Nusantara Cooking Chaos: Animations & Keyframes
   ========================================================================== */

/* Visual Stage Container in each workstation */
.station-visual-stage {
  height: 80px;
  background: rgba(10, 15, 26, 0.5);
  border-radius: 8px;
  margin: 8px 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.station-card:hover .station-visual-stage {
  border-color: rgba(245, 158, 11, 0.4);
}

.stage-idle-icon {
  font-size: 1.8rem;
  opacity: 0.4;
  filter: grayscale(40%);
  animation: gentle-bob 2.5s ease-in-out infinite;
}

.cooking-action-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  animation: badge-pop 0.3s ease-out;
  z-index: 5;
}

/* 1. CHOPPING ANIMATION */
.anim-chopping {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.knife-cutting {
  font-size: 2.2rem;
  animation: knife-slice 0.25s infinite alternate ease-in-out;
  transform-origin: bottom right;
  z-index: 3;
}

@keyframes knife-slice {
  0% { transform: translateY(-14px) rotate(-25deg); }
  100% { transform: translateY(4px) rotate(0deg); }
}

.chopped-ingredient {
  font-size: 1.6rem;
  position: relative;
  z-index: 2;
  animation: board-vibrate 0.25s infinite;
}

.flying-slice {
  position: absolute;
  font-size: 1rem;
  animation: slice-fly 0.5s infinite;
}

.slice-1 { top: 30%; left: 35%; animation-delay: 0.1s; }
.slice-2 { top: 25%; right: 35%; animation-delay: 0.25s; }

@keyframes slice-fly {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  50% { opacity: 1; transform: translate(12px, -14px) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translate(22px, 4px) rotate(90deg) scale(0.4); }
}

@keyframes board-vibrate {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}

/* 2. COBEK & ULEKAN ANIMATION */
.anim-cobek {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pestle-grinding {
  font-size: 2.2rem;
  animation: pestle-grind 0.4s infinite ease-in-out;
  z-index: 3;
}

@keyframes pestle-grind {
  0% { transform: rotate(0deg) translate(0, -6px); }
  25% { transform: rotate(-15deg) translate(-6px, 2px); }
  50% { transform: rotate(0deg) translate(0, 4px); }
  75% { transform: rotate(15deg) translate(6px, 2px); }
  100% { transform: rotate(0deg) translate(0, -6px); }
}

.sambal-splash {
  position: absolute;
  font-size: 1.1rem;
  animation: splash-pulse 0.35s infinite alternate;
}

@keyframes splash-pulse {
  0% { transform: scale(0.8) rotate(-10deg); opacity: 0.7; }
  100% { transform: scale(1.3) rotate(10deg); opacity: 1; }
}

/* 3. WAJAN TUMIS SRENG ANIMATION */
.anim-wok {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wok-pan {
  font-size: 2.4rem;
  animation: wok-toss 0.35s infinite ease-in-out;
  z-index: 2;
}

@keyframes wok-toss {
  0% { transform: translateY(2px) rotate(0deg); }
  40% { transform: translateY(-8px) rotate(-12deg); }
  70% { transform: translateY(-4px) rotate(8deg); }
  100% { transform: translateY(2px) rotate(0deg); }
}

.wok-fire {
  position: absolute;
  bottom: 6px;
  font-size: 1.4rem;
  animation: flame-dance 0.2s infinite alternate;
  z-index: 1;
}

@keyframes flame-dance {
  0% { transform: scale(0.9) translateY(0); filter: drop-shadow(0 0 4px #f59e0b); }
  100% { transform: scale(1.25) translateY(-3px); filter: drop-shadow(0 0 10px #ef4444); }
}

.wok-steam {
  position: absolute;
  top: 10px;
  font-size: 1.2rem;
  animation: steam-rise 0.7s infinite linear;
}

@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  50% { opacity: 0.9; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-22px) scale(1.4); }
}

/* 4. PANCI REBUSAN ANIMATION */
.anim-pot {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pot-body {
  font-size: 2.4rem;
  animation: pot-boil 0.3s infinite ease-in-out;
  z-index: 2;
}

@keyframes pot-boil {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.04) translateY(-2px); }
}

.pot-bubbles {
  position: absolute;
  top: 14px;
  font-size: 1.2rem;
  animation: bubble-float 0.5s infinite;
}

@keyframes bubble-float {
  0% { opacity: 0; transform: translateY(4px) scale(0.5); }
  60% { opacity: 1; transform: translateY(-8px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-16px) scale(0.8); }
}

/* 5. GRILL PANGGANGAN ANIMATION */
.anim-grill {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.satay-skewers {
  font-size: 2.4rem;
  animation: skewer-sizzle 0.25s infinite alternate;
  z-index: 2;
}

@keyframes skewer-sizzle {
  0% { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-2px) rotate(1deg); }
}

.grill-fan {
  position: absolute;
  right: 14px;
  font-size: 1.5rem;
  animation: fan-motion 0.4s infinite ease-in-out;
  z-index: 3;
}

@keyframes fan-motion {
  0% { transform: rotate(-25deg) translateX(4px); }
  50% { transform: rotate(15deg) translateX(-4px); }
  100% { transform: rotate(-25deg) translateX(4px); }
}

.grill-embers {
  position: absolute;
  bottom: 6px;
  font-size: 1.3rem;
  animation: ember-glow 0.4s infinite alternate;
}

@keyframes ember-glow {
  0% { filter: drop-shadow(0 0 3px #f97316); transform: scale(0.95); }
  100% { filter: drop-shadow(0 0 12px #ef4444); transform: scale(1.15); }
}

/* 6. PLATING ANIMATION */
.anim-plating {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plate-dish {
  font-size: 2.4rem;
  animation: plating-glow 1s infinite alternate ease-in-out;
}

@keyframes plating-glow {
  0% { transform: scale(0.96); filter: drop-shadow(0 0 4px #10b981); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 14px #34d399); }
}

.sparkle-star {
  position: absolute;
  font-size: 1.1rem;
  animation: sparkle-burst 0.7s infinite alternate;
}

@keyframes sparkle-burst {
  0% { opacity: 0.2; transform: scale(0.5) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.3) rotate(45deg); }
}

/* 7. SINK ANIMATION */
.anim-sink {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sink-water {
  font-size: 2.2rem;
  animation: water-splash 0.35s infinite alternate;
}

@keyframes water-splash {
  0% { transform: translateY(-3px) scale(0.95); }
  100% { transform: translateY(2px) scale(1.08); }
}

/* 8. BURNING CRISIS ANIMATION */
.anim-burning {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(239, 68, 68, 0.25);
  border-radius: 6px;
}

.burn-fire-huge {
  font-size: 2.8rem;
  animation: fire-rage 0.2s infinite alternate;
}

@keyframes fire-rage {
  0% { transform: scale(0.9) translateY(0) rotate(-4deg); filter: drop-shadow(0 0 8px #ef4444); }
  100% { transform: scale(1.3) translateY(-6px) rotate(4deg); filter: drop-shadow(0 0 25px #ff0000); }
}

/* 9. DONE SUCCESS ANIMATION */
.anim-done {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(16, 185, 129, 0.2);
  border-radius: 6px;
}

.done-food-plate {
  font-size: 2.5rem;
  animation: ready-bounce 0.4s infinite alternate ease-in-out;
}

@keyframes ready-bounce {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 6px #10b981); }
  100% { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 16px #34d399); }
}

@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes badge-pop {
  0% { transform: translateX(-50%) scale(0.6); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes pulse-burn {
  0% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); transform: scale(1); }
  100% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.9); transform: scale(1.02); }
}

@keyframes float-up-fade {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1); }
}

@keyframes urgent-pulse {
  0% { color: #f87171; transform: scale(1); }
  50% { color: #ef4444; transform: scale(1.1); }
  100% { color: #f87171; transform: scale(1); }
}

.urgent-pulse {
  animation: urgent-pulse 0.8s infinite;
}