:root {
  --glow-speed: 5s;
  --glow-blur: 20px;
  --glow-colors: #FF5733, #33FF57, #3357FF, #F1C40F;
}

.glow-effect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  filter: blur(var(--glow-blur));
  will-change: transform, background;
  overflow: hidden;
}

.glow-effect--rotate {
  background: conic-gradient(from 0deg at 50% 50%, var(--glow-colors), #FF5733);
  animation: rotate-glow var(--glow-speed) linear infinite;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
}

@keyframes rotate-glow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.glow-effect--breathe {
  background: radial-gradient(circle at 50% 50%, #FF5733 0%, transparent 100%);
  animation: breathe-glow var(--glow-speed) ease-in-out infinite;
}

@keyframes breathe-glow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.glow-effect--pulse {
  background: radial-gradient(circle at 50% 50%, #FF5733 0%, transparent 100%);
  animation: pulse-glow calc(var(--glow-speed) / 2) ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); filter: blur(var(--glow-blur)); }
  50% { transform: scale(1.05); filter: blur(calc(var(--glow-blur) * 1.5)); }
}

/* Blur Presets matching React component */
.glow-blur-softest { --glow-blur: 4px; }
.glow-blur-soft { --glow-blur: 8px; }
.glow-blur-medium { --glow-blur: 16px; }
.glow-blur-strong { --glow-blur: 24px; }
.glow-blur-stronger { --glow-blur: 32px; }
.glow-blur-strongest { --glow-blur: 48px; }
.glow-blur-none { --glow-blur: 0px; }