/* zeb built-in decorator */

/* [{"b2t":5,"b2b":["zbd-foggy-frame"]}] */
.zbd-inner-circle-glow {
  mask-image: radial-gradient(circle, #0094ffff 30%, #0094ff50 50%);
  filter: contrast(120%) brightness(90%) hue-rotate(-20deg) saturate(150%);
}

.zbd-blur-image {
  filter: blur(3px) brightness(1.2) contrast(0.8);
}

.zbd-drop-shadow-black {
  filter: drop-shadow(12px 12px 30px rgba(0, 0, 0, 0.9));
}

.zbd-drop-shadow-white {
  filter: drop-shadow(12px 12px 30px rgba(255, 255, 255, 0.9))
}

.zbd-drop-shadow-gold {
  filter: drop-shadow(5px 5px 5px rgba(255, 255, 0, 0.9));
}

.zbd-thought-cloud {
  /* ───────────── Main cloud ───────────── */
  --main-bg: rgba(248, 252, 255, 0.72);
  /* semi-transparent white-blue */
  --accent: rgba(220, 235, 255, 0.55);
  /* very light blue tint */
  --shadow-soft: 0 1.2em 3.5em rgba(90, 130, 240, 0.28);
  --text-color: #2a3855;

  position: relative;
  isolation: isolate;
  /* helps with stacking pseudo-elements */
  width: 100%;
  max-width: 36em;
  min-width: 16em;
  padding: 1.8em 2.2em;
  background: var(--main-bg);
  border-radius: 60% 40% 55% 45% / 68% 62% 38% 32%;
  /* more irregular base */
  box-shadow: var(--shadow-soft),
    inset 0 0.4em 1.8em rgba(255, 255, 255, 0.9),
    inset 0 -0.3em 1em rgba(180, 210, 255, 0.35);
  color: var(--text-color);
  font-family: system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  backdrop-filter: blur(1px);
  /* dreamy softening */
  -webkit-backdrop-filter: blur(1px);
  overflow: hidden;
}

/* ───── Multiple small curvy lobes using radial gradients ───── */
.zbd-thought-cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 12% 78%, var(--accent) 14%, transparent 16%),
    radial-gradient(ellipse at 28% 88%, var(--accent) 11%, transparent 13%),
    radial-gradient(ellipse at 44% 18%, var(--accent) 13%, transparent 15%),
    radial-gradient(ellipse at 72% 82%, var(--accent) 10%, transparent 12%),
    radial-gradient(ellipse at 81% 32%, var(--accent) 12%, transparent 15%);
  opacity: 0.7;
  mix-blend-mode: soft-light;
  /* makes lobes feel integrated */
  pointer-events: none;
  z-index: -1;
}

/* Extra subtle noise/grain for fluffy cloud texture (optional but nice) */
.zbd-thought-cloud::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 44%, rgba(255, 255, 255, 0.4) 2%, transparent 4%),
    radial-gradient(circle at 67% 31%, rgba(255, 255, 255, 0.35) 1.5%, transparent 3.5%),
    radial-gradient(circle at 41% 69%, rgba(220, 240, 255, 0.45) 2.2%, transparent 5%);
  border-radius: inherit;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}

/* ───── Small floating cloud bumps (more of them, smaller) ───── */
.zbd-thought-cloud>span,
.zbd-thought-cloud::before[data-extra],
.zbd-thought-cloud::after[data-extra] {
  content: "";
  position: absolute;
  background: rgba(248, 252, 255, 0.88);
  border-radius: 50%;
  box-shadow:
    inset 0 0.25em 0.8em rgba(255, 255, 255, 0.9),
    0 0.3em 1.2em rgba(100, 140, 255, 0.16);
}

/* Medium bottom-left cloud */
.zbd-thought-cloud>span {
  width: 3.4em;
  aspect-ratio: 1;
  bottom: -1.4em;
  left: 22%;
  transform: translateX(-50%);
  border-radius: 48% 52% 50% 50% / 55% 60% 40% 45%;
  /* slightly irregular */
}

/* Small right cloud */
.zbd-thought-cloud::before {
  width: 2.2em;
  aspect-ratio: 1;
  bottom: -0.9em;
  right: 18%;
  transform: translateX(40%);
}

/* Tiny trailing bubble */
.zbd-thought-cloud::after {
  width: 1.3em;
  aspect-ratio: 1;
  bottom: -0.5em;
  left: 52%;
  opacity: 0.8;
}

/* ───── Optional: even more curvy variant class ───── */
.zbd-thought-cloud.more-puffy {
  border-radius: 65% 35% 58% 42% / 72% 55% 45% 28%;
  --main-bg: rgba(250, 253, 255, 0.65);
}


.zbd-aura {
  filter:
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.6));
}

/* [{"b2t":4,"b2b":["zbd-foggy-frame"]}] */
.zbd-foggy-frame {
  position: absolute;
  width: 100%;
  overflow: hidden;
}

.zbd-foggy-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zbd-foggy-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle,
      transparent 70%,
      rgba(255, 255, 255, 0.8) 85%,
      white 95%);
}

