/* ===== Existing Animations ===== */

/* Fade In */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
}

/* Fade In Up */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay classes */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
/* Add more delays as needed */


/* ===== Refined Smoke Animation ===== */
@keyframes smoke-drift {
  0% {
    opacity: 0;
    transform: translateY(50px) translateX(0px) scale(0.9) rotate(0deg);
  }
  20% {
    opacity: 0.06; /* Gradual fade in */
     transform: translateY(0px) translateX(-20px) scale(1) rotate(-5deg);
  }
  50% {
    opacity: 0.10; /* Max opacity - still subtle */
    transform: translateY(-100px) translateX(40px) scale(1.1) rotate(5deg);
  }
  80% {
     opacity: 0.04; /* Gradual fade out */
     transform: translateY(-180px) translateX(-30px) scale(1.2) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-250px) translateX(20px) scale(1.3) rotate(-5deg); /* Drift further */
  }
}

/* Slower, slightly different path for variation */
@keyframes smoke-drift-2 {
  0% {
    opacity: 0;
    transform: translateY(40px) translateX(0px) scale(0.85) rotate(0deg);
  }
   25% {
    opacity: 0.07;
    transform: translateY(-10px) translateX(30px) scale(1) rotate(6deg);
  }
  60% {
    opacity: 0.11;
    transform: translateY(-120px) translateX(-50px) scale(1.15) rotate(-8deg);
  }
   85% {
     opacity: 0.05;
     transform: translateY(-200px) translateX(40px) scale(1.25) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-280px) translateX(-10px) scale(1.35) rotate(10deg); /* Drift further */
  }
}