/* ═══════════════════════════════════════════════════════════════
   BLOOM SYSTEM — legt einen leuchtenden „Bloom" über Blüten (Hotspots)
   Verwendung:
     <div class="bloom-stage" data-bloom='[{"x":17,"y":42,"r":30}]'>
       <img src="...">
     </div>
   Koordinaten x/y/r in % der Stage. JS: bloom.js (scannt automatisch).
   ═══════════════════════════════════════════════════════════════ */

.bloom-stage {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  --bloom-opacity: 1;
}
.bloom-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloom-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;          /* nur aufhellen → echtes Lichtbloom */
  opacity: var(--bloom-opacity);
  transition: opacity 0.45s ease;
}

.bloom-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.bloom-spot__halo,
.bloom-spot__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.bloom-spot__halo {
  background: radial-gradient(circle,
    rgba(222,255,140,0.95) 0%,
    rgba(255,236,150,0.62) 28%,
    rgba(255,200,95,0.24) 52%,
    transparent 74%);
  filter: blur(calc(var(--bloom-r, 90px) * 0.12));
  animation: bloomPulse var(--bloom-speed, 5s) ease-in-out infinite;
}
.bloom-spot__core {
  inset: 33%;
  background: radial-gradient(circle,
    rgba(255,255,245,1) 0%,
    rgba(232,255,175,0.7) 42%,
    transparent 72%);
  filter: blur(calc(var(--bloom-r, 90px) * 0.05));
  animation: bloomPulse var(--bloom-speed, 5s) ease-in-out infinite reverse;
}

/* feine Trichom-Funkeln */
.bloom-spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px 2px rgba(255,250,210,0.9);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: bloomSpark var(--s, 3s) ease-in-out infinite;
}

@keyframes bloomPulse {
  0%, 100% { opacity: 0.5;  transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
@keyframes bloomSpark {
  0%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
  45%, 55% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-spot__halo, .bloom-spot__core, .bloom-spark { animation: none; }
  .bloom-spot__halo { opacity: 0.8; }
}