/* ============================================================
   ANIMATION SYSTEM — CSS for plant game animated flows
   ============================================================ */

/* ---- TWEEN / GENERAL ---- */
.anim-no-transition { transition: none !important; }

/* ---- POT DROP (new pot or ghiveci pe raft) ---- */
.pot.anim-pot-drop {
  animation: pot-drop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pot-drop {
  0%   { transform: translateY(-60px) scale(0.7); opacity: 0; }
  60%  { transform: translateY(8px) scale(1.05); opacity: 1; }
  80%  { transform: translateY(-3px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* Slot glow when pot can be dropped */
.pot.anim-slot-glow {
  box-shadow: 0 0 16px rgba(230, 168, 50, 0.6), inset 0 0 8px rgba(230, 168, 50, 0.15);
  border-color: #e6a832;
}

/* ---- SOIL POUR ---- */
.pot.anim-soil-pour .pot-icon {
  animation: soil-shake 0.4s ease-in-out;
}
@keyframes soil-shake {
  0%, 100% { transform: rotate(0deg); }
  20%  { transform: rotate(-8deg); }
  40%  { transform: rotate(6deg); }
  60%  { transform: rotate(-4deg); }
  80%  { transform: rotate(2deg); }
}

/* Soil bag overlay */
.soil-bag-anim {
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%) rotate(0deg);
  font-size: 32px;
  z-index: 10;
  pointer-events: none;
  animation: soil-bag-pour 0.8s ease-in-out forwards;
}
@keyframes soil-bag-pour {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-20px) rotate(0deg); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0deg); }
  40%  { transform: translateX(-50%) translateY(0) rotate(-35deg); }
  70%  { transform: translateX(-50%) translateY(0) rotate(-35deg); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-30px) rotate(-35deg); opacity: 0; }
}

/* Soil fill rising */
.soil-fill-anim {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-radius: 0 0 10px 10px;
  height: 0;
  animation: soil-fill-rise 0.6s ease-out 0.3s forwards;
  pointer-events: none;
  z-index: 5;
}
@keyframes soil-fill-rise {
  0%   { height: 0; opacity: 0.8; }
  100% { height: 18px; opacity: 0; }
}

/* Falling soil particles */
.soil-grain {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 11;
  animation: soil-grain-fall 0.5s ease-in forwards;
}
@keyframes soil-grain-fall {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(var(--fall-dist, 40px)) scale(0.5); }
}

/* ---- SEED PLANT ---- */
.seed-drop-anim {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  pointer-events: none;
  z-index: 10;
  animation: seed-drop 0.5s ease-in forwards;
}
@keyframes seed-drop {
  0%   { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1.2); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(20px) scale(1); }
  85%  { transform: translateX(-50%) translateY(16px) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.5); }
}

/* Plop effect when seed lands */
.seed-plop {
  position: absolute;
  top: 55%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid;
  pointer-events: none;
  z-index: 10;
  animation: plop-expand 0.4s ease-out forwards;
}
@keyframes plop-expand {
  0%   { width: 4px; height: 4px; opacity: 1; }
  100% { width: 40px; height: 20px; opacity: 0; }
}

/* Pot nudge when seed lands */
.pot.anim-seed-land {
  animation: pot-nudge 0.3s ease-out;
}
@keyframes pot-nudge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---- WATER SPLASH ---- */
.water-drop-anim {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 10;
  animation: water-drop-fall 0.4s ease-in forwards;
}
@keyframes water-drop-fall {
  0%   { opacity: 1; transform: translateY(-15px); }
  80%  { opacity: 1; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(15px) scale(0.3); }
}

.water-ripple {
  position: absolute;
  bottom: 20%; left: 50%;
  transform: translate(-50%, 0);
  width: 6px; height: 3px;
  border: 2px solid rgba(91, 184, 232, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: water-ripple-expand 0.5s ease-out forwards;
}
@keyframes water-ripple-expand {
  0%   { width: 6px; height: 3px; opacity: 1; }
  100% { width: 50px; height: 20px; opacity: 0; }
}

/* Pot darkening (soil gets wet) */
.pot.anim-watered .pot-soil-strip {
  transition: filter 0.4s ease;
  filter: brightness(0.75);
}
.pot.anim-watered {
  animation: pot-water-pulse 0.4s ease-out;
}
@keyframes pot-water-pulse {
  0%   { box-shadow: 0 0 0 rgba(91,184,232,0); }
  50%  { box-shadow: 0 0 14px rgba(91,184,232,0.5); }
  100% { box-shadow: 0 0 0 rgba(91,184,232,0); }
}

/* Water drop meter fill animation */
.drop.anim-fill {
  animation: drop-fill 0.3s ease-out;
}
@keyframes drop-fill {
  0%   { transform: scale(0.5); opacity: 0.3; }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- STAGE TRANSITION (growth) ---- */
.pot.anim-stage-up .pot-icon {
  animation: grow-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes grow-pop {
  0%   { transform: scale(0.5) translateY(10px); opacity: 0.3; filter: brightness(1.5); }
  50%  { transform: scale(1.2) translateY(-3px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); }
}

/* Sparkle ring on stage up */
.stage-sparkle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #e6a832;
  pointer-events: none;
  z-index: 10;
  animation: sparkle-ring 0.6s ease-out forwards;
}
@keyframes sparkle-ring {
  0%   { width: 10px; height: 10px; opacity: 1; border-width: 3px; }
  100% { width: 70px; height: 70px; opacity: 0; border-width: 1px; }
}

/* Stage dot fill animation */
.stage-dot.anim-complete {
  animation: dot-complete 0.4s ease-out;
}
@keyframes dot-complete {
  0%   { transform: scale(0.3); }
  60%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ---- PLANT IDLE — gentle sway ---- */
.pot.state-growing .pot-icon {
  animation: gentle-sway 4s ease-in-out infinite;
}
@keyframes gentle-sway {
  0%, 100% { transform: rotate(0deg); }
  25%  { transform: rotate(1.5deg); }
  75%  { transform: rotate(-1.5deg); }
}

/* Override sway during other animations */
.pot.anim-stage-up .pot-icon,
.pot.anim-seed-land .pot-icon,
.pot.anim-soil-pour .pot-icon {
  animation-name: none;
}

/* ---- HARVEST ---- */
.pot.anim-harvest .pot-icon {
  animation: harvest-shake 0.4s ease-in-out;
}
@keyframes harvest-shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
}

/* Flower fly to inventory */
.harvest-fly {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 300;
  animation: harvest-fly-arc var(--fly-duration, 0.7s) ease-in forwards;
}
@keyframes harvest-fly-arc {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  40%  { transform: translate(calc(var(--fly-dx) * 0.4), calc(var(--fly-dy) * 0.4 - 40px)) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(0.3); }
}

/* Pot emptying after harvest */
.pot.anim-harvested {
  animation: pot-harvest-fade 0.5s ease-out;
}
@keyframes pot-harvest-fade {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- POLLEN COLLECT ---- */
.pollen-float {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  z-index: 10;
  animation: pollen-float-up 0.6s ease-out forwards;
}
@keyframes pollen-float-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-35px) scale(0.5); }
}

