/* ═══════════════════════════════════════════════════════════════
   BubbleGalleryCL – Stylesheet v4.0
═══════════════════════════════════════════════════════════════ */

.bgcl-canvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
}
.bgcl-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bgcl-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────
   BLASE – 3D Glaseffekt
   Technik: backdrop-filter für Glaslinse + mehrschichtige
   box-shadow + Pseudo-Elemente für Glanz und Randreflex.
   Kein rotierender Fleck mehr.
────────────────────────────────────────────────────────────── */
.bgcl-bubble {
  position: absolute;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: opacity 0.5s ease;
  overflow: hidden;          /* clip-path braucht dies für saubere Kanten */
  transform-style: preserve-3d; /* 3D-Kipp */

  /* Glaslinsen-Effekt – mit webkit-Prefix für iOS Safari */
  -webkit-backdrop-filter: blur(1px) brightness(1.08);
  backdrop-filter: blur(1px) brightness(1.08);

  /* 3D-Ring: Fresnel-Effekt + Tiefe */
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.45),
    inset 0 -3px 8px rgba(0,30,80,0.30),
    inset 3px 0 8px rgba(180,220,255,0.12),
    inset -3px 0 8px rgba(255,200,180,0.10),
    0 6px 24px rgba(100,160,255,0.18),
    0 2px 8px rgba(0,0,0,0.15);
}

/* Keine Glanzlichter – nur Farbanimation */
.bgcl-bubble::before,
.bgcl-bubble::after {
  content: none;
}

/* Schimmer: hue-rotate auf dem ganzen Element – funktioniert auf allen Geräten */
.bgcl-bubble.bgcl-shimmer {
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.45),
    inset 0 -3px 8px rgba(0,30,80,0.30),
    inset 3px 0 8px rgba(180,220,255,0.12),
    inset -3px 0 8px rgba(255,200,180,0.10),
    0 0 0 1.5px rgba(120,200,255,0.25),
    0 6px 24px rgba(100,160,255,0.18),
    0 2px 8px rgba(0,0,0,0.15);
  -webkit-animation: bgclIridescentRing 6s linear infinite;
  animation: bgclIridescentRing 6s linear infinite;
}

@-webkit-keyframes bgclIridescentRing {
  0%   { -webkit-filter: hue-rotate(0deg)   saturate(1.2) brightness(1.05); filter: hue-rotate(0deg)   saturate(1.2) brightness(1.05); }
  33%  { -webkit-filter: hue-rotate(120deg) saturate(1.4) brightness(1.08); filter: hue-rotate(120deg) saturate(1.4) brightness(1.08); }
  66%  { -webkit-filter: hue-rotate(240deg) saturate(1.4) brightness(1.08); filter: hue-rotate(240deg) saturate(1.4) brightness(1.08); }
  100% { -webkit-filter: hue-rotate(360deg) saturate(1.2) brightness(1.05); filter: hue-rotate(360deg) saturate(1.2) brightness(1.05); }
}
@keyframes bgclIridescentRing {
  0%   { -webkit-filter: hue-rotate(0deg)   saturate(1.2) brightness(1.05); filter: hue-rotate(0deg)   saturate(1.2) brightness(1.05); }
  33%  { -webkit-filter: hue-rotate(120deg) saturate(1.4) brightness(1.08); filter: hue-rotate(120deg) saturate(1.4) brightness(1.08); }
  66%  { -webkit-filter: hue-rotate(240deg) saturate(1.4) brightness(1.08); filter: hue-rotate(240deg) saturate(1.4) brightness(1.08); }
  100% { -webkit-filter: hue-rotate(360deg) saturate(1.2) brightness(1.05); filter: hue-rotate(360deg) saturate(1.2) brightness(1.05); }
}

/* Pop */
.bgcl-pop { pointer-events: none !important; }

/* ── Start-Button ── */
.bgcl-start-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 14px 32px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.25s, transform 0.2s;
}
.bgcl-start-btn:hover {
  background: rgba(255,255,255,0.28);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ── Lightbox ── */
.bgcl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bgcl-lightbox.bgcl-lb-active { opacity: 1; }
.bgcl-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  cursor: zoom-out;
}
.bgcl-lb-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
  max-width: 96vw;
}
.bgcl-lb-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.bgcl-lb-media img {
  max-width: 80vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 60px rgba(0,0,0,0.8);
  display: block;
  cursor: zoom-out;
}
.bgcl-lb-caption {
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
  max-width: 60ch;
  line-height: 1.5;
}
.bgcl-lb-close, .bgcl-lb-prev, .bgcl-lb-next {
  background: rgba(255,255,255,0.10);
  border: 2px solid rgba(255,255,255,0.20);
  color: #fff;
  border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.bgcl-lb-close:hover, .bgcl-lb-prev:hover, .bgcl-lb-next:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.1);
}
.bgcl-lb-close { position: absolute; top: -52px; right: 0; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .bgcl-canvas-wrap { height: 450px; }
  .bgcl-lb-inner { gap: 8px; }
}
@media (max-width: 767px) {
  .bgcl-canvas-wrap { height: 320px; }
  .bgcl-lb-prev, .bgcl-lb-next { width: 36px; height: 36px; font-size: 1rem; }
}