.hero-glow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s ease;
}

.hero-glow-container.visible {
  opacity: 1;
}

.hero-ambient-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  opacity: var(--glow-intensity, 0.5);
  transform: translate(var(--glow-move-x, 0), var(--glow-move-y, 0))
    scale(var(--glow-scale, 1));
  filter: blur(40px);
  will-change: opacity, transform;
}

.hero-ambient-glow--top {
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  opacity: 0.5;
  transform: translateX(-30%) translateY(-10%);
  background: radial-gradient(
    circle at 0 0,
    rgba(253, 163, 93, 1) 0%,
    rgba(253, 163, 93, 0.6) 30%,
    rgba(253, 163, 93, 0.3) 60%,
    transparent 100%
  );
}

.hero-ambient-glow--bottom {
  bottom: 0;
  right: 0;
  width: 350px;
  height: 350px;
  opacity: 0.2;
  transform: translateX(30%) translateY(20%);
  background: radial-gradient(
    circle at 100% 100%,
    rgba(165, 196, 212, 0.7) 0%,
    rgba(165, 196, 212, 0.4) 30%,
    rgba(165, 196, 212, 0.1) 60%,
    transparent 100%
  );
}