/* ---- POLLINATE ---- */
.pollinate-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 10;
  animation: shimmer-flash 0.6s ease-out forwards;
}
@keyframes shimmer-flash {
  0%   { background: rgba(212, 160, 208, 0); }
  30%  { background: rgba(212, 160, 208, 0.25); }
  100% { background: rgba(212, 160, 208, 0); }
}

/* ---- COLLECT SEEDS ---- */
.seed-pop {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 10;
  animation: seed-pop-out 0.5s ease-out forwards;
}
@keyframes seed-pop-out {
  0%   { opacity: 1; transform: translate(0, 0) scale(0.5); }
  50%  { transform: translate(var(--sx, 10px), var(--sy, -20px)) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--sx, 10px), calc(var(--sy, -20px) - 10px)) scale(0.8); }
}

/* ---- FERTILIZE ---- */
.pot.anim-fertilize {
  animation: fert-glow 0.5s ease-out;
}
@keyframes fert-glow {
  0%   { box-shadow: 0 0 0 rgba(126,198,98,0); }
  40%  { box-shadow: 0 0 18px rgba(126,198,98,0.6), inset 0 0 8px rgba(126,198,98,0.15); }
  100% { box-shadow: 0 0 0 rgba(126,198,98,0); }
}

.fert-drip {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 10;
  animation: fert-drip-fall 0.5s ease-in forwards;
}
@keyframes fert-drip-fall {
  0%   { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(20px) scale(0.3); }
}

/* ---- CURE (insecticide) ---- */
.pot.anim-cure {
  animation: cure-flash 0.5s ease-out;
}
@keyframes cure-flash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.5) hue-rotate(-20deg); }
  100% { filter: brightness(1) hue-rotate(0deg); }
}

.cure-puff {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(180, 230, 180, 0.5);
  pointer-events: none;
  z-index: 10;
  animation: cure-puff-expand 0.6s ease-out forwards;
}
@keyframes cure-puff-expand {
  0%   { width: 10px; height: 10px; opacity: 0.8; }
  100% { width: 80px; height: 80px; opacity: 0; }
}

/* ---- WITHER ---- */
.pot.anim-wither .pot-icon {
  animation: wither-droop 0.8s ease-in forwards;
}
@keyframes wither-droop {
  0%   { transform: rotate(0deg) scale(1); filter: saturate(1); }
  100% { transform: rotate(-15deg) scale(0.85); filter: saturate(0.3); }
}

/* ---- REVIVE ---- */
.pot.anim-revive .pot-icon {
  animation: revive-rise 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes revive-rise {
  0%   { transform: scale(0.5) rotate(-15deg); filter: saturate(0.3); }
  60%  { transform: scale(1.15) rotate(3deg); filter: saturate(1.2); }
  100% { transform: scale(1) rotate(0deg); filter: saturate(1); }
}

/* ---- FLOATING TEXT ("+5 XP", "+10c") ---- */
.float-text {
  position: absolute;
  left: 50%; top: 30%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 800;
  pointer-events: none;
  z-index: 15;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  animation: float-text-up 1s ease-out forwards;
}
@keyframes float-text-up {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.8); }
  20%  { transform: translateX(-50%) translateY(-5px) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.9); }
}

/* ---- BUY / SHOP ITEM ---- */
.pot.anim-new-pot {
  animation: new-pot-arrive 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes new-pot-arrive {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---- MATURE GLOW (stage 5 idle) ---- */
.pot.state-growing.stage-5 .pot-icon {
  animation: mature-glow 3s ease-in-out infinite;
}
@keyframes mature-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(230,168,50,0.2)); }
  50%      { filter: drop-shadow(0 0 10px rgba(230,168,50,0.5)); }
}

/* ---- SEEDS READY bounce ---- */
.seed-ready {
  animation: seeds-ready-bounce 1s ease-in-out infinite;
}
@keyframes seeds-ready-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}