/* ============================================================
   VOICE BLENDER showcase (assets/demo/blender/blender.js).
   Two voices from the Library flow into the blender, their faces swirl
   together, and a new voice is born. Transforms, opacity and filters
   only; under reduced motion it shows the finished state.
   ============================================================ */
.vb {
  --vb-a: #6F5BD3;
  --vb-b: #C13AEF;
  --vb-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 22px 18px;
  border-radius: 24px;
  background: var(--tool-surface);
  border: 1px solid var(--tool-border);
  box-shadow: var(--tool-shadow);
  font-family: var(--font-body);
  color: var(--text);
}

/* the stage */
.vb-stage {
  position: relative;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 50% 55%, rgba(193, 58, 239, .16), transparent 70%),
    radial-gradient(40% 50% at 15% 40%, rgba(111, 91, 211, .14), transparent 70%),
    radial-gradient(40% 50% at 85% 40%, rgba(164, 44, 200, .12), transparent 70%),
    var(--tool-inset);
  border: 1px solid var(--tool-border);
}
html[data-theme="dark"] .vb-stage { background:
    radial-gradient(60% 70% at 50% 55%, rgba(193, 58, 239, .22), transparent 70%),
    radial-gradient(40% 50% at 15% 40%, rgba(111, 91, 211, .2), transparent 70%),
    #120C1F; }

/* sound ribbons from each voice into the core */
.vb-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vb-ribbons path {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  opacity: 0;
  transition: opacity .4s var(--vb-ease);
}
.vb-ribbons .vb-ra { stroke: var(--vb-a); }
.vb-ribbons .vb-rb { stroke: var(--vb-b); }
.vb.is-flow .vb-ribbons path { opacity: .8; animation: vbFlow 1.1s linear infinite; }
.vb.is-merge .vb-ribbons path, .vb.is-born .vb-ribbons path { opacity: 0; }
@keyframes vbFlow { to { stroke-dashoffset: -32; } }

/* the voices: two portraits, then the new one */
.vb-face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -96px 0 0 -75px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 18px 40px -16px rgba(74, 54, 144, .6);
  transition: transform .9s var(--vb-ease), opacity .7s var(--vb-ease), filter .7s var(--vb-ease);
}
html[data-theme="dark"] .vb-face { box-shadow: 0 0 0 4px #2E2647, 0 18px 40px -16px rgba(0, 0, 0, .7); }
.vb-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vb-face-a { transform: translateX(-280%) scale(.86); }
.vb-face-b { transform: translateX(280%) scale(.86); }
.vb-face-a img { object-position: 40% 20%; }
.vb-face-b img { object-position: 50% 25%; }
.vb.is-pick .vb-face-a, .vb.is-flow .vb-face-a { transform: translateX(-210%) scale(1); }
.vb.is-pick .vb-face-b, .vb.is-flow .vb-face-b { transform: translateX(210%) scale(1); }
/* the merge: both glide into the core, turn, blur and dissolve */
.vb.is-merge .vb-face-a { transform: translateX(-18%) rotate(-24deg) scale(.82); filter: blur(3px) saturate(1.4); opacity: .55; }
.vb.is-merge .vb-face-b { transform: translateX(18%) rotate(24deg) scale(.82); filter: blur(3px) saturate(1.4); opacity: .55; }
.vb.is-born .vb-face-a, .vb.is-born .vb-face-b { transform: scale(.4) rotate(0); opacity: 0; filter: blur(8px); }
.vb-face-new { transform: scale(.4); opacity: 0; z-index: 2; }
.vb-face-new img { object-position: 62% 30%; }
.vb.is-born .vb-face-new { transform: scale(1.12); opacity: 1; transition-delay: .15s; }

/* labels and A / B tags under each voice */
.vb-tag {
  position: absolute;
  top: calc(50% + 66px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 170px;
  margin-left: -85px;
  text-align: center;
  transition: transform .9s var(--vb-ease), opacity .4s var(--vb-ease);
}
.vb-tag b { font-size: 15px; font-weight: 700; }
.vb-tag span { font-size: 12px; color: var(--text-dim); }
.vb-tag i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--vb-a);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s var(--vb-ease), transform .3s var(--vb-ease);
}
.vb-tag-b i { background: #8E2BE0; }
.vb-tag-a { transform: translateX(-210%); }
.vb-tag-b { transform: translateX(210%); }
.vb.is-pick .vb-tag i, .vb.is-flow .vb-tag i { opacity: 1; transform: none; }
.vb.is-merge .vb-tag-a, .vb.is-merge .vb-tag-b, .vb.is-born .vb-tag-a, .vb.is-born .vb-tag-b { opacity: 0; }
.vb-tag-new { top: calc(50% + 80px); width: 260px; margin-left: -130px; opacity: 0; transform: translateY(8px); }
.vb.is-born .vb-tag-new { opacity: 1; transform: none; transition-delay: .5s; }
.vb-tag-new b { font-size: 17px; background: linear-gradient(90deg, var(--vb-a), var(--vb-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] .vb-tag-new b { background-image: linear-gradient(90deg, #A78BFA, #E879F9); }
.vb-added {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0 10px;
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #135F3A;
  background: #DDF5E7;
}
html[data-theme="dark"] .vb-added { color: #B7F0CF; background: rgba(47, 191, 113, .18); }
.vb-added svg { width: 12px; height: 12px; }

/* the burst when the new voice appears */
.vb-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 170px;
  margin: -106px 0 0 -85px;
  border-radius: 50%;
  border: 2px solid rgba(193, 58, 239, .55);
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}
.vb.is-born .vb-ring { animation: vbRing 1.1s var(--vb-ease) .1s both; }
.vb.is-born .vb-ring-2 { animation-delay: .3s; }
@keyframes vbRing { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.2); } }
.vb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin: -56px 0 0 -35px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(193, 58, 239, .55) 45%, transparent 70%);
  opacity: .35;
  transform: scale(.8);
  transition: opacity .6s var(--vb-ease), transform .6s var(--vb-ease);
}
.vb.is-flow .vb-core { opacity: .8; transform: scale(1.1); animation: vbPulse 1s ease-in-out infinite alternate; }
.vb.is-merge .vb-core { opacity: 1; transform: scale(2.6); }
.vb.is-born .vb-core { opacity: 0; transform: scale(3.2); }
@keyframes vbPulse { to { transform: scale(1.35); } }

/* the mix slider, like the app's */
.vb-mix {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: min(360px, 80%);
  transform: translateX(-50%);
  transition: opacity .4s var(--vb-ease);
}
.vb-mix-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.vb-mix-row b { color: var(--text); }
.vb-mix-track { position: relative; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--vb-a), #8E2BE0, var(--vb-b)); }
.vb-mix-thumb { position: absolute; inset: 0; transform: translateX(var(--vb-mix, 20%)); transition: transform 1.2s var(--vb-ease); }
.vb-mix-thumb i { position: absolute; left: -8px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #8E2BE0, 0 3px 8px rgba(74, 54, 144, .4); }
.vb.is-born .vb-mix { opacity: 0; }

/* the Library strip the voices come from */
.vb-lib {
  position: absolute;
  left: 16px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-fine);
}
.vb-lib svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vb-replay {
  position: absolute;
  right: 14px;
  top: 10px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--tool-border);
  background: var(--tool-surface);
  color: var(--text);
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s var(--vb-ease);
}
.vb.is-done .vb-replay { opacity: 1; }
.vb-replay:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* listen row: the same line in Nova, Iris and the blend */
.vb-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.vb-listen-label { font-size: 14px; color: var(--text-dim); margin-right: 4px; }
.vb-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--tool-border);
  background: var(--tool-inset);
  color: var(--text);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  transition: transform .16s var(--vb-ease), border-color .2s var(--vb-ease);
  -webkit-tap-highlight-color: transparent;
}
.vb-play:hover { border-color: var(--accent); }
.vb-play:active { transform: scale(.96); }
.vb-play:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.vb-play img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.vb-play svg { width: 12px; height: 12px; fill: currentColor; }
.vb-play .vb-i-pause { display: none; }
.vb-play.is-playing .vb-i-play { display: none; }
.vb-play.is-playing .vb-i-pause { display: block; }
.vb-play-blend { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6F5BD3 0%, #7A4DE0 45%, #8E2BE0 75%, #A42CC8 100%); box-shadow: 0 10px 22px -12px rgba(111, 91, 211, .9); }
.vb-play-blend:hover { border-color: transparent; }
.vb-fine { margin: 12px 2px 0; font-size: 12px; line-height: 1.5; color: var(--text-fine); }

@media (max-width: 640px) {
  .vb { padding: 14px; border-radius: 20px; }
  .vb-stage { height: 330px; }
  .vb-face { width: 104px; height: 104px; margin: -70px 0 0 -52px; }
  .vb.is-pick .vb-face-a, .vb.is-flow .vb-face-a { transform: translateX(-98%) scale(1); }
  .vb.is-pick .vb-face-b, .vb.is-flow .vb-face-b { transform: translateX(98%) scale(1); }
  .vb-face-a { transform: translateX(-170%) scale(.86); }
  .vb-face-b { transform: translateX(170%) scale(.86); }
  .vb-tag { top: calc(50% + 42px); width: 130px; margin-left: -65px; }
  .vb-tag-a { transform: translateX(-78%); }
  .vb-tag-b { transform: translateX(78%); }
  .vb-listen-label { flex-basis: 100%; }
  .vb-tag b { font-size: 14px; }
  .vb-tag-new { top: calc(50% + 56px); width: 240px; margin-left: -120px; }
  .vb-ring { width: 120px; height: 120px; margin: -80px 0 0 -60px; }
  .vb-core { margin-top: -50px; }
  .vb-play { height: 42px; font-size: 13.5px; }
  .vb-play img { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .vb *, .vb *::before, .vb *::after { transition: none !important; animation: none !important; }
}