/* Comic Bubbles + SFX (Onomatopoeia) — animations & visual styling.
   Loaded via builder.css; lives separately so it's easy to iterate on the comic feel. */

/* ===== Container layout ===== */
.wsb-block.wsb-bubble,
.wsb-block.wsb-sfx {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: visible !important; /* so SFX bursts can extend outside the box */
  background: transparent;
  border: none;
}

/* SVG fills the block bounds exactly; text overlays on top */
.wsb-bubble .wsb-bubble-svg,
.wsb-sfx .wsb-sfx-burst {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
}

.wsb-bubble-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 12px 18px;
  line-height: 1.2;
  font-weight: 700;
  word-break: break-word;
  white-space: pre-wrap;
  user-select: none;
}

.wsb-sfx-text {
  position: relative;
  z-index: 2;
  font-weight: 900;
  letter-spacing: 0.02em;
  user-select: none;
  text-align: center;
  line-height: 0.95;
}

/* ===== Gooey filter: overlapping bubbles merge into one shape ===== */
/* This is the trick — applies to a parent that holds bubbles. SVG filter
   blurs alpha then sharpens with a high-contrast colorMatrix → adjacent
   shapes' edges blend cleanly. */
.wsb-canvas {
  filter: url(#wsb-gooey-filter);
}

/* Disable gooey while a block is being dragged so the user sees crisp edges. */
.wsb-canvas.wsb-dragging {
  filter: none;
}

/* The filter itself lives in an inline SVG that scripts.js injects once on page load.
   When user disables merging (per block), add .wsb-bubble-no-merge to opt out. */
.wsb-bubble-no-merge {
  isolation: isolate;
}

/* ===== Animations ===== */

/* Bounce in — starts small, overshoots, settles */
@keyframes wsb-bubble-bounce-in {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.15) translateY(-4px); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.wsb-bubble-anim-bounce-in {
  animation: wsb-bubble-bounce-in 0.6s cubic-bezier(.34,1.56,.64,1) both;
}

/* Zoom pop — fast pop with overshoot, classic comic SFX entry */
@keyframes wsb-bubble-zoom-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-15deg); }
  60%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.wsb-bubble-anim-zoom-pop {
  animation: wsb-bubble-zoom-pop 0.5s cubic-bezier(.4,2,.4,1) both;
}

/* Shake — jitters horizontally on a loop */
@keyframes wsb-bubble-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-2deg); }
  40% { transform: translateX(4px) rotate(2deg); }
  60% { transform: translateX(-3px) rotate(-1.5deg); }
  80% { transform: translateX(3px) rotate(1.5deg); }
}
.wsb-bubble-anim-shake {
  animation: wsb-bubble-shake 0.55s ease-in-out infinite;
}

/* Pulse — heartbeat-style scale on loop */
@keyframes wsb-bubble-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.wsb-bubble-anim-pulse {
  animation: wsb-bubble-pulse 1.4s ease-in-out infinite;
}

