.fire-glow-back,
.fire-glow-ground {
  pointer-events: none;
  transform-box: fill-box;
  will-change: transform, opacity;
}

.fire-glow-back {
  opacity: 0.86;
  transform-origin: 50% 62%;
  animation: fire-glow-soft 4.8s ease-in-out infinite;
}

.fire-glow-ground {
  opacity: 0.78;
  transform-origin: 50% 50%;
  animation: fire-ground-glow 5.3s ease-in-out -1.1s infinite;
}

.fire-flame-primary,
.fire-flame-inner {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
}

.fire-flame-primary {
  animation: flame-primary var(--fire-animation-speed) ease-in-out infinite;
}

.fire-flame-inner {
  animation: flame-inner 2.65s ease-in-out -0.75s infinite;
}

.fire-ember {
  fill: #f3c66f;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ember-rise 3.8s ease-out infinite;
}

.fire-ember--two {
  animation-delay: -1.2s;
  animation-duration: 4.4s;
}

.fire-ember--three {
  animation-delay: -2.4s;
  animation-duration: 3.3s;
}

.fire-ember--four {
  animation-delay: -0.5s;
  animation-duration: 4.9s;
}

@keyframes flame-primary {
  0%, 100% { transform: skewX(0deg) scale(1); opacity: 0.97; filter: brightness(1); }
  22% { transform: skewX(-1.1deg) scale(0.987, 1.022); opacity: 1; filter: brightness(1.04); }
  51% { transform: skewX(0.8deg) scale(1.014, 0.982); opacity: 0.95; filter: brightness(0.98); }
  76% { transform: skewX(-0.55deg) scale(0.995, 1.012); opacity: 0.99; filter: brightness(1.025); }
}

@keyframes flame-inner {
  0%, 100% { transform: skewX(0.4deg) scale(0.99, 1.01); opacity: 0.96; filter: brightness(1.03); }
  33% { transform: skewX(-1deg) scale(1.02, 0.98); opacity: 1; filter: brightness(1.08); }
  67% { transform: skewX(0.8deg) scale(0.985, 1.025); opacity: 0.94; filter: brightness(1); }
}

@keyframes fire-glow-soft {
  0%, 100% { transform: scale(0.985); opacity: 0.72; }
  48% { transform: scale(1.025); opacity: 0.9; }
  74% { transform: scale(1.005); opacity: 0.8; }
}

@keyframes fire-ground-glow {
  0%, 100% { transform: scaleX(0.97); opacity: 0.66; }
  50% { transform: scaleX(1.025); opacity: 0.82; }
}

@keyframes ember-rise {
  0%, 34% { transform: translate(0, 5px) scale(0.65); opacity: 0; }
  42% { opacity: 0.8; }
  78% { opacity: 0.22; }
  100% { transform: translate(-8px, -58px) scale(0.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fire-flame-primary,
  .fire-flame-inner,
  .fire-glow-back,
  .fire-glow-ground,
  .fire-ember {
    animation: none;
  }

  .fire-glow-back { opacity: 0.72; }
  .fire-glow-ground { opacity: 0.66; }
  .fire-ember { opacity: 0; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}