:root {
  --campfire-skyTop: #05070c;
  --campfire-skyBottom: #010104;
  --campfire-vignetteA: 0.58;
  --campfire-vignetteB: 0.80;

  --campfire-glowOpacity: 0.38;
  --campfire-glowBrightness: 0.82;
  --campfire-flickerAmount: 0.44;
  --campfire-bounceAmount: 0.30;
  --campfire-flickerSec: 4.4s;
}

.campfirefx {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--campfire-skyTop), var(--campfire-skyBottom));
}

.campfirefx::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    80% 70% at 50% 35%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,var(--campfire-vignetteA)) 62%,
    rgba(0,0,0,var(--campfire-vignetteB)) 100%
  );
}

@property --campfire-sigO {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --campfire-sigS {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.campfirefx__glow {
  position: absolute;
  inset: -140px;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;

  background: radial-gradient(
    ellipse at bottom,
    rgba(255, 130, 0, 0.72) 0%,
    rgba(90, 22, 0, 0.22) 45%,
    rgba(0, 0, 0, 0) 82%
  );

  opacity: calc(var(--campfire-glowOpacity) * (1 + var(--campfire-flickerAmount) * var(--campfire-sigO)));
  transform: scale(calc(1 + (var(--campfire-bounceAmount) * 0.018 * var(--campfire-sigS))));
  filter: brightness(var(--campfire-glowBrightness));
  animation: campfirefx-flicker var(--campfire-flickerSec) infinite ease-in-out;
}

@keyframes campfirefx-flicker {
  0%   { --campfire-sigO: -0.10; --campfire-sigS:  0.10; }
  7%   { --campfire-sigO:  0.02; --campfire-sigS:  0.30; }
  13%  { --campfire-sigO: -0.06; --campfire-sigS:  0.12; }
  22%  { --campfire-sigO:  0.14; --campfire-sigS:  0.65; }
  31%  { --campfire-sigO: -0.02; --campfire-sigS:  0.18; }
  47%  { --campfire-sigO:  0.18; --campfire-sigS:  0.78; }
  56%  { --campfire-sigO:  0.03; --campfire-sigS:  0.28; }
  69%  { --campfire-sigO:  0.12; --campfire-sigS:  0.60; }
  81%  { --campfire-sigO: -0.04; --campfire-sigS:  0.14; }
  100% { --campfire-sigO:  0.06; --campfire-sigS:  0.40; }
}

.campfirefx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}