/* Shared matrix glitter / glow / interactive energy (calculator + compatibility) */

.glitter-note {
  position: relative;
  overflow: hidden;
}

.glitter-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 20% 30%, rgba(201, 168, 232, 0.8), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(201, 168, 232, 0.6), transparent),
    radial-gradient(2px 2px at 50% 50%, rgba(201, 168, 232, 0.7), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(201, 168, 232, 0.5), transparent),
    radial-gradient(1px 1px at 10% 90%, rgba(201, 168, 232, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(201, 168, 232, 0.8), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(201, 168, 232, 0.4), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(201, 168, 232, 0.7), transparent),
    radial-gradient(1px 1px at 40% 20%, rgba(201, 168, 232, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 15% 40%, rgba(201, 168, 232, 0.6), transparent),
    radial-gradient(1px 1px at 75% 80%, rgba(201, 168, 232, 0.7), transparent),
    radial-gradient(1px 1px at 25% 75%, rgba(201, 168, 232, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 85% 35%, rgba(201, 168, 232, 0.8), transparent),
    radial-gradient(1px 1px at 5% 50%, rgba(201, 168, 232, 0.6), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(201, 168, 232, 0.7), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(201, 168, 232, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 65% 25%, rgba(201, 168, 232, 0.6), transparent),
    radial-gradient(1px 1px at 12% 65%, rgba(201, 168, 232, 0.8), transparent),
    radial-gradient(1px 1px at 78% 55%, rgba(201, 168, 232, 0.4), transparent),
    radial-gradient(1px 1px at 45% 95%, rgba(201, 168, 232, 0.7), transparent);
  background-size: 100% 100%;
  background-repeat: repeat;
  pointer-events: none;
  animation: sparkle 3s ease-in-out infinite;
}

.interactive-energy {
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: none;
}

.interactive-energy:hover {
  filter: brightness(1.3) drop-shadow(0 0 8px rgba(216, 159, 255, 0.8));
}

.interactive-energy.active {
  filter: brightness(1.5) drop-shadow(0 0 15px rgba(216, 159, 255, 1));
}

.interactive-energy-circle {
  cursor: pointer;
  transition: all 0.3s ease;
}

.interactive-energy-circle:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(216, 159, 255, 0.8));
}

.interactive-energy-circle.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(216, 159, 255, 1)) !important;
}

.glow-purple:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(216, 159, 255, 0.8)) !important;
}

.glow-purple.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(216, 159, 255, 1)) !important;
}

.glow-blue:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(123, 143, 216, 0.8)) !important;
}

.glow-blue.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(123, 143, 216, 1)) !important;
}

.glow-cyan:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(168, 236, 245, 0.8)) !important;
}

.glow-cyan.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(168, 236, 245, 1)) !important;
}

.glow-white:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 252, 240, 0.8)) !important;
}

.glow-white.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 252, 240, 1)) !important;
}

.glow-yellow:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(251, 228, 157, 0.8)) !important;
}

.glow-yellow.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(251, 228, 157, 1)) !important;
}

.glow-green:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(212, 245, 161, 0.8)) !important;
}

.glow-green.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(212, 245, 161, 1)) !important;
}

.glow-coral:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(232, 154, 138, 0.8)) !important;
}

.glow-coral.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(232, 154, 138, 1)) !important;
}

.glow-orange:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(233, 165, 119, 0.8)) !important;
}

.glow-orange.active {
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(233, 165, 119, 1)) !important;
}