/* Simplified smoke animation that stays visible and loops naturally */
@keyframes smokeFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: translateY(-15px) translateX(8px) rotate(1deg) scale(1.05);
    opacity: 1.2;
  }
  50% {
    transform: translateY(-25px) translateX(-3px) rotate(-0.5deg) scale(1.1);
    opacity: 1.3;
  }
  75% {
    transform: translateY(-35px) translateX(12px) rotate(1.5deg) scale(1.08);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-45px) translateX(0px) rotate(0deg) scale(1.15);
    opacity: 0.8;
  }
}

@keyframes smokeDrift {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(20px) rotate(2deg);
  }
  100% {
    transform: translateX(-15px) rotate(-1deg);
  }
}

/* Adding entrance animation that starts small behind cylinder and zooms up */
@keyframes smokeEntrance {
  0% {
    transform: translateY(50px) scale(0.3);
    opacity: 0;
  }
  30% {
    transform: translateY(30px) scale(0.6);
    opacity: 0.2;
  }
  60% {
    transform: translateY(10px) scale(0.8);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
}

/* Adding exit animation for slide transitions */
@keyframes smokeExit {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

/* Enhanced fog container with positioning context */
.bgc-hero-host {
  position: relative;
  overflow: hidden;
}

/* Wrapper element for positioning */
.bgc-hero-fog-sec {
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* Modified fog element to start hidden and use entrance animation */
.bgc-hero-fog {
  width: 100%;
  height: 100%;
  background: url("/wp-content/uploads/smoke-fog.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0;
  transform: translateY(50px) scale(0.3);
  /* Start hidden, entrance animation will be triggered by JavaScript */
}

/* Active state with entrance animation */
.bgc-hero-fog.fog-entering {
  animation: smokeEntrance 2s ease-out forwards;
}

/* Looping state after entrance completes */
.bgc-hero-fog.fog-active {
  opacity: 1 !important;
  animation: smokeFloat 8s ease-in-out infinite, smokeDrift 12s ease-in-out infinite alternate;
}

/* Exit state for slide transitions */
.bgc-hero-fog.fog-exiting {
  animation: smokeExit 1s ease-in forwards;
}

/* Updated pseudo-elements to also start hidden */
.bgc-hero-fog::before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background: url("/wp-content/uploads/smoke-fog.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70%;
  opacity: 0;
  transform: translateY(50px) scale(0.3);
}

.bgc-hero-fog.fog-entering::before {
  animation: smokeEntrance 2.5s ease-out 0.5s forwards;
}

.bgc-hero-fog.fog-active::before {
  opacity: 0.3;
  animation: smokeFloat 10s ease-in-out infinite 2s, smokeDrift 15s ease-in-out infinite reverse;
}

.bgc-hero-fog::after {
  content: "";
  position: absolute;
  top: 3%;
  left: 3%;
  width: 95%;
  height: 95%;
  background: url("/wp-content/uploads/smoke-fog.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
  opacity: 0;
  transform: translateY(50px) scale(0.3);
}

.bgc-hero-fog.fog-entering::after {
  animation: smokeEntrance 3s ease-out 1s forwards;
}

.bgc-hero-fog.fog-active::after {
  opacity: 0.2;
  animation: smokeFloat 12s ease-in-out infinite 4s, smokeDrift 18s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bgc-hero-fog {
    background-size: 120%;
  }

  .bgc-hero-fog::before {
    background-size: 100%;
  }

  .bgc-hero-fog::after {
    background-size: 80%;
  }
}