.lens-flare-wrapper {
  position: relative;
  overflow: hidden;
  display: block;
}

.lens-flare-wrapper::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(51, 255, 51, 0.1) 0%,
    rgba(51, 255, 51, 0.04) 20%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lens-flare-wrapper:hover::before { opacity: 1; }

.lens-flare-wrapper::after {
  content: '';
  position: absolute;
  top: 10%; left: 15%;
  width: 70%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(51,255,51,0.5), rgba(255,255,255,0.6), rgba(51,255,51,0.5), transparent);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
  transform: rotate(-3deg);
  box-shadow: var(--pip-glow);
}

.lens-flare-wrapper:hover::after { opacity: 1; }

.lens-flare-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lens-flare-wrapper:hover .lens-flare-circle { opacity: 1; }

.flare-circle-1 {
  top: 15%; left: 20%;
  width: 30px; height: 30px;
  background: radial-gradient(circle, rgba(51,255,51,0.25) 0%, transparent 70%);
  box-shadow: 0 0 10px var(--pip-green-glow);
  transition-delay: 0.1s;
}

.flare-circle-2 {
  top: 60%; left: 65%;
  width: 18px; height: 18px;
  background: radial-gradient(circle, rgba(51,255,51,0.2) 0%, transparent 70%);
  transition-delay: 0.2s;
}

.flare-hex {
  position: absolute;
  width: 14px; height: 14px;
  top: 45%; left: 55%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease 0.15s;
}

.lens-flare-wrapper:hover .flare-hex { opacity: 0.4; }

.flare-hex::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(51,255,51,0.25);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.lens-flare-wrapper.flare-subtle::before { opacity: 0.2; }
.lens-flare-wrapper.flare-subtle:hover::before { opacity: 0.6; }
.lens-flare-wrapper.flare-subtle::after { opacity: 0.1; }
.lens-flare-wrapper.flare-subtle:hover::after { opacity: 0.4; }
.lens-flare-wrapper.flare-subtle .lens-flare-circle { opacity: 0.15; }
.lens-flare-wrapper.flare-subtle:hover .lens-flare-circle { opacity: 0.5; }