/* =========================================================
   1. Traveling Spark
   ========================================================= */

.zbd-traveling-spark {
  position: relative;
  overflow: hidden;
}

.zbd-traveling-spark::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-radius: inherit;

  background:
    linear-gradient(90deg, transparent, var(--colr-ztn), transparent) 0 0 / 25% 2px no-repeat,
    linear-gradient(180deg, transparent, var(--colr-ztn), transparent) 100% 0 / 2px 25% no-repeat,
    linear-gradient(270deg, transparent, var(--colr-ztn), transparent) 100% 100% / 25% 2px no-repeat,
    linear-gradient(0deg, transparent, var(--colr-ztn), transparent) 0 100% / 2px 25% no-repeat;

  animation: zkf-traveling-spark 3s linear infinite;
  pointer-events: none;
}

@keyframes zkf-traveling-spark {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  78% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


/* =========================================================
   2. Breathing Glow
   ========================================================= */

.zbd-breathing-glow {
  position: relative;
  border: 2px solid var(--colr-ztn);
  animation: zkf-breathing-glow 3s ease-in-out infinite;
}

@keyframes zkf-breathing-glow {

  0%,
  100% {
    box-shadow:
      0 0 2px var(--colr-ztn),
      0 0 4px transparent;
    opacity: 0.65;
  }

  50% {
    box-shadow:
      0 0 5px var(--colr-ztn),
      0 0 18px var(--colr-ztn);
    opacity: 1;
  }
}


/* =========================================================
   3. Flowing Light
   ========================================================= */

.zbd-flowing-light {
  position: relative;
  overflow: hidden;
}

.zbd-flowing-light::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;

  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 35%,
      var(--colr-ztn) 50%,
      transparent 65%,
      transparent 100%) top / 100% 2px no-repeat,

    linear-gradient(180deg,
      transparent 0%,
      transparent 35%,
      var(--colr-ztn) 50%,
      transparent 65%,
      transparent 100%) right / 2px 100% no-repeat,

    linear-gradient(270deg,
      transparent 0%,
      transparent 35%,
      var(--colr-ztn) 50%,
      transparent 65%,
      transparent 100%) bottom / 100% 2px no-repeat,

    linear-gradient(0deg,
      transparent 0%,
      transparent 35%,
      var(--colr-ztn) 50%,
      transparent 65%,
      transparent 100%) left / 2px 100% no-repeat;

  animation: zkf-flowing-light 2.5s linear infinite;
  pointer-events: none;
}

@keyframes zkf-flowing-light {
  0% {
    background-position:
      -100% 0,
      100% -100%,
      200% 100%,
      0 200%;
  }

  100% {
    background-position:
      200% 0,
      100% 200%,
      -100% 100%,
      0 -100%;
  }
}


/* =========================================================
   4. Chase
   ========================================================= */

.zbd-chase {
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
}

.zbd-chase::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--colr-ztn);
  border-radius: inherit;

  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);

  mask-composite: exclude;

  animation: zkf-chase 1.8s linear infinite;
  box-shadow:
    0 0 6px var(--colr-ztn),
    0 0 12px var(--colr-ztn);

  pointer-events: none;
}

@keyframes zkf-chase {
  0% {
    clip-path: inset(0 90% 90% 0);
  }

  25% {
    clip-path: inset(0 0 90% 0);
  }

  50% {
    clip-path: inset(0 0 0 90%);
  }

  75% {
    clip-path: inset(90% 0 0 0);
  }

  100% {
    clip-path: inset(0 90% 90% 0);
  }
}


/* =========================================================
   5. Corner Pulse
   ========================================================= */

.zbd-corner-pulse {
  position: relative;
}

.zbd-corner-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--colr-ztn);
  border-radius: inherit;

  animation: zkf-corner-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes zkf-corner-pulse {

  0%,
  100% {
    clip-path: polygon(0 0, 18% 0, 18% 3px, 3px 3px,
        3px 18%, 0 18%);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  25% {
    clip-path: polygon(82% 0, 100% 0, 100% 18%,
        calc(100% - 3px) 18%,
        calc(100% - 3px) 3px, 82% 3px);
    opacity: 1;
  }

  50% {
    clip-path: polygon(82% calc(100% - 3px),
        calc(100% - 3px) calc(100% - 3px),
        calc(100% - 3px) calc(100% - 18%),
        100% calc(100% - 18%),
        100% 100%, 82% 100%);
    opacity: 1;
  }

  75% {
    clip-path: polygon(0 82%, 3px 82%, 3px calc(100% - 3px),
        18% calc(100% - 3px),
        18% 100%, 0 100%);
    opacity: 1;
  }

  88% {
    opacity: 0;
  }
}


/* =========================================================
   6. Four-Side Sweep
   ========================================================= */

.zbd-four-side-sweep {
  position: relative;
  overflow: hidden;
}

.zbd-four-side-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--colr-ztn);
  border-radius: inherit;

  box-shadow:
    0 0 8px var(--colr-ztn),
    inset 0 0 8px var(--colr-ztn);

  animation: zkf-four-side-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes zkf-four-side-sweep {

  0%,
  10% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  20% {
    clip-path: inset(0 0 97% 0);
    opacity: 1;
  }

  35% {
    clip-path: inset(0 0 0 97%);
  }

  50% {
    clip-path: inset(97% 0 0 0);
  }

  65% {
    clip-path: inset(0 97% 0 0);
  }

  78% {
    opacity: 1;
  }

  88%,
  100% {
    opacity: 0;
  }
}


