.flame-effect {
  position: relative;
  overflow: hidden;
  --flame-delay: 0s;
  --flame-duration: 3s;
}

.flame-effect::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 120%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 15% 100%, rgba(102, 126, 234, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse at 35% 100%, rgba(102, 126, 234, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 55% 100%, rgba(102, 126, 234, 0.19) 0%, transparent 43%),
    radial-gradient(ellipse at 75% 100%, rgba(102, 126, 234, 0.17) 0%, transparent 38%),
    radial-gradient(ellipse at 90% 100%, rgba(102, 126, 234, 0.18) 0%, transparent 41%);
  animation: flameFlicker1 var(--flame-duration) ease-in-out var(--flame-delay) infinite;
  pointer-events: none;
  filter: blur(10px);
  z-index: 0;
}

.flame-effect::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 120%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 25% 100%, rgba(147, 197, 253, 0.14) 0%, transparent 35%),
    radial-gradient(ellipse at 45% 100%, rgba(147, 197, 253, 0.12) 0%, transparent 33%),
    radial-gradient(ellipse at 65% 100%, rgba(147, 197, 253, 0.13) 0%, transparent 31%),
    radial-gradient(ellipse at 85% 100%, rgba(147, 197, 253, 0.11) 0%, transparent 30%);
  animation: flameFlicker2 calc(var(--flame-duration) * 0.9) ease-in-out calc(var(--flame-delay) + 0.5s) infinite;
  pointer-events: none;
  filter: blur(12px);
  z-index: 0;
}

/* Ensure content stays above flames */
.flame-effect > * {
  position: relative;
  z-index: 1;
}

@keyframes flameFlicker1 {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    opacity: 1;
  }
  15% {
    transform: translateY(-8px) scaleY(1.1) scaleX(0.98);
    opacity: 0.94;
  }
  33% {
    transform: translateY(-14px) scaleY(1.18) scaleX(1.03);
    opacity: 0.9;
  }
  48% {
    transform: translateY(-10px) scaleY(1.08) scaleX(0.97);
    opacity: 0.96;
  }
  67% {
    transform: translateY(-16px) scaleY(1.22) scaleX(1.02);
    opacity: 0.88;
  }
  82% {
    transform: translateY(-6px) scaleY(1.05) scaleX(0.99);
    opacity: 0.97;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    opacity: 1;
  }
}

@keyframes flameFlicker2 {
  0% {
    transform: translateY(-4px) scaleY(1.03) scaleX(1.01);
    opacity: 0.95;
  }
  22% {
    transform: translateY(-12px) scaleY(1.14) scaleX(0.98);
    opacity: 0.91;
  }
  41% {
    transform: translateY(-7px) scaleY(1.06) scaleX(1.02);
    opacity: 0.96;
  }
  59% {
    transform: translateY(-15px) scaleY(1.2) scaleX(0.99);
    opacity: 0.89;
  }
  76% {
    transform: translateY(-9px) scaleY(1.09) scaleX(1.01);
    opacity: 0.94;
  }
  100% {
    transform: translateY(-4px) scaleY(1.03) scaleX(1.01);
    opacity: 0.95;
  }
}