/**
 * fire-frame.css
 */

:root {
  /* Theme Variables - Easy to map to WP Customizer later */
  /* --bg-color: #050505; */
  /* --text-color: #e0e0e0; */
  /* --accent-color: #a82020; */

  /* Fire Palette - Deep, dark, moody */
  --fire-1: rgba(100, 20, 0, 0.5); /* Deepest Red (Back) */
  --fire-2: rgba(140, 30, 0, 0.5); /* Mid Red */
  --fire-3: rgba(200, 60, 0, 0.4); /* Orange/Highlight (Front) */
  --fire-4: rgba(200, 40, 20, 0.2); /* Orange/Highlight (Front) */
  --fire-5: rgba(120, 20, 0, 0.8); /* Orange/Highlight (Front) */
  --fire-height: 30vh; /* Max height of flames */
}

.fire-container {
  position: fixed;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: var(--fire-height);
  /* z-index: 1; */
  pointer-events: none;
  /* The magic sauce: CSS Blur + Blend Mode */
  filter: blur(8px) contrast(1.2);
  transform: translate3d(0, 0, 0); /* Hardware accel trigger */
}

.fire-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Ensure the SVG scales properly */
  overflow: visible;
}

path {
  /* Smooth transitions if we change colors */
  transition: fill 0.3s ease;
  mix-blend-mode: screen; /* Makes overlapping parts brighter */
}