/* =========================
   BabyExpo Bubbles
   komplette bubbles.css
   ========================= */

/* Wrapper */
.bubble-wrap{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Nur echter Inhalt nach vorne, nicht die Bubble selbst */
.bubble-wrap > :not(.bubble){
  position: relative;
  z-index: 2;
}

/* Für Cards */
.mw-card.bubble-wrap{
  position: relative;
  overflow: hidden;
}

.mw-card.bubble-wrap .card-body,
.mw-card.bubble-wrap .mw-card-media{
  position: relative;
  z-index: 2;
}

/* =========================
   Basis
   ========================= */

.bubble{
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: .34;
  filter: blur(0);
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Lichtreflex */
.bubble::before{
  content: "";
  position: absolute;
  width: 38%;
  height: 38%;
  top: 14%;
  left: 18%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.58) 38%,
    rgba(255,255,255,.14) 72%,
    rgba(255,255,255,0) 100%);
  opacity: .72;
  filter: blur(1px);
  pointer-events: none;
  transform-origin: 50% 50%;
}

/* =========================
   Farben
   ========================= */

.bubble-blue{
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,.50) 0%,
    rgba(168,231,255,.72) 24%,
    rgba(103,199,240,.48) 58%,
    rgba(103,199,240,.16) 100%);
}

.bubble-red{
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,.28) 0%,
    rgba(255,175,180,.42) 24%,
    rgba(228,87,94,.26) 58%,
    rgba(228,87,94,.10) 100%);
}

.bubble-white{
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.78) 40%,
    rgba(255,255,255,.30) 72%,
    rgba(255,255,255,0) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

/* =========================
   Größen
   ========================= */

.bubble-xs{ width: 52px;  height: 52px; }
.bubble-sm{ width: 84px;  height: 84px; }
.bubble-md{ width: 128px; height: 128px; }
.bubble-lg{ width: 190px; height: 190px; }
.bubble-xl{ width: 260px; height: 260px; }
.bubble-xxl{ width: 340px; height: 340px; }

/* =========================
   Positionen
   ========================= */

/* angeschnitten in Ecken */
.bubble-tl{ top: -42px; left: -42px; }
.bubble-tr{ top: -42px; right: -42px; }
.bubble-bl{ bottom: -42px; left: -42px; }
.bubble-br{ bottom: -42px; right: -42px; }

/* weiter innen */
.bubble-tl-soft{ top: 18px; left: 18px; }
.bubble-tr-soft{ top: 18px; right: 18px; }
.bubble-bl-soft{ bottom: 18px; left: 18px; }
.bubble-br-soft{ bottom: 18px; right: 18px; }

/* seitlich mittig */
.bubble-mid-left{
  top: 50%;
  left: -48px;
  transform: translateY(-50%);
}

.bubble-mid-right{
  top: 50%;
  right: -48px;
  transform: translateY(-50%);
}

/* kleine Feinkorrekturen */
.bubble-up-1{ margin-top: -12px; }
.bubble-up-2{ margin-top: -24px; }
.bubble-down-1{ margin-top: 12px; }
.bubble-down-2{ margin-top: 24px; }

.bubble-left-1{ margin-left: -12px; }
.bubble-left-2{ margin-left: -24px; }
.bubble-right-1{ margin-left: 12px; }
.bubble-right-2{ margin-left: 24px; }

/* =========================
   Stärke / Look
   ========================= */

.bubble-faint{ opacity: .12; }
.bubble-soft{ opacity: .22; }
.bubble-strong{ opacity: .42; }
.bubble-bold{ opacity: .56; }

.bubble-blur-sm{ filter: blur(2px); }
.bubble-blur-md{ filter: blur(5px); }
.bubble-blur-lg{ filter: blur(9px); }

.bubble-glow{
  box-shadow:
    0 0 20px rgba(103,199,240,.12),
    0 0 40px rgba(103,199,240,.08);
}

/* Reflex aus */
.bubble-no-shine::before{
  display: none;
}

/* =========================
   Animationen
   ========================= */

/* Einmal weich einblenden: fast unsichtbar -> normal */
@keyframes bubblePulseIn{
  0%{
    opacity: .06;
    transform: scale(.90);
  }
  45%{
    opacity: .34;
    transform: scale(1);
  }
  100%{
    opacity: .34;
    transform: scale(1);
  }
}

/* Ruhiges dauerhaftes Atmen */
@keyframes bubblePulseLoop{
  0%, 100%{
    transform: scale(.9);
    opacity: .1;
  }
  50%{
    transform: scale(1);
    opacity: .36;
  }
}

/* Etwas kräftiger */
@keyframes bubblePulseLoopStrong{
  0%, 100%{
    transform: scale(.94);
    opacity: .36;
  }
  50%{
    transform: scale(1.03);
    opacity: .76;
  }
}

/* Rotierender Glanzpunkt */
@keyframes bubbleShineRotate{
  0%{
    transform: rotate(0deg) translateX(22%) rotate(0deg);
    opacity: .52;
  }
  25%{
    opacity: .80;
  }
  50%{
    transform: rotate(180deg) translateX(22%) rotate(-180deg);
    opacity: .40;
  }
  75%{
    opacity: .80;
  }
  100%{
    transform: rotate(360deg) translateX(22%) rotate(-360deg);
    opacity: .52;
  }
}

/* Klassen */
.bubble-pulse{
  animation: bubblePulseIn 2.6s ease-out forwards;
}

.bubble-pulse-loop{
  animation: bubblePulseLoop 2.8s linear infinite !important;
}

.bubble-pulse-strong{
  animation: bubblePulseLoopStrong 5.8s ease-in-out infinite;
}

.bubble-shine::before{
  top: 50%;
  left: 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
  animation: bubbleShineRotate 10s linear infinite;
}

.bubble-shine-slow::before{
  top: 50%;
  left: 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
  animation: bubbleShineRotate 15s linear infinite;
}

.bubble-delay-1{ animation-delay: .8s; }
.bubble-delay-2{ animation-delay: 1.6s; }
.bubble-delay-3{ animation-delay: 2.4s; }
.bubble-delay-4{ animation-delay: 3.2s; }

.bubble-shine-delay-1::before{ animation-delay: 1s; }
.bubble-shine-delay-2::before{ animation-delay: 2s; }
.bubble-shine-delay-3::before{ animation-delay: 3s; }

/* =========================
   Mobile
   ========================= */

@media (max-width: 767.98px){
  .bubble-lg{ width: 150px; height: 150px; }
  .bubble-xl{ width: 210px; height: 210px; }
  .bubble-xxl{ width: 260px; height: 260px; }

  .bubble-tl{ top: -28px; left: -28px; }
  .bubble-tr{ top: -28px; right: -28px; }
  .bubble-bl{ bottom: -28px; left: -28px; }
  .bubble-br{ bottom: -28px; right: -28px; }
}

/* =========================
   Reduced Motion
   ========================= */

@media (prefers-reduced-motion: reduce){
  .mw-reveal,
  .mw-card{
    animation: none !important;
  }
}