/* ============================================
   💗 BIRTHDAY WEBSITE — KEYFRAME ANIMATIONS
   Premium Cinematic Experience
   ============================================ */

/* --- Heartbeat --- */
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

/* --- Music Button Pulse --- */
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 138, 183, 0.4); }
  50% { box-shadow: 0 0 30px rgba(255, 138, 183, 0.8), 0 0 60px rgba(232, 67, 147, 0.3); }
}

/* --- Float Up & Down --- */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(2deg); }
  66% { transform: translateY(-5px) rotate(-1deg); }
}

/* --- Float & Rotate (for Polaroids) --- */
@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(var(--rotation, -3deg)); }
  50% { transform: translateY(-8px) rotate(calc(var(--rotation, -3deg) + 2deg)); }
}

/* --- Sparkle / Twinkle --- */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* --- Glow Pulse --- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 138, 183, 0.3); }
  50% { box-shadow: 0 0 40px rgba(255, 138, 183, 0.6), 0 0 80px rgba(232, 67, 147, 0.2); }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(232, 67, 147, 0.3); }
  50% { text-shadow: 0 0 30px rgba(232, 67, 147, 0.6), 0 0 60px rgba(255, 138, 183, 0.3); }
}

/* --- Shake (Wrong PIN) --- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

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

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Scale In (Dramatic) --- */
@keyframes scaleInDramatic {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.2); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* --- Slide Down (Notification) --- */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* --- Typewriter Cursor Blink --- */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Butterfly --- */
@keyframes butterflyFloat {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(50px, -30px) rotate(10deg); }
  50% { transform: translate(100px, 10px) rotate(-5deg); }
  75% { transform: translate(60px, -20px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes wingFlap {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.3); }
}

/* --- Rising Hearts --- */
@keyframes riseHeart {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-40vh) scale(1.2) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-80vh) scale(0.8) rotate(-10deg);
  }
}

/* --- Confetti Fall --- */
@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(-10vh) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

/* --- Shimmer --- */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* --- Rotate Infinite --- */
@keyframes rotateInfinite {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Bounce --- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Gift Box Lid --- */
@keyframes lidOpen {
  0% { transform: rotateX(0deg) translateY(0); }
  100% { transform: rotateX(-120deg) translateY(-30px); }
}

/* --- Envelope Open --- */
@keyframes envelopeOpen {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(180deg); }
}

/* --- Letter Slide Out --- */
@keyframes letterSlideOut {
  0% { transform: translateY(0); }
  100% { transform: translateY(-120px); }
}

/* --- Ripple --- */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- Infinity Draw --- */
@keyframes drawInfinity {
  0% { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}

/* --- Merge Hearts --- */
@keyframes mergeLeft {
  0% { transform: translateX(-60px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(-5px); }
}

@keyframes mergeRight {
  0% { transform: translateX(60px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(5px); }
}

/* --- Waveform Bars --- */
@keyframes waveform {
  0%, 100% { height: 4px; }
  50% { height: var(--wave-height, 20px); }
}

/* --- Star Twinkle --- */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1); }
}

/* --- Dreamy Card Float --- */
@keyframes dreamFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  75% { transform: translateY(5px) rotate(-1deg); }
}

/* --- Typing Indicator --- */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* --- Petal Fall --- */
@keyframes petalFall {
  0% {
    transform: translateY(-5vh) rotate(0deg) translateX(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) rotate(180deg) translateX(var(--sway-x-1, 30px)) scale(1);
    opacity: 0.7;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(105vh) rotate(360deg) translateX(var(--sway-x-2, -20px)) scale(0.9);
    opacity: 0;
  }
}

/* --- Card Flip --- */
@keyframes flipIn {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* --- Background Gradient Shift --- */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Pulse Ring --- */
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* --- Sound Wave (for voice notes) --- */
@keyframes soundWave {
  0% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.3); }
}

/* --- Number Pad Press --- */
@keyframes padPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); background: rgba(255, 138, 183, 0.3); }
  100% { transform: scale(1); }
}

