/* Antes / Depois: the generated video under a soft translucent seam that reveals the original segment. */
.ba { --ba-max-h: 68dvh; --ba-feather: 6%; width: min(100%, calc(var(--ba-max-h) * var(--ba-ratio))); margin-inline: auto; }
.ba-stage { position: relative; width: 100%; aspect-ratio: var(--ba-ratio); overflow: hidden; border-radius: 14px; background: #000; box-shadow: 0 18px 50px #0000008c, inset 0 0 0 1px #ffffff14; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate; }
.ba .ba-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* The original fades into the result across the seam instead of a hard cut, so both can be read at the boundary. */
.ba-before { z-index: 1; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--ba-pos) - var(--ba-feather)), #0000 calc(var(--ba-pos) + var(--ba-feather)));
  mask-image: linear-gradient(90deg, #000 calc(var(--ba-pos) - var(--ba-feather)), #0000 calc(var(--ba-pos) + var(--ba-feather))); }
.ba-seam { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--ba-pos); width: 2px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(180deg, #fff0, #ffffffe6 18%, #fff 50%, #ffffffe6 82%, #fff0); box-shadow: 0 0 14px #b5a0ffb3, 0 0 2px #fff; }
.ba-seam::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 120px; translate: -50% 0;
  background: radial-gradient(60px 70% at 50% 50%, #c7b7ff2e, #c7b7ff00 70%); mix-blend-mode: screen; }
.ba-tag { position: absolute; z-index: 3; top: 12px; padding: 4px 11px; border-radius: 999px; background: #0d0b10a6; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px #ffffff1f; pointer-events: none; transition: opacity 200ms var(--ease, ease); }
.ba-tag-before { left: 12px; opacity: var(--ba-before-alpha, 1); }
.ba-tag-after { right: 12px; opacity: var(--ba-after-alpha, 1); }
.ba-handle { position: absolute; z-index: 4; top: 50%; left: var(--ba-pos); translate: -50% -50%; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 2px solid var(--purple); border-radius: 50%;
  background: #17131bd9; color: #fff; font-size: 20px; cursor: ew-resize; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px #00000080, 0 0 0 6px #b5a0ff1f; transition: scale 220ms var(--ease, ease), box-shadow 220ms var(--ease, ease); }
.ba-handle:hover, .ba.is-dragging .ba-handle { scale: 1.08; box-shadow: 0 6px 24px #00000099, 0 0 0 9px #b5a0ff2e; }
.ba-handle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ba-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ba-button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #3a363f; border-radius: 9px; background: #1a171ecc; color: var(--text); font-size: 16px; cursor: pointer; transition: border-color 160ms, background 160ms; }
.ba-button:hover { border-color: #625471; background: #231f29; }
.ba-sound { border-color: transparent; background: none; }
.ba-time { flex: none; min-width: 74px; text-align: right; font-size: 11px; color: #c4b2d2; font-variant-numeric: tabular-nums; }
.ba-seek { --ba-progress: 0%; flex: 1; min-width: 60px; height: 18px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ba-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--purple) var(--ba-progress), #3a363f var(--ba-progress)); }
.ba-seek::-moz-range-track { height: 4px; border-radius: 4px; background: #3a363f; }
.ba-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--purple); }
.ba-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #9c6bff; box-shadow: 0 0 0 4px #9c6bff40; }
.ba-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #9c6bff; box-shadow: 0 0 0 4px #9c6bff40; }
.ba.is-buffering .ba-before { filter: saturate(.85) brightness(.92); }
.job-art .ba { --ba-max-h: 68dvh; }
dialog .ba { --ba-max-h: calc(100dvh - 300px); }
.asset-dialog .ba-hint { margin: 10px 0 0; text-align: center; font-size: 11px; color: #8d7d9b; }
@media (max-width: 700px) {
  .job-art .ba { --ba-max-h: 58dvh; }
  .ba-handle { width: 40px; height: 40px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-handle, .ba-tag { transition: none; }
}
.ba-stage .hd-pending, .ba-stage .hd-ready { z-index: 3; left: 12px; bottom: 12px; pointer-events: none; }