@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes popIn { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(320px) rotate(360deg); opacity: 0; }
}
@keyframes ringPulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 137, 122, 0.35); }
  100% { box-shadow: 0 0 0 14px rgba(224, 137, 122, 0); }
}
@keyframes checkPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.fade-in { animation: fadeIn var(--duration-normal) var(--ease-gentle) both; }

.plant-slot { animation: float 4s ease-in-out infinite; }
.plant-slot:nth-child(2) { animation-delay: 0.6s; }
.plant-slot:nth-child(3) { animation-delay: 1.2s; }

.xp-badge.pulse { animation: ringPulse 1.2s var(--ease-gentle); }

.task-item input[type="checkbox"]:checked { animation: checkPop 0.3s var(--ease-gentle); }

.badge-pop { animation: popIn 0.4s var(--ease-gentle) both; }

.level-up-confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -10px; width: 8px; height: 8px; border-radius: 2px;
  animation: confettiFall 1.8s ease-in forwards;
}

/* View-transition style crossfade between routes */
#app-view { animation: fadeIn var(--duration-normal) var(--ease-gentle); }