/* --- Chat Message Appear --- */
@keyframes chatAppear {
  0% { opacity: 0; transform: translateY(10px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Screen Flash --- */
@keyframes screenFlash {
  0% { opacity: 0; }
  20% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ============================================
   NEW CINEMATIC ANIMATIONS
   ============================================ */

/* --- Cinematic Fade In (slow, dramatic) --- */
@keyframes cinematicFadeIn {
  0% { opacity: 0; filter: blur(8px); }
  100% { opacity: 1; filter: blur(0px); }
}

/* --- Cinematic Text Reveal --- */
@keyframes cinematicTextReveal {
  0% { opacity: 0; transform: translateY(20px); letter-spacing: 8px; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 3px; }
}

/* --- Gold Shimmer Text --- */
@keyframes goldShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* --- Cassette Reel Spin --- */
@keyframes cassetteReel {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Cassette Reel Slow --- */
@keyframes cassetteReelSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Sparkle Explosion (for reason cards) --- */
@keyframes sparkleExplosion {
  0% {
    opacity: 1;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.5) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(2) rotate(360deg);
  }
}

/* --- Sparkle Burst (radial) --- */
@keyframes sparkleBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 30px), var(--ty, -30px)) scale(0);
  }
}

/* --- Firefly Float --- */
@keyframes fireflyFloat {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: var(--firefly-opacity, 0.8);
  }
  50% {
    transform: translate(var(--fx, 40px), var(--fy, -30px));
    opacity: var(--firefly-opacity, 0.8);
  }
  90% {
    opacity: var(--firefly-opacity, 0.8);
  }
  100% {
    transform: translate(var(--fx2, -20px), var(--fy2, 20px));
    opacity: 0;
  }
}

/* --- Firefly Glow --- */
@keyframes fireflyGlow {
  0%, 100% {
    box-shadow: 0 0 4px 2px rgba(255, 214, 100, 0.3);
  }
  50% {
    box-shadow: 0 0 12px 6px rgba(255, 214, 100, 0.7), 0 0 24px 12px rgba(255, 214, 100, 0.2);
  }
}

/* --- Star Appear --- */
@keyframes starAppear {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    opacity: 0.8;
    transform: scale(1) rotate(360deg);
  }
}

/* --- Night Sky Shift --- */
@keyframes nightSkyShift {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
}

/* --- Glow Breathing --- */
@keyframes glowBreath {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 138, 183, 0.3), 0 0 40px rgba(255, 138, 183, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 138, 183, 0.6), 0 0 80px rgba(255, 138, 183, 0.2), 0 0 120px rgba(232, 67, 147, 0.1);
  }
}

/* --- Text Reveal Line-by-Line --- */
@keyframes textRevealLine {
  0% {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --- Surprise Button Pulse --- */
@keyframes surprisePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(255, 138, 183, 0.4), 0 0 60px rgba(232, 67, 147, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(255, 138, 183, 0.6), 0 0 100px rgba(232, 67, 147, 0.3);
  }
}

/* --- Shooting Star --- */
@keyframes shootingStar {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0);
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--shoot-x, 300px)) translateY(var(--shoot-y, 200px));
  }
}

/* --- Portrait Glow --- */
@keyframes portraitGlow {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(255, 138, 183, 0.3),
      0 0 60px rgba(232, 67, 147, 0.1),
      inset 0 0 30px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 0 50px rgba(255, 138, 183, 0.5),
      0 0 100px rgba(232, 67, 147, 0.2),
      inset 0 0 40px rgba(255, 255, 255, 0.15);
  }
}

/* --- Tape Progress --- */
@keyframes tapeProgress {
  from { width: 0%; }
  to { width: 100%; }
}

/* --- Birthday Button Glow --- */
@keyframes birthdayBtnGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(255, 138, 183, 0.4),
      0 0 40px rgba(232, 67, 147, 0.2),
      0 0 60px rgba(232, 67, 147, 0.1);
  }
  50% {
    box-shadow:
      0 0 40px rgba(255, 138, 183, 0.6),
      0 0 80px rgba(232, 67, 147, 0.3),
      0 0 120px rgba(232, 67, 147, 0.15),
      0 0 160px rgba(255, 138, 183, 0.1);
  }
}

/* --- Moon Glow --- */
@keyframes moonGlow {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(255, 244, 204, 0.4),
      0 0 80px rgba(255, 244, 204, 0.2);
  }
  50% {
    box-shadow:
      0 0 60px rgba(255, 244, 204, 0.6),
      0 0 120px rgba(255, 244, 204, 0.3),
      0 0 180px rgba(255, 244, 204, 0.1);
  }
}