/* =========================================================
   7. Edge Shimmer
   ========================================================= */

.zbd-edge-shimmer {
  position: relative;
  border: 2px solid var(--colr-ztn);
  overflow: hidden;
}

.zbd-edge-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(110deg,
      transparent 0%,
      transparent 42%,
      var(--colr-ztn) 50%,
      transparent 58%,
      transparent 100%);

  background-size: 250% 250%;

  animation: zkf-edge-shimmer 3.5s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes zkf-edge-shimmer {

  0%,
  65% {
    background-position: 200% 200%;
    opacity: 0;
  }

  72% {
    opacity: 1;
  }

  85% {
    background-position: 0 0;
    opacity: 1;
  }

  90%,
  100% {
    background-position: -100% -100%;
    opacity: 0;
  }
}

/* =========================================================
   8. Pulse + Spark
   ========================================================= */

.zbd-pulse-spark {
  position: relative;
  border: 2px solid var(--colr-ztn);

  animation: zkf-pulse-spark-border 3.5s ease-in-out infinite;
}

.zbd-pulse-spark::after {
  content: "";
  position: absolute;
  inset: -3px;

  border: 3px solid transparent;
  border-top-color: var(--colr-ztn);
  border-radius: inherit;

  box-shadow:
    0 0 8px var(--colr-ztn),
    0 0 16px var(--colr-ztn);

  animation: zkf-pulse-spark 3.5s linear infinite;
  pointer-events: none;
}

@keyframes zkf-pulse-spark-border {

  0%,
  65%,
  100% {
    box-shadow: 0 0 2px transparent;
  }

  55% {
    box-shadow:
      0 0 6px var(--colr-ztn),
      0 0 20px var(--colr-ztn);
  }
}

@keyframes zkf-pulse-spark {

  0%,
  45% {
    transform: rotate(0deg);
    opacity: 0;
  }

  55% {
    opacity: 1;
  }

  75% {
    transform: rotate(360deg);
    opacity: 1;
  }

  85%,
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

/* =========================================================
   9. Directional Flow
   ========================================================= */

/* NEXT */
.zbd-directional-next {
  position: relative;
  border: 2px solid var(--colr-ztn);
  overflow: hidden;
}

.zbd-directional-next::after {
  content: "";
  position: absolute;
  inset: -2px;

  border: 3px solid transparent;
  border-right-color: var(--colr-ztn);
  border-top-color: var(--colr-ztn);
  border-radius: inherit;

  box-shadow:
    0 0 8px var(--colr-ztn);

  animation: zfk-directional-next 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes zfk-directional-next {

  0%,
  70%,
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }

  15% {
    opacity: 1;
  }

  65% {
    opacity: 1;
    transform: rotate(360deg);
  }
}


/* PREVIOUS */
.zbd-directional-prev {
  position: relative;
  border: 2px solid var(--colr-ztn);
  overflow: hidden;
}

.zbd-directional-prev::after {
  content: "";
  position: absolute;
  inset: -2px;

  border: 3px solid transparent;
  border-left-color: var(--colr-ztn);
  border-bottom-color: var(--colr-ztn);
  border-radius: inherit;

  box-shadow:
    0 0 8px var(--colr-ztn);

  animation: zfk-directional-prev 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes zfk-directional-prev {

  0%,
  70%,
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }

  15% {
    opacity: 1;
  }

  65% {
    opacity: 1;
    transform: rotate(-360deg);
  }
}

/* =========================================================
   10. Orbit
   ========================================================= */

.zbd-orbit {
  position: relative;
  border: 2px solid var(--colr-ztn);
}

.zbd-orbit::after {
  content: "";
  position: absolute;

  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: var(--colr-ztn);

  box-shadow:
    0 0 6px var(--colr-ztn),
    0 0 14px var(--colr-ztn);

  animation: zkf-orbit 3s linear infinite;
  pointer-events: none;
}

@keyframes zkf-orbit {
  0% {
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
  }

  25% {
    left: 100%;
    top: 0;
    transform: translate(-50%, -50%);
  }

  50% {
    left: 100%;
    top: 100%;
    transform: translate(-50%, -50%);
  }

  75% {
    left: 0;
    top: 100%;
    transform: translate(-50%, -50%);
  }

  100% {
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
  }
}

.zbd-rope-frame {
  border: var(--size-select-border) solid;
  border-image: url("resource/border-rope.svg");
  border-image-slice: 10;
}