/* Ember effect for bonfire background - container inside main-wrapper */
.ember-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ember {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  box-shadow:
    0 0 16px 6px #ff9100,
    0 0 32px 12px #ffb30044;
  background: radial-gradient(
    circle,
    #ffb300 0%,
    #ff6f00 60%,
    transparent 100%
  );
  opacity: 0.7;
  animation: ember-float 4s linear infinite;
  will-change: transform, opacity;
  /* Custom properties for drift and scale */
  transform: translateX(0) scale(var(--ember-scale, 1));
}

@keyframes ember-float {
  0% {
    transform: translateY(0) translateX(0) scale(var(--ember-scale, 1));
    opacity: 0.8;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(-600px) translateX(var(--ember-drift, 0))
      scale(var(--ember-scale, 1));
    opacity: 0;
  }
}

body {
  background: #000 !important;
}