#app.leave { opacity: 0; transform: translateY(10px); }
#app.enter { animation: in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* Ambient falling cute emojis */
.falling-emoji {
  position: fixed;
  top: -40px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  animation: fallDown linear forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .08));
}

@keyframes fallDown {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(105vh) translateX(var(--drift, 30px)) rotate(var(--rot, 35deg)) scale(1.05);
    opacity: 0;
  }
}

/* Celebratory shower of cats and cute emojis */
.celebrate-emoji {
  position: fixed;
  top: -50px;
  pointer-events: none;
  user-select: none;
  z-index: 25;
  animation: celebrateShower ease-in forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
}

@keyframes celebrateShower {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translateY(12vh) translateX(calc(var(--drift, 20px) * 0.3)) rotate(var(--rot, 25deg)) scale(1.3);
  }
  85% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift, 50px)) rotate(calc(var(--rot, 25deg) * 3)) scale(1);
    opacity: 0;
  }
}

/* Interactive tap/click sparkles */
.tap-particle {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 30;
  font-size: 1.4rem;
  animation: tapFloat 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}

@keyframes tapFloat {
  0% {
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 35px)) scale(1.25) rotate(var(--dr, 15deg));
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 65px)) scale(0.8) rotate(calc(var(--dr, 15deg) * 2));
    opacity: 0;
  }
}