/* ========================================================
   ✨ ROMANTIC & CUTE KEYFRAME ANIMATIONS
   ======================================================== */

@keyframes pulseHeart {
  0% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(1.05); }
  45% { transform: scale(1.22); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes gentleFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes glowBorder {
  0% { box-shadow: 0 0 10px rgba(var(--secondary-rgb), 0.4), 0 0 20px rgba(var(--secondary-rgb), 0.2); }
  50% { box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.7), 0 0 35px rgba(var(--primary-rgb), 0.4); }
  100% { box-shadow: 0 0 10px rgba(var(--secondary-rgb), 0.4), 0 0 20px rgba(var(--secondary-rgb), 0.2); }
}

@keyframes flyPlaneLoop {
  0% { transform: translate(-10%, 0) rotate(15deg); }
  25% { transform: translate(30%, -15px) rotate(5deg); }
  50% { transform: translate(60%, -25px) rotate(10deg); }
  75% { transform: translate(90%, -10px) rotate(20deg); }
  100% { transform: translate(120%, 5px) rotate(15deg); }
}

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

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.85); }
  70% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shakeCute {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
}

@keyframes waxSealGlow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 6px rgba(var(--primary-rgb), 0.5)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 6px 16px rgba(var(--primary-rgb), 0.65)); }
}

@keyframes envelopeOpenFlap {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(180deg); z-index: 1; }
}

@keyframes letterPaperSlide {
  0% { transform: translateY(0); opacity: 0.5; }
  100% { transform: translateY(-70px); opacity: 1; }
}

/* Helper animation classes */
.animate-pulse {
  animation: pulseHeart 1.8s infinite ease-in-out;
}

.animate-float {
  animation: gentleFloat 3.5s infinite ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pop {
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-shake {
  animation: shakeCute 0.6s ease-in-out;
}

.spinning {
  animation: spinSlow 8s linear infinite;
}

/* ========================================================
   📖 STORY PAGES SLIDE TRANSITIONS
   ======================================================== */

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(45px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-45px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes bounceRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@keyframes glowingPulseBtn {
  0% {
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4), 0 0 0 0 rgba(var(--primary-rgb), 0.4);
  }
  70% {
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.6), 0 0 0 14px rgba(var(--primary-rgb), 0);
  }
  100% {
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4), 0 0 0 0 rgba(var(--primary-rgb), 0);
  }
}

.slide-in-right {
  animation: slideInFromRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-left {
  animation: slideInFromLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-bounce-arrow {
  display: inline-block;
  animation: bounceRight 1.2s infinite ease-in-out;
}

.animate-glow-pulse {
  animation: glowingPulseBtn 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* ========================================================
   🎲 GACHA WISH JAR & TICKET UNWRAP ANIMATIONS
   ======================================================== */
@keyframes gachaRattle {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-14deg) scale(1.08) translateY(-4px); }
  30% { transform: rotate(14deg) scale(1.08) translateY(4px); }
  45% { transform: rotate(-10deg) scale(1.1) translateY(-6px); }
  60% { transform: rotate(10deg) scale(1.1) translateY(6px); }
  75% { transform: rotate(-6deg) scale(1.05) translateY(-2px); }
  90% { transform: rotate(6deg) scale(1.05) translateY(2px); }
  100% { transform: rotate(0deg) scale(1) translateY(0); }
}

@keyframes ticketFlyUpZoom {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.2) rotate(-20deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px) scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes ticketUnfold3D {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateX(90deg) scale(0.6);
  }
  70% {
    transform: perspective(600px) rotateX(-12deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) scale(1);
  }
}

@keyframes starFloatBob {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(15deg);
  }
}

.gacha-shaking {
  animation: gachaRattle 0.7s cubic-bezier(.36,.07,.19,.97) both !important;
}

.animate-ticket-fly {
  animation: ticketFlyUpZoom 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-unfold-3d {
  animation: ticketUnfold3D 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}