/* ============================================================
   BLOOM BLUE - ANIMATION KEYFRAMES & EFFECTS
   ============================================================ */

/* 1. Subtle Flower & Ellipse Floating / Vibration */
@keyframes vibrate-1 {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
}

.vibrate-1-8s {
  animation: vibrate-1 8s ease-in-out infinite both;
}

.vibrate-1-10s {
  animation: vibrate-1 10s ease-in-out infinite both;
}

.vibrate-1-15s {
  animation: vibrate-1 15s ease-in-out infinite both;
}

/* 2. Shake Vertical / Gentle Sway */
@keyframes shake-vertical {
  0%, 100% {
    transform: translateY(0);
  }
  10%, 30%, 50%, 70% {
    transform: translateY(-4px);
  }
  20%, 40%, 60% {
    transform: translateY(4px);
  }
  80% {
    transform: translateY(2px);
  }
  90% {
    transform: translateY(-2px);
  }
}

.shake-vertical {
  animation: shake-vertical 12s ease-in-out infinite both;
}

.shake-vertical-reverse {
  animation: shake-vertical 14s ease-in-out infinite reverse both;
}

/* 2. Shake Bottom & Harmonic Pendulum Flower Sway (-9deg to +9deg) */
@keyframes shake-bottom {
  0% {
    transform: rotate(-9deg);
  }
  100% {
    transform: rotate(9deg);
  }
}

@keyframes smoothFlowerSway {
  0% {
    transform: rotate(-9deg);
  }
  100% {
    transform: rotate(9deg);
  }
}

.shake-bottom,
.corner-floral-art {
  transform-origin: 90% 95% !important;
  animation: smoothFlowerSway 4s ease-in-out infinite alternate !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3. Pulsate Button */
@keyframes pulsate-fwd {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(27, 61, 108, 0.25);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 8px 25px rgba(27, 61, 108, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(27, 61, 108, 0.25);
  }
}

.pulsate-fwd {
  animation: pulsate-fwd 2s ease-in-out infinite both;
}

/* 4. Disc Spin for Music Player */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-disc {
  animation: spin 6s linear infinite;
}

/* 5. Firefly Floating Particle Animations (Desktop Left Side Panel) */
.firefly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2px;
  background-color: rgba(248, 237, 198, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(248, 237, 198, 0.8), 0 0 20px 6px rgba(214, 225, 238, 0.5);
  pointer-events: none;
  animation: firefly-float 8s ease-in-out infinite alternate;
}

.firefly:nth-child(1) { top: 15%; left: 20%; animation-duration: 7s; animation-delay: 0s; }
.firefly:nth-child(2) { top: 25%; left: 75%; animation-duration: 9s; animation-delay: 1s; width: 6px; height: 6px; }
.firefly:nth-child(3) { top: 40%; left: 35%; animation-duration: 11s; animation-delay: 2s; }
.firefly:nth-child(4) { top: 60%; left: 80%; animation-duration: 8s; animation-delay: 0.5s; width: 4px; height: 4px; }
.firefly:nth-child(5) { top: 75%; left: 25%; animation-duration: 10s; animation-delay: 1.5s; width: 6px; height: 6px; }
.firefly:nth-child(6) { top: 85%; left: 65%; animation-duration: 12s; animation-delay: 3s; }
.firefly:nth-child(7) { top: 30%; left: 10%; animation-duration: 6s; animation-delay: 2.5s; width: 5px; height: 5px; }
.firefly:nth-child(8) { top: 70%; left: 45%; animation-duration: 9s; animation-delay: 0.8s; }
.firefly:nth-child(9) { top: 50%; left: 90%; animation-duration: 13s; animation-delay: 1.2s; width: 7px; height: 7px; }
.firefly:nth-child(10) { top: 90%; left: 15%; animation-duration: 8s; animation-delay: 4s; }

@keyframes firefly-float {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0.2;
  }
  50% {
    transform: translate(25px, -35px) scale(1.2);
    opacity: 0.9;
  }
  100% {
    transform: translate(-20px, 30px) scale(0.9);
    opacity: 0.4;
  }
}

/* 6. Image Flip X */
.img-flip-x {
  transform: scaleX(-1);
}