@keyframes dance {
    0% { transform: translateY(0); }
    25% { transform: translateY(-5px) rotate(-5deg); }
    50% { transform: translateY(5px) rotate(5deg); }
    75% { transform: translateY(-5px) rotate(-5deg); }
    100% { transform: translateY(0); }
  }
  
  .dance {
    animation: dance 10s infinite;
  }
  
  @keyframes dance-move {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-5px, -5px) rotate(-5deg); }
    40%  { transform: translate(5px, -5px) rotate(5deg); }
    60%  { transform: translate(-5px, 5px) rotate(-5deg); }
    80%  { transform: translate(5px, 5px) rotate(5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }
  
  .dancearound {
    animation: dance-move 6s infinite ease-in-out;
  }
  

/* Fire burning animation */


  @keyframes fire-burn {
  0%   { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); }
  20%  { transform: scale(1.02) translateY(-1px); opacity: 0.95; filter: brightness(1.1); }
  40%  { transform: scale(0.98) translateY(1px); opacity: 1; filter: brightness(0.9); }
  60%  { transform: scale(1.03) translateY(-2px); opacity: 0.9; filter: brightness(1.2); }
  80%  { transform: scale(1) translateY(1px); opacity: 0.97; filter: brightness(1); }
  100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); }
}

.fire-burning {
  animation: fire-burn 1s infinite ease-in-out;
  transform-origin: center;
}







.frame-child-sec {
    transition: transform 0.1s ease-in-out;
  }
  
  .frame-child-sec.vibrate {
    animation: vibrateSlow 1s linear infinite;
  }
  
  /* Vibration on parent hover */
  .frame-parent1-sec:hover .frame-child-sec {
    animation: vibrateSlow 1s linear infinite;
  }
  
  @keyframes vibrateSlow {
    0%   { transform: translate(0); }
    20%  { transform: translate(-2px, 2px); }
    40%  { transform: translate(2px, -2px); }
    60%  { transform: translate(-2px, -2px); }
    80%  { transform: translate(2px, 2px); }
    100% { transform: translate(0); }
  }