/* Fog Effect */
.fog-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

.fog-layer {
  position: absolute;
  width: 200%;
  height: 100%;
  background: transparent url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.15"/></svg>') repeat-x;
  background-size: 50% 100%;
  animation: fogMove 60s linear infinite;
  mix-blend-mode: screen;
}

.fog-layer.two {
  animation: fogMove 40s linear infinite reverse;
  opacity: 0.5;
  transform: scale(1.2);
}

@keyframes fogMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Candle Flicker */
.flicker-text {
  animation: flicker 4s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.5), 0 0 20px rgba(185, 28, 28, 0.3);
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.8;
  }
}

/* Particle Float */
.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  filter: blur(1px);
  animation: floatUp linear forwards;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(0.5);
    opacity: 0;
  }
}

/* Entrance Animations */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

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