/* ==========================================================================
   ROMANTIC VINTAGE LETTER VAULT - ANIMATIONS
   ========================================================================== */

/* Ambient Candlelight Flicker */
@keyframes candleFlicker {
  0% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1);
  }
  25% {
    opacity: 0.95;
    transform: translateX(-49.5%) scale(1.03);
  }
  50% {
    opacity: 0.75;
    transform: translateX(-50.5%) scale(0.98);
  }
  75% {
    opacity: 1;
    transform: translateX(-50%) scale(1.04);
  }
  100% {
    opacity: 0.85;
    transform: translateX(-50.2%) scale(1.01);
  }
}

/* Password Error Shake */
@keyframes shake {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-6px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(6px, 0, 0);
  }
}

/* Wax Seal Break Animation */
@keyframes waxBreak {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
    filter: drop-shadow(0 0 20px rgba(223, 183, 108, 0.8));
  }
  60% {
    transform: scale(0.95) rotate(4deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.6) translateY(20px);
    opacity: 0;
  }
}

.wax-breaking {
  animation: waxBreak 0.75s forwards cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
}

/* Smooth Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Smooth Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Letter Opening Fold Effect */
@keyframes unfoldSheet {
  0% {
    opacity: 0;
    transform: rotateX(40deg) scale(0.85);
    transform-origin: top center;
  }
  60% {
    opacity: 0.9;
    transform: rotateX(-5deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
}

.unfold-animation {
  animation: unfoldSheet 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating Heart / Sparkle Particle */
@keyframes floatUpFade {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  30% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(1.2);
  }
}

.ambient-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #f9df98 0%, rgba(223, 183, 108, 0) 70%);
  animation: floatUpFade 4s ease-out infinite;
}