/* Orbi-Einbettung für die Website (Stand: orbi-animation-lab, 06.10.2026).
   Übernommen: Stage-Grundlagen, Mini-Orbi-Schwarm, Stage-Effekte und Wort-Pillen aus styles.css des Labs.
   Die Stage ist hier transparent und frei auf der Seite platziert. */
.orbi-embed.stage {
  --orbi-ground-y: calc(50% + 98px);
  position: relative;
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  min-height: 320px;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.orbi-mount { position: relative; z-index: 1; display: grid; min-height: 250px; place-items: center; }
.mini-orbi-swarm {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  transform-origin: center;
}
.mini-orbi__body,
.mini-orbi__shadow,
.mini-orbi-swarm__ring,
.mini-orbi-swarm__spark {
  position: absolute;
  will-change: transform, opacity;
}
.mini-orbi__body {
  top: 0;
  left: 0;
  width: var(--mini-orbi-size);
  height: var(--mini-orbi-size);
  margin: calc(var(--mini-orbi-size) / -2);
  opacity: 0;
  transform-origin: center;
}
.mini-orbi__body > .orbi {
  --orbi-size: var(--mini-orbi-size);
}
.mini-orbi__body .orbi__shadow { display: none; }
.mini-orbi__body .orbi__svg {
  filter: drop-shadow(0 7px 10px color-mix(in srgb, var(--orbi-fill-4) 22%, transparent));
}
.mini-orbi__shadow {
  top: 92px;
  left: -23px;
  width: 46px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(54, 43, 98, .3), transparent 72%);
  filter: blur(3px);
  opacity: 0;
  transform-origin: center;
}
.mini-orbi-swarm__ring {
  top: 0;
  left: 0;
  width: 126px;
  height: 126px;
  border: 5px solid color-mix(in srgb, var(--swarm-color-a) 78%, white);
  border-radius: 50%;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--swarm-color-b) 44%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--swarm-color-c) 36%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.18);
}
.mini-orbi-swarm__spark {
  top: -3px;
  left: calc(var(--spark-length) / -2);
  width: var(--spark-length);
  height: 6px;
  border-radius: 999px;
  background: var(--spark-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--spark-color) 56%, transparent);
  opacity: 0;
}

.orbi-stage-effects {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.orbi-thought-bubble {
  position: absolute;
  top: -128px;
  left: 64px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 43px;
  border: 1px solid rgba(101, 78, 181, .20);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 11px 28px rgba(59, 40, 128, .12), inset 0 0 18px rgba(133, 102, 255, .09);
  opacity: 0;
  transform: translateY(8px) scale(.68);
  transform-origin: 4px 38px;
  backdrop-filter: blur(8px);
  will-change: opacity, transform;
}

.orbi-thought-bubble::before,
.orbi-thought-bubble::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 3px 9px rgba(59, 40, 128, .10);
}
.orbi-thought-bubble::before { bottom: -12px; left: 4px; width: 14px; height: 14px; }
.orbi-thought-bubble::after { bottom: -21px; left: -5px; width: 8px; height: 8px; }
.orbi-thought-bubble i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--fx-a), var(--fx-b));
  opacity: 0;
  transform: translateY(2px) scale(.3);
  will-change: opacity, transform;
}

.orbi-confetti-particle {
  position: absolute;
  top: -58px;
  left: 0;
  width: var(--confetti-width);
  height: var(--confetti-height);
  border-radius: 2px;
  background: var(--confetti-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--confetti-color) 36%, transparent);
  opacity: 0;
  transform-origin: center;
  will-change: opacity, transform;
}

.orbi-whistle-note {
  position: absolute;
  top: 54px;
  left: 16px;
  color: #5b43cf;
  font-size: var(--note-size);
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 4px 5px rgba(75, 54, 151, .25));
  transform-origin: center;
  will-change: opacity, transform;
}
.orbi-sleep-z {
  position: absolute;
  top: 44px;
  left: 24px;
  color: #5b43cf;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  font-size: var(--sleep-z-size);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(75, 54, 151, .24));
  transform-origin: center;
  will-change: opacity, transform;
}
.orbi-try-me-bubble {
  position: absolute;
  top: -72px;
  left: 116px;
  min-width: 186px;
  padding: 19px 30px;
  border-radius: 28px;
  background: #3B82F6;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(18px);
  transform-origin: 28px bottom;
  will-change: opacity, transform;
}
.orbi-try-me-bubble::after {
  position: absolute;
  bottom: -20px;
  left: 26px;
  width: 32px;
  height: 22px;
  background: #3B82F6;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  content: "";
}
.orbi-growth-trait {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--trait-a), var(--trait-b));
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--trait-b) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .34);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(30, 18, 80, .28);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  transform-origin: center;
  will-change: opacity, transform;
}

@media (max-width: 620px) {
  .orbi-embed .mini-orbi-swarm { transform: scale(.72); }
  .orbi-embed .orbi-growth-trait { padding: 9px 16px; font-size: 17px; }
}