/* ==========================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes jarShake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-6deg) translateX(-4px); }
  40% { transform: rotate(6deg) translateX(4px); }
  60% { transform: rotate(-4deg) translateX(-2px); }
  80% { transform: rotate(4deg) translateX(2px); }
}

.jar-shake {
  animation: jarShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes paperFoldAndDrop {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
  40% {
    opacity: 0.9;
    transform: scale(0.6) translateY(-80px) rotate(15deg);
  }
  80% {
    opacity: 0.9;
    transform: scale(0.35) translateY(120px) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.1) translateY(240px) rotate(45deg);
  }
}

.paper-drop-anim {
  animation: paperFoldAndDrop 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes letterUnfold {
  0% {
    opacity: 0;
    transform: scale(0.85) rotateX(25deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
  }
}

.letter-unfold {
  animation: letterUnfold 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.pulse-glow {
  animation: pulseGlow 2.5s ease-in-out infinite;
}