/* Slide in (from various directions) */
@keyframes wsb-bubble-slide-left {
  0%   { opacity: 0; transform: translateX(-80px); }
  100% { opacity: 1; transform: translateX(0); }
}
.wsb-bubble-anim-slide-in-left {
  animation: wsb-bubble-slide-left 0.45s cubic-bezier(.2,.8,.4,1) both;
}
@keyframes wsb-bubble-slide-right {
  0%   { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}
.wsb-bubble-anim-slide-in-right {
  animation: wsb-bubble-slide-right 0.45s cubic-bezier(.2,.8,.4,1) both;
}
@keyframes wsb-bubble-slide-up {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.wsb-bubble-anim-slide-in-up {
  animation: wsb-bubble-slide-up 0.45s cubic-bezier(.2,.8,.4,1) both;
}

/* Fade in */
@keyframes wsb-bubble-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.wsb-bubble-anim-fade-in {
  animation: wsb-bubble-fade-in 0.5s ease-in both;
}

/* Float — gentle hover up/down, looped */
@keyframes wsb-bubble-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.wsb-bubble-anim-float {
  animation: wsb-bubble-float 3.2s ease-in-out infinite;
}

/* Wobble — playful side-to-side rotation, looped */
@keyframes wsb-bubble-wobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.wsb-bubble-anim-wobble {
  animation: wsb-bubble-wobble 2.4s ease-in-out infinite;
}

/* Typewriter — reveals text character-by-character.
   Applied to a child .wsb-bubble-text. We override `overflow:hidden` + `white-space:nowrap`
   and an animated `width` from 0 to 100%. Won't work for multi-line text but that's OK. */
.wsb-bubble-anim-typewriter .wsb-bubble-text,
.wsb-bubble-anim-typewriter .wsb-sfx-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  width: 0;
  animation: wsb-typewriter 1.6s steps(20, end) both, wsb-blink-caret 0.7s steps(1) infinite;
  display: inline-block;
}
@keyframes wsb-typewriter {
  0%   { width: 0; }
  100% { width: 100%; }
}
@keyframes wsb-blink-caret {
  0%, 100% { border-right-color: transparent; }
  50%      { border-right-color: currentColor; }
}

/* ===== Builder palette thumbnails for bubbles + SFX (tiny preview chips) ===== */
.wsb-thumb-bubble-speech    { background: radial-gradient(circle, #fff 60%, transparent 60%) center/cover no-repeat, #6bf7ff; }
.wsb-thumb-bubble-thought   { background: radial-gradient(ellipse, #fff 55%, transparent 55%) center/cover no-repeat, #C36C94; }
.wsb-thumb-bubble-shout     { background: conic-gradient(from 0deg, #ffeb3b 0 25%, #fff 25% 50%, #ffeb3b 50% 75%, #fff 75% 100%); }
.wsb-thumb-bubble-whisper   { background: repeating-linear-gradient(45deg, #fff, #fff 5px, #aaa 5px, #aaa 6px); }
.wsb-thumb-bubble-yell      { background: linear-gradient(45deg, #fff 25%, #ff5722 25% 50%, #fff 50% 75%, #ff5722 75%); }
.wsb-thumb-bubble-narration { background: linear-gradient(180deg, #fff7e0 0%, #fff 100%); }
.wsb-thumb-bubble-peanut    { background: radial-gradient(circle at 30% 50%, #fff 25%, transparent 25%) center/cover no-repeat, radial-gradient(circle at 70% 50%, #fff 25%, transparent 25%) center/cover no-repeat, #6bf7ff; }

.wsb-thumb-sfx-pow     { background: conic-gradient(#ffeb3b 0 10%, #d32f2f 10% 20%, #ffeb3b 20% 30%, #d32f2f 30% 40%, #ffeb3b 40% 50%, #d32f2f 50% 60%, #ffeb3b 60% 70%, #d32f2f 70% 80%, #ffeb3b 80% 90%, #d32f2f 90% 100%); }
.wsb-thumb-sfx-bam     { background: radial-gradient(circle, #ff5722 50%, #ffeb3b 70%, transparent 70%) center/cover no-repeat, #1d1234; }
.wsb-thumb-sfx-boom    { background: radial-gradient(circle, #ff9800 40%, #ffeb3b 70%, transparent 70%) center/cover no-repeat, #5e2a4a; }
.wsb-thumb-sfx-crash   { background: linear-gradient(135deg, #e91e63 50%, #ffeb3b 50%); }
.wsb-thumb-sfx-zoom    { background: linear-gradient(90deg, transparent 20%, #6bf7ff 50%, transparent 80%); }
.wsb-thumb-sfx-whoosh  { background: linear-gradient(90deg, transparent 10%, #90caf9 50%, transparent 90%); }
.wsb-thumb-sfx-zap     { background: linear-gradient(45deg, #ffeb3b 50%, #fff 50%); }
.wsb-thumb-sfx-slam    { background: radial-gradient(circle, #9c27b0 50%, #ffeb3b 70%, transparent 70%) center/cover no-repeat, #1d1234; }
.wsb-thumb-sfx-ping    { background: radial-gradient(circle, #e1f5fe 70%, transparent 70%) center/cover no-repeat, #0277bd; }
.wsb-thumb-sfx-gasp    { background: linear-gradient(180deg, #fff 50%, #C36C94 100%); }
.wsb-thumb-sfx-custom  { background: linear-gradient(45deg, #6bf7ff, #C36C94); }