/* ==========================================================
   ANIMATIONS & KEYFRAMES (60 FPS Performance Optimized)
   ========================================================== */

/* Starlight Twinkle */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.2);
  }
}

/* Floating Ambient Orbs */
@keyframes ambientFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(4deg);
  }
}

/* Candle Flame Flicker */
@keyframes candleFlicker {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
    opacity: 0.95;
  }
  25% {
    transform: scale(1.06, 0.96) rotate(1.5deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.96, 1.04) rotate(-2deg);
    opacity: 0.88;
  }
  75% {
    transform: scale(1.02, 0.98) rotate(0.8deg);
    opacity: 0.98;
  }
}

/* Candle Glow Pulse */
@keyframes flameGlow {
  0%, 100% {
    box-shadow: 0 0 10px 2px rgba(212, 163, 89, 0.45);
  }
  50% {
    box-shadow: 0 0 14px 4px rgba(212, 163, 89, 0.65);
  }
}

/* Smoke Rising after Candle Extinguished */
@keyframes smokeRise {
  0% {
    opacity: 0.7;
    transform: translateY(0) scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 0.4;
    transform: translateY(-24px) scale(1.4) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-45px) scale(2.2) rotate(-15deg);
  }
}

/* Scrapbook Date Pulse (Draw Attention to 25th) */
@keyframes pulseHeartRing {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(225, 29, 72, 0.4));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(225, 29, 72, 0.8));
  }
}

@keyframes birthdayCellGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px #f43f5e, 0 0 16px rgba(245, 158, 11, 0.6), 0 4px 14px rgba(244, 63, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 3px #e11d48, 0 0 28px rgba(245, 158, 11, 0.95), 0 6px 20px rgba(244, 63, 94, 0.7);
  }
}

@keyframes pulseGently {
  0%, 100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Bunting Garland Gentle Sway */
@keyframes buntingSway {
  0%, 100% {
    transform: rotate(-1.5deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

/* Party Hat Bobbing */
@keyframes partyHatBob {
  0%, 100% {
    transform: translateY(0px) rotate(-12deg);
  }
  50% {
    transform: translateY(-4px) rotate(-8deg);
  }
}

/* Vinyl Disc Rotation */
@keyframes spinVinyl {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Scene Transition (Fade & Scale In) */
@keyframes sceneEnter {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Bunga Melayang & Jatuh Perlahan (Romantic Petals) */
@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translate(0, -20px) rotate(0deg) scale(0.8);
  }
  15% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(50px, 100vh) rotate(360deg) scale(1.1);
  }
}

/* Lipatan Penutup Amplop Terbuka (180 deg Flap Unfold) */
@keyframes flapUnfold {
  0% {
    transform: rotateX(0deg);
    z-index: 25;
  }
  100% {
    transform: rotateX(180deg);
    z-index: 5;
  }
}

/* Surat Meluncur Keluar dari Amplop (Smooth Slide-Up) */
@keyframes letterSlideOut {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Floating Heart Bubbles on Click */
@keyframes floatUpward {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  20% {
    opacity: 0.85;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1.15) rotate(12deg);
  }
}

/* Tangled Floating Lanterns Rising */
@keyframes lanternFloatUpward {
  0% {
    transform: translateY(0) translateX(0) scale(0.85);
    opacity: 0;
  }
  15% {
    opacity: 0.5;
  }
  50% {
    transform: translateY(-50vh) translateX(20px) scale(1);
    opacity: 0.55;
  }
  85% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(-115vh) translateX(-16px) scale(1.12);
    opacity: 0;
  }
}

/* Tangled Golden Sun & Lantern Glow Breath */
@keyframes lanternGlowBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 24px rgba(251, 191, 36, 0.95));
  }
}

/* Scroll Cue Downward Bounce */
@keyframes bounceDownward {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}