/* ==========================================================================
   DentAI · Bento micro-visuals                     namespace: .bento-vis / bv-
   --------------------------------------------------------------------------
   Pure CSS + inline SVG. No JS, no images.
   · Host gives .bento-vis full card width; height defaults to 190px.
   · All animations are PAUSED until an ancestor (or the vis itself) has .in
   · RTL/LTR aware via logical props + --bv-s (1 = ltr, -1 = rtl)
   · prefers-reduced-motion → static, finished state
   ========================================================================== */

/* ---------------------------------------------------------------- 0. scope */
.bento-vis {
  --bv-brand:   var(--brand, #1fe3a8);
  --bv-brand-2: var(--brand-2, #19c8e0);
  --bv-brand-3: var(--brand-3, #2bffbb);
  --bv-violet:  var(--violet, #9b7bff);
  --bv-ink:     var(--ink, #eef5f3);
  --bv-muted:   var(--muted, #8593a0);
  --bv-line:    var(--border, rgba(255,255,255,.09));
  --bv-grad:    linear-gradient(105deg, #16cfe0 0%, #1fe3a8 55%, #2bffbb 100%);
  --bv-glow:    rgba(31,227,168,.55);
  --bv-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bv-sans:    "Geist", "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bv-io:      cubic-bezier(.65,0,.35,1);
  --bv-out:     cubic-bezier(.16,1,.3,1);
  --bv-s: 1;

  position: relative;
  display: block;
  width: 100%;
  height: 190px;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  color: var(--bv-ink);
  font-family: var(--bv-sans);
  font-size: 10px;
  line-height: 1;
  text-align: start;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.bento-vis:dir(rtl) { --bv-s: -1; }
.bento-vis *, .bento-vis *::before, .bento-vis *::after { box-sizing: border-box; }
.bento-vis i, .bento-vis b, .bento-vis em { font-style: normal; }
.bento-vis svg { display: block; overflow: visible; }

/* play only when revealed */
.bento-vis, .bento-vis::before, .bento-vis::after,
.bento-vis *, .bento-vis *::before, .bento-vis *::after { animation-play-state: paused !important; }
.in .bento-vis, .in .bento-vis::before, .in .bento-vis::after,
.in .bento-vis *, .in .bento-vis *::before, .in .bento-vis *::after,
.bento-vis.in, .bento-vis.in::before, .bento-vis.in::after,
.bento-vis.in *, .bento-vis.in *::before, .bento-vis.in *::after { animation-play-state: running !important; }

/* ambient: hairline dot-grid + breathing teal bloom */
.bento-vis::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(circle, rgba(255,255,255,.11) .75px, transparent 1.25px);
  background-size: 15px 15px;
  background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(62% 80% at 50% 50%, #000 15%, transparent 100%);
  mask-image: radial-gradient(62% 80% at 50% 50%, #000 15%, transparent 100%);
}
.bento-vis::after {
  content: ""; position: absolute; inset: -10%; z-index: -1;
  background:
    radial-gradient(34% 46% at 50% 52%, rgba(31,227,168,.16), transparent 70%),
    radial-gradient(52% 60% at 50% 50%, rgba(25,200,224,.05), transparent 72%);
  animation: bv-breathe 7s var(--bv-io) infinite both;
}
@keyframes bv-breathe {
  0%, 100% { opacity: .7; scale: .96; }
  50%      { opacity: 1;  scale: 1.04; }
}

/* centred composition */
.bv-stage { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }

/* glass with a gradient hairline edge */
.bv-glass {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(15,25,29,.94), rgba(8,13,16,.95)) padding-box,
    linear-gradient(145deg, rgba(43,255,187,.45), rgba(255,255,255,.09) 30%, rgba(255,255,255,.04) 62%, rgba(25,200,224,.32)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 44px -22px rgba(0,0,0,.95),
    0 0 40px -16px rgba(31,227,168,.32);
}

/* tiny HUD type */
.bv-mono {
  font-family: var(--bv-mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bv-muted);
}


/* ==========================================================================
   1 · bv-start — instant start (browser boots in 0.8s)          loop 6s
   ========================================================================== */
.bv-start .bv-stage { display: flex; align-items: center; gap: 26px; }
.bv-start .bv-shell { position: relative; width: min(298px, calc(100cqw - 48px)); height: 128px; flex: none; }
.bv-start .bv-win { position: absolute; inset: 0; border-radius: 13px; overflow: hidden; }
.bv-start .bv-win::after { /* boot flash on the frame */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(43,255,187,.55), inset 0 0 26px rgba(31,227,168,.16);
  opacity: 0;
  animation: bv-st-flash 6s ease-out infinite both;
}

/* title bar */
.bv-start .bv-bar {
  position: relative; display: flex; align-items: center; gap: 9px;
  height: 27px; padding-inline: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.bv-start .bv-dots { display: flex; gap: 4px; flex: none; }
.bv-start .bv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.14); }
.bv-start .bv-dots i:first-child { background: rgba(43,255,187,.55); box-shadow: 0 0 6px rgba(43,255,187,.6); }
.bv-start .bv-url {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  height: 17px; padding-inline: 7px; border-radius: 6px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  font-family: var(--bv-mono); font-size: 9px; font-weight: 500; letter-spacing: 0;
  color: var(--bv-ink); white-space: nowrap; overflow: hidden;
}
.bv-start .bv-url::after { /* focus ring while typing */
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(43,255,187,.5), 0 0 12px -2px rgba(31,227,168,.5);
  opacity: 0;
  animation: bv-st-focus 6s ease-out infinite both;
}
.bv-start .bv-lock { width: 8px; height: 8px; flex: none; color: var(--bv-brand); }
.bv-start .bv-url-text { display: inline-block; animation: bv-st-type 6s linear infinite both; }
.bv-start .bv-url-text em { color: var(--bv-muted); }
.bv-start .bv-caret {
  display: inline-block; flex: none; width: 1.5px; height: 10px; margin-inline-start: -4px;
  border-radius: 1px; background: var(--bv-brand-3); box-shadow: 0 0 6px var(--bv-brand);
  opacity: 0;
  animation: bv-st-caret 6s linear infinite both;
}
.bv-start .bv-reload { width: 10px; height: 10px; flex: none; color: rgba(255,255,255,.35); animation: bv-st-spin 6s var(--bv-io) infinite both; }

/* load beam (follows inline direction) */
.bv-start .bv-beam { position: absolute; inset-inline: 0; top: 21px; height: 12px; overflow: hidden; pointer-events: none; }
.bv-start .bv-beam::before {
  content: ""; position: absolute; inset-inline: 0; top: 5px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(25,200,224,.35) 45%, #1fe3a8 88%, #eafff7 100%);
  filter: drop-shadow(0 0 3px #1fe3a8) drop-shadow(0 0 6px rgba(43,255,187,.7));
  scale: var(--bv-s) 1;
  opacity: 0;
  animation: bv-st-beam 6s cubic-bezier(.55,0,.15,1) infinite both;
}

/* app body */
.bv-start .bv-body { position: absolute; inset: 27px 0 0; display: flex; gap: 10px; padding: 10px; }
.bv-start .bv-side {
  display: flex; flex-direction: column; gap: 7px; flex: none;
  width: 42px; padding-inline-end: 10px;
  border-inline-end: 1px solid rgba(255,255,255,.05);
}
.bv-start .bv-side > * { animation: bv-st-rise 6s var(--bv-out) infinite both; animation-delay: calc(var(--k, 0) * 70ms); }
.bv-start .bv-side b { width: 12px; height: 12px; border-radius: 4px; background: var(--bv-grad); box-shadow: 0 0 10px rgba(31,227,168,.5); margin-bottom: 2px; }
.bv-start .bv-side i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); }
.bv-start .bv-side i:nth-of-type(1) { --k: 1; background: rgba(43,255,187,.5); box-shadow: 0 0 6px rgba(31,227,168,.4); }
.bv-start .bv-side i:nth-of-type(2) { --k: 2; width: 80%; }
.bv-start .bv-side i:nth-of-type(3) { --k: 3; width: 92%; }
.bv-start .bv-side i:nth-of-type(4) { --k: 4; width: 66%; }

.bv-start .bv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bv-start .bv-main > * { animation: bv-st-rise 6s var(--bv-out) infinite both; animation-delay: calc(var(--k, 0) * 90ms); }
.bv-start .bv-head { display: flex; align-items: center; gap: 6px; height: 12px; margin-bottom: 2px; }
.bv-start .bv-head i { width: 40%; height: 6px; border-radius: 3px; background: rgba(238,245,243,.26); }
.bv-start .bv-head b {
  margin-inline-start: auto; width: 30px; height: 12px; border-radius: 6px;
  background: rgba(31,227,168,.12); border: 1px solid rgba(31,227,168,.32);
}
.bv-start .bv-row {
  display: flex; align-items: center; gap: 6px; height: 15px; padding-inline: 6px;
  border-radius: 5px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.045);
}
.bv-start .bv-row:nth-child(2) { --k: 1; }
.bv-start .bv-row:nth-child(3) { --k: 2; }
.bv-start .bv-row:nth-child(4) { --k: 3; }
.bv-start .bv-row > span { width: 7px; height: 7px; border-radius: 50%; flex: none; background: rgba(43,255,187,.6); box-shadow: 0 0 6px rgba(31,227,168,.5); }
.bv-start .bv-row:nth-child(3) > span { background: rgba(25,200,224,.6); box-shadow: 0 0 6px rgba(25,200,224,.5); }
.bv-start .bv-row:nth-child(4) > span { background: rgba(155,123,255,.6); box-shadow: 0 0 6px rgba(155,123,255,.45); }
.bv-start .bv-row i {
  height: 4px; border-radius: 2px; background: rgba(255,255,255,.15);
  transform-origin: 0 50%;
  animation: bv-st-grow 6s var(--bv-out) infinite both;
  animation-delay: calc(var(--k, 0) * 90ms + 60ms);
}
.bv-start:dir(rtl) .bv-row i { transform-origin: 100% 50%; }
.bv-start .bv-row i:first-of-type { width: 44%; }
.bv-start .bv-row:nth-child(3) i:first-of-type { width: 34%; }
.bv-start .bv-row:nth-child(4) i:first-of-type { width: 52%; }
.bv-start .bv-row i:last-of-type { margin-inline-start: auto; width: 16%; background: rgba(31,227,168,.32); }

/* brand-mark splash: idles faintly, ignites when the beam lands, gives way to the UI */
.bv-start .bv-splash { position: absolute; inset: 27px 0 0; display: grid; place-items: center; pointer-events: none; }
.bv-start .bv-splash svg {
  width: 24px; height: 24px; color: var(--bv-brand-3);
  filter: drop-shadow(0 0 6px rgba(31,227,168,.85)) drop-shadow(0 0 16px rgba(31,227,168,.45));
  opacity: 0;
  animation: bv-st-splash 6s var(--bv-out) infinite both;
}
.bv-start .bv-splash::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(43,255,187,.7), 0 0 16px rgba(31,227,168,.5);
  opacity: 0;
  animation: bv-st-ring 6s var(--bv-out) infinite both;
}

/* shimmer sheen across the freshly booted UI */
.bv-start .bv-shimmer { position: absolute; inset: 27px 0 0; overflow: hidden; pointer-events: none; }
.bv-start .bv-shimmer::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; inset-inline-start: 0; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(43,255,187,.07) 40%, rgba(234,255,247,.13) 50%, rgba(43,255,187,.07) 60%, transparent 100%);
  mix-blend-mode: screen;
  translate: calc(var(--bv-s) * 230%) 0;
  animation: bv-st-shim 6s cubic-bezier(.4,0,.2,1) infinite both;
}

/* READY toast */
.bv-start .bv-ready {
  position: absolute; inset-inline-end: -16px; inset-block-end: -13px; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  height: 26px; padding-inline: 5px 11px; border-radius: 13px;
  font-family: var(--bv-mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; color: rgba(238,245,243,.7);
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(14,30,28,.96), rgba(7,16,15,.96)) padding-box,
              linear-gradient(120deg, rgba(43,255,187,.8), rgba(25,200,224,.25) 60%, rgba(43,255,187,.5)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.9), 0 0 26px -6px rgba(31,227,168,.6);
  transform-origin: 70% 50%;
  animation: bv-st-pop 6s cubic-bezier(.34,1.56,.64,1) infinite both;
}
.bv-start .bv-ready::after { /* burst ring */
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(43,255,187,.8), 0 0 18px rgba(31,227,168,.6);
  opacity: 0;
  animation: bv-st-burst 6s var(--bv-out) infinite both;
}
.bv-start .bv-ready b { color: var(--bv-ink); font-weight: 600; }
.bv-start .bv-ready em { color: var(--bv-brand); }
.bv-start .bv-chk {
  display: grid; place-items: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bv-grad);
  box-shadow: 0 0 0 3px rgba(31,227,168,.14), 0 0 12px rgba(31,227,168,.75);
}
.bv-start .bv-chk svg { width: 10px; height: 10px; }
.bv-start .bv-chk path { stroke-dasharray: 20; stroke-dashoffset: 0; animation: bv-st-draw 6s var(--bv-out) infinite both; }

/* boot log — wide cards only */
.bv-start .bv-log { display: none; flex-direction: column; gap: 9px; flex: none; animation: bv-st-logwrap 6s linear infinite both; }
.bv-start .bv-log > span {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--bv-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--bv-muted);
  animation: bv-st-log 6s var(--bv-out) infinite both;
}
.bv-start .bv-log > span:nth-child(2) { animation-delay: .24s; }
.bv-start .bv-log > span:nth-child(3) { animation-delay: .48s; }
.bv-start .bv-log > span:nth-child(4) { animation-delay: .72s; }
.bv-start .bv-log i {
  width: 11px; height: 11px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(43,255,187,.5); background: rgba(31,227,168,.1);
}
.bv-start .bv-log i::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--bv-brand-3); box-shadow: 0 0 6px var(--bv-brand); }
.bv-start .bv-log em { color: var(--bv-ink); margin-inline-start: auto; padding-inline-start: 10px; }
@container (min-width: 520px) {
  .bv-start .bv-log { display: flex; }
}

@keyframes bv-st-type {
  0%, 4%  { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(16, end); }
  22%     { clip-path: inset(0 0 0 0); opacity: 1; }
  93%     { clip-path: inset(0 0 0 0); opacity: 1; }
  98%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes bv-st-caret {
  0%, 4%  { translate: -16ch 0; opacity: 1; animation-timing-function: steps(16, end); }
  22%     { translate: 0 0; opacity: 1; }
  26%, 100% { translate: 0 0; opacity: 0; }
}
@keyframes bv-st-focus {
  0%, 1%  { opacity: 0; }
  5%, 22% { opacity: 1; }
  28%, 100% { opacity: 0; }
}
@keyframes bv-st-spin {
  0%, 24% { rotate: 0deg; color: rgba(255,255,255,.35); }
  40%     { rotate: 360deg; color: #2bffbb; }
  52%, 100% { rotate: 360deg; color: rgba(255,255,255,.35); }
}
@keyframes bv-st-beam {
  0%, 24% { translate: calc(var(--bv-s) * -101%) 0; opacity: 1; }
  38%     { translate: 0 0; opacity: 1; }
  45%, 100% { translate: 0 0; opacity: 0; }
}
@keyframes bv-st-flash {
  0%, 37% { opacity: 0; }
  41%     { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes bv-st-splash {
  0%        { opacity: 0;   scale: .9; }
  5%, 35%   { opacity: .22; scale: 1; }
  39.5%     { opacity: 1;   scale: 1.14; }
  47%, 100% { opacity: 0;   scale: .82; }
}
@keyframes bv-st-ring {
  0%, 38%   { opacity: 0; scale: .5; }
  39.5%     { opacity: .9; scale: .6; }
  52%, 100% { opacity: 0; scale: 2.2; }
}
@keyframes bv-st-rise {
  0%, 39% { opacity: 0; translate: 0 5px; }
  48%, 93% { opacity: 1; translate: 0 0; }
  98%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes bv-st-grow {
  0%, 40% { scale: 0 1; }
  51%, 100% { scale: 1 1; }
}
@keyframes bv-st-shim {
  0%, 46% { translate: calc(var(--bv-s) * -100%) 0; }
  67%, 100% { translate: calc(var(--bv-s) * 230%) 0; }
}
@keyframes bv-st-pop {
  0%, 52% { opacity: 0; scale: .55; translate: 0 6px; }
  60%, 92% { opacity: 1; scale: 1; translate: 0 0; }
  97%, 100% { opacity: 0; scale: .9; translate: 0 0; }
}
@keyframes bv-st-burst {
  0%, 54% { opacity: 0; scale: 1; }
  56%     { opacity: 1; scale: 1; }
  72%, 100% { opacity: 0; scale: 1.35 1.7; }
}
@keyframes bv-st-draw {
  0%, 55% { stroke-dashoffset: 20; }
  63%, 100% { stroke-dashoffset: 0; }
}
@keyframes bv-st-log {
  0%, 24% { opacity: 0; translate: 0 4px; }
  30%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes bv-st-logwrap {
  0%, 14%   { opacity: 0; }
  18%, 92%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}


/* ==========================================================================
   2 · bv-branches — HQ hub syncing branches                     loop 4.8s
   ========================================================================== */
.bv-branches .bv-net {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(330px, calc(100% - 14px)); height: auto;
  direction: ltr;
}
.bv-branches text {
  font-family: var(--bv-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .06em;
  fill: rgba(238,245,243,.86);
}
.bv-branches .bv-hq { font-size: 7.5px; letter-spacing: .3em; fill: rgba(133,147,160,.9); }

/* orbit guide + travelling particles */
.bv-branches .bv-orbit { stroke: rgba(255,255,255,.1); stroke-width: 1; stroke-dasharray: 1 5; animation: bv-br-march 18s linear infinite; }
.bv-branches .bv-particle { stroke: #2bffbb; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .01 99.99; filter: drop-shadow(0 0 3px #1fe3a8) drop-shadow(0 0 7px rgba(31,227,168,.6)); animation: bv-br-orbit 16s linear infinite; }
.bv-branches .bv-particle.p2 { stroke: #19c8e0; animation-duration: 22s; animation-delay: -9s; }

/* wires */
.bv-branches .bv-wire { stroke: url(#bv-wire-g); stroke-width: 1.1; }
.bv-branches .bv-wire.r { stroke: url(#bv-wire-g2); }
.bv-branches .bv-wire-glow { stroke: rgba(31,227,168,.08); stroke-width: 5; }

/* pulses (dash travelling along a path normalised to 100) */
.bv-branches .bv-pt, .bv-branches .bv-ph, .bv-branches .bv-rt, .bv-branches .bv-rh { stroke-linecap: round; opacity: 0; }
.bv-branches .bv-pt { stroke: rgba(31,227,168,.55); stroke-width: 1.6; stroke-dasharray: 18 300; animation: bv-br-out-t 4.8s cubic-bezier(.45,.05,.3,1) infinite both; }
.bv-branches .bv-ph { stroke: #eafff7; stroke-width: 2.6; stroke-dasharray: 2.5 300; filter: drop-shadow(0 0 3px #2bffbb) drop-shadow(0 0 6px #1fe3a8); animation: bv-br-out-h 4.8s cubic-bezier(.45,.05,.3,1) infinite both; }
.bv-branches .bv-rt { stroke: rgba(25,200,224,.5); stroke-width: 1.4; stroke-dasharray: 14 300; animation: bv-br-back 4.8s cubic-bezier(.45,.05,.3,1) infinite both; }
.bv-branches .bv-rh { stroke: #c9f6ff; stroke-width: 2.2; stroke-dasharray: 2 300; filter: drop-shadow(0 0 3px #19c8e0); animation: bv-br-back 4.8s cubic-bezier(.45,.05,.3,1) infinite both; }


/* hub */
.bv-branches .bv-halo { transform-box: fill-box; transform-origin: center; animation: bv-br-halo 4.8s var(--bv-io) infinite both; }
.bv-branches .bv-ring1 { fill: none; stroke: rgba(43,255,187,.4); stroke-width: 1; stroke-dasharray: 2 4.5; transform-box: fill-box; transform-origin: center; animation: bv-br-spin 26s linear infinite; }
.bv-branches .bv-ring2 { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1; }
.bv-branches .bv-sat { transform-box: view-box; transform-origin: 160px 90px; animation: bv-br-spin 9s linear infinite; }
.bv-branches .bv-sat circle { fill: #2bffbb; filter: drop-shadow(0 0 3px #1fe3a8); }
.bv-branches .bv-sat.s2 { animation-duration: 14s; animation-direction: reverse; }
.bv-branches .bv-sat.s2 circle { fill: #19c8e0; }
.bv-branches .bv-hping { fill: none; stroke: #2bffbb; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: bv-br-hping 1.2s var(--bv-out) 3.6s infinite both; }
.bv-branches .bv-core { filter: drop-shadow(0 0 8px rgba(31,227,168,.75)) drop-shadow(0 0 18px rgba(31,227,168,.35)); }

/* branch nodes */
.bv-branches .bv-pill { fill: rgba(9,16,19,.94); stroke: rgba(255,255,255,.13); stroke-width: 1; }
.bv-branches .bv-pflash { fill: rgba(31,227,168,.12); stroke: rgba(43,255,187,.85); stroke-width: 1; opacity: 0; animation: bv-br-flash 4.8s ease-out infinite both; }
.bv-branches .bv-pring { fill: none; stroke: rgba(43,255,187,.7); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: bv-br-ring 4.8s var(--bv-out) infinite both; }
.bv-branches .bv-dot { fill: #2bffbb; filter: drop-shadow(0 0 3px #1fe3a8); }
.bv-branches .bv-dotg { fill: rgba(31,227,168,.18); transform-box: fill-box; transform-origin: center; animation: bv-br-dot 4.8s var(--bv-out) infinite both; }

/* stagger: one branch every 1.2s, clockwise (must follow the animation shorthands above) */
.bv-branches .bv-net .k1 { animation-delay: 0s; }
.bv-branches .bv-net .k2 { animation-delay: 1.2s; }
.bv-branches .bv-net .k3 { animation-delay: 2.4s; }
.bv-branches .bv-net .k4 { animation-delay: 3.6s; }

@keyframes bv-br-out-t {
  0%        { stroke-dashoffset: 18;  opacity: 1; }
  30%       { stroke-dashoffset: -82; opacity: 1; }
  35%, 100% { stroke-dashoffset: -82; opacity: 0; }
}
@keyframes bv-br-out-h {
  0%        { stroke-dashoffset: 3;   opacity: 1; }
  30%       { stroke-dashoffset: -97; opacity: 1; }
  35%, 100% { stroke-dashoffset: -97; opacity: 0; }
}
@keyframes bv-br-back {
  0%, 50%   { stroke-dashoffset: -100; opacity: 0; }
  52%       { opacity: 1; }
  80%       { stroke-dashoffset: 16; opacity: 1; }
  83%, 100% { stroke-dashoffset: 16; opacity: 0; }
}
@keyframes bv-br-flash {
  0%, 28%   { opacity: 0; }
  32%       { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes bv-br-ring {
  0%, 29.5% { opacity: 0; scale: 1; }
  31%       { opacity: .9; scale: 1; }
  56%, 100% { opacity: 0; scale: 1.32 1.7; }
}
@keyframes bv-br-dot {
  0%, 29%   { scale: 1; opacity: .6; }
  33%       { scale: 2.1; opacity: 1; }
  70%, 100% { scale: 1; opacity: .6; }
}
@keyframes bv-br-hping {
  0%, 18%   { opacity: 0; scale: 1; }
  22%       { opacity: .85; scale: 1; }
  80%, 100% { opacity: 0; scale: 2.3; }
}
@keyframes bv-br-halo {
  0%, 100% { opacity: .75; scale: .92; }
  50%      { opacity: 1;   scale: 1.06; }
}
@keyframes bv-br-spin { to { rotate: 360deg; } }
@keyframes bv-br-march { to { stroke-dashoffset: -60; } }
@keyframes bv-br-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }


/* ==========================================================================
   3 · bv-team — members, roles & permission toggles     loop 6s (toggles 12s)
   ========================================================================== */
.bv-team .bv-stage { width: min(326px, calc(100cqw - 40px)); }
.bv-team .bv-thead {
  display: flex; align-items: center; gap: 8px;
  height: 14px; padding-inline: 10px; margin-bottom: 7px;
}
.bv-team .bv-thead .bv-mono { display: flex; align-items: center; gap: 6px; }
.bv-team .bv-thead .bv-mono::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bv-brand); box-shadow: 0 0 6px var(--bv-brand); }
.bv-team .bv-cols { margin-inline-start: auto; display: flex; gap: 8px; }
.bv-team .bv-cols svg { width: 20px; height: 10px; color: rgba(133,147,160,.85); }

.bv-team .bv-list { position: relative; display: flex; flex-direction: column; gap: 6px; }
.bv-team .bv-member {
  --c: #1fe3a8;
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 34px; padding-inline: 8px 10px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px -16px rgba(0,0,0,.9);
}
.bv-team .bv-member:nth-child(3) { --c: #19c8e0; --r: 1; }
.bv-team .bv-member:nth-child(4) { --c: #9b7bff; --r: 2; }

.bv-team .bv-ava {
  position: relative; display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--c);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 12px -3px var(--c);
  overflow: visible;
}
.bv-team .bv-ava svg { width: 14px; height: 14px; margin-top: 2px; }
.bv-team .bv-ava::after {
  content: ""; position: absolute; inset-inline-end: -1px; bottom: -1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #2bffbb; box-shadow: 0 0 0 1.5px #0b1316, 0 0 5px #1fe3a8;
}
.bv-team .bv-member:nth-child(4) .bv-ava::after { background: rgba(133,147,160,.9); box-shadow: 0 0 0 1.5px #0b1316; }

.bv-team .bv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bv-team .bv-who i { height: 5px; border-radius: 3px; background: rgba(238,245,243,.42); width: min(58px, 90%); }
.bv-team .bv-who i + i { height: 4px; background: rgba(255,255,255,.13); width: min(36px, 60%); }
.bv-team .bv-member:nth-child(3) .bv-who i:first-child { width: min(46px, 80%); }
.bv-team .bv-member:nth-child(4) .bv-who i:first-child { width: min(52px, 86%); }

.bv-team .bv-role {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 16px; padding-inline: 5px 6px; border-radius: 5px;
  font-family: var(--bv-mono); font-size: 8px; font-weight: 600; letter-spacing: .08em;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.bv-team .bv-role svg { width: 9px; height: 9px; }

.bv-team .bv-perms { display: flex; gap: 8px; flex: none; }
.bv-team .bv-tg {
  --d: calc(var(--r, 0) * 2s + var(--c2, 0) * .2s + .5s);
  position: relative; width: 20px; height: 11px; border-radius: 6px; flex: none;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.bv-team .bv-tg:nth-child(2) { --c2: 1; }
.bv-team .bv-tg:nth-child(3) { --c2: 2; }
.bv-team .bv-tg::before { /* on-fill */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--bv-grad);
  box-shadow: 0 0 10px -1px rgba(31,227,168,.75);
  opacity: 0;
}
.bv-team .bv-tg::after { /* knob */
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #e3ecea; box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.bv-team .bv-tg.on::before { opacity: 1; }
.bv-team .bv-tg.on::after  { translate: calc(var(--bv-s) * 9px) 0; }

.bv-team .bv-tg.flip::before       { animation: bv-tm-fill-on 12s var(--bv-io) var(--d) infinite both; }
.bv-team .bv-tg.flip::after        { animation: bv-tm-knob-on 12s var(--bv-io) var(--d) infinite both; }
.bv-team .bv-tg.flip.on::before    { animation-name: bv-tm-fill-off; }
.bv-team .bv-tg.flip.on::after     { animation-name: bv-tm-knob-off; }

/* active-row scanner */
.bv-team .bv-scan {
  position: absolute; z-index: 2; inset-inline: -3px; top: -3px; height: 40px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(90deg, rgba(31,227,168,.10), rgba(31,227,168,.025) 55%, rgba(25,200,224,.06));
  box-shadow: inset 0 0 0 1px rgba(43,255,187,.5), 0 0 0 4px rgba(31,227,168,.05), 0 0 26px -6px rgba(31,227,168,.55);
  animation: bv-tm-scan 6s var(--bv-io) infinite both;
}
.bv-team:dir(rtl) .bv-scan {
  background: linear-gradient(-90deg, rgba(31,227,168,.10), rgba(31,227,168,.025) 55%, rgba(25,200,224,.06));
}
.bv-team .bv-scan::before { /* accent bar */
  content: ""; position: absolute; inset-inline-start: -1px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #19c8e0, #2bffbb); box-shadow: 0 0 10px #1fe3a8;
}
.bv-team .bv-scan i { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.bv-team .bv-scan i::before {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 34%;
  background: linear-gradient(90deg, transparent 0%, rgba(43,255,187,.05) 45%, rgba(43,255,187,.16) 92%, rgba(234,255,247,.75) 98%, transparent 100%);
  scale: var(--bv-s) 1;
  opacity: 0;
  animation: bv-tm-sweep 2s cubic-bezier(.45,0,.2,1) infinite both;
}

@keyframes bv-tm-scan {
  0%          { translate: 0 0;    opacity: 0; }
  4%, 30%     { translate: 0 0;    opacity: 1; }
  37%, 63.33% { translate: 0 40px; opacity: 1; }
  70.33%, 94% { translate: 0 80px; opacity: 1; }
  99%, 100%   { translate: 0 80px; opacity: 0; }
}
@keyframes bv-tm-sweep {
  0%, 12%   { translate: calc(var(--bv-s) * -100%) 0; opacity: 0; }
  17%       { opacity: 1; }
  48%       { opacity: 1; }
  62%, 100% { translate: calc(var(--bv-s) * 290%) 0; opacity: 0; }
}
@keyframes bv-tm-fill-on {
  0%          { opacity: 0; }
  2%, 50%     { opacity: 1; }
  52%, 100%   { opacity: 0; }
}
@keyframes bv-tm-fill-off {
  0%          { opacity: 1; }
  2%, 50%     { opacity: 0; }
  52%, 100%   { opacity: 1; }
}
@keyframes bv-tm-knob-on {
  0%        { translate: 0 0; scale: 1; }
  1%        { scale: 1.45 1; }
  2%, 50%   { translate: calc(var(--bv-s) * 9px) 0; scale: 1; }
  51%       { scale: 1.45 1; }
  52%, 100% { translate: 0 0; scale: 1; }
}
@keyframes bv-tm-knob-off {
  0%        { translate: calc(var(--bv-s) * 9px) 0; scale: 1; }
  1%        { scale: 1.45 1; }
  2%, 50%   { translate: 0 0; scale: 1; }
  51%       { scale: 1.45 1; }
  52%, 100% { translate: calc(var(--bv-s) * 9px) 0; scale: 1; }
}


/* ==========================================================================
   4 · bv-custom — configurator: segment + sliders → live preview     loop 9s
   states A (30′ ₪350 teal) → B (15′ ₪220 cyan) → C (45′ ₪480 violet)
   ========================================================================== */
.bv-custom .bv-stage { display: flex; align-items: stretch; gap: 12px; }
.bv-custom .bv-panel {
  width: 158px; padding: 10px 11px 11px; border-radius: 13px;
  display: flex; flex-direction: column; gap: 10px;
}
.bv-custom .bv-phead { display: flex; align-items: center; gap: 6px; height: 10px; }
.bv-custom .bv-phead .bv-mono { display: flex; align-items: center; gap: 6px; }
.bv-custom .bv-phead svg { width: 10px; height: 10px; color: var(--bv-brand); animation: bv-cu-gear 9s var(--bv-io) infinite both; }
.bv-custom .bv-phead b { margin-inline-start: auto; display: flex; gap: 3px; }
.bv-custom .bv-phead b i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.16); }
.bv-custom .bv-phead b i:first-child { background: var(--bv-brand); box-shadow: 0 0 5px var(--bv-brand); }

/* segmented control (pill = clip-path that stretches leading-edge first) */
.bv-custom .bv-seg {
  position: relative; height: 20px; padding: 2px; border-radius: 7px;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.bv-custom .bv-seg-row {
  position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; justify-items: center;
  font-family: var(--bv-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .02em; color: rgba(133,147,160,.95);
}
.bv-custom .bv-seg-hi {
  --la: 33.333%; --ra: 33.333%;
  --lb: 0%;      --rb: 66.667%;
  --lc: 66.667%; --rc: 0%;
  border-radius: 5px; color: #03140e; font-weight: 600;
  background: var(--bv-grad);
  clip-path: inset(0 var(--ra) 0 var(--la) round 5px);
  animation: bv-cu-seg 9s var(--bv-io) infinite both;
}
.bv-custom:dir(rtl) .bv-seg-hi {
  --lb: 66.667%; --rb: 0%;
  --lc: 0%;      --rc: 66.667%;
}

/* sliders */
.bv-custom .bv-sl { display: flex; align-items: center; gap: 8px; height: 13px; }
.bv-custom .bv-sl > b {
  width: 13px; flex: none; display: grid; place-items: center;
  font-family: var(--bv-sans); font-size: 10px; font-weight: 600; color: rgba(133,147,160,.95);
}
.bv-custom .bv-sl > b svg { width: 10px; height: 10px; }
.bv-custom .bv-track {
  position: relative; flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.09);
}
.bv-custom .bv-fill {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--bv-grad); box-shadow: 0 0 8px rgba(31,227,168,.6);
  transform-origin: 0 50%;
  scale: var(--fa) 1;
  animation: bv-cu-fill 9s var(--bv-io) infinite both;
  animation-delay: var(--dl, 0s);
}
.bv-custom:dir(rtl) .bv-fill { transform-origin: 100% 50%; }
.bv-custom .bv-knob {
  position: absolute; inset: 0;
  translate: calc(var(--bv-s) * var(--fa) * 100%) 0;
  animation: bv-cu-knob 9s var(--bv-io) infinite both;
  animation-delay: var(--dl, 0s);
}
.bv-custom .bv-knob::before {
  content: ""; position: absolute; top: 50%; inset-inline-start: -5.5px; margin-top: -5.5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #d6fff1);
  box-shadow: 0 0 0 3px rgba(31,227,168,.18), 0 0 12px rgba(31,227,168,.75), 0 2px 4px rgba(0,0,0,.6);
}
.bv-custom .bv-sl-price { --fa: .52; --fb: .24; --fc: .82; --dl: .12s; }
.bv-custom .bv-sl-hue   { --fa: .1;  --fb: .46; --fc: .86; --dl: .26s; }
.bv-custom .bv-sl-hue .bv-track {
  background: linear-gradient(90deg, #1fe3a8, #2bffbb 20%, #19c8e0 46%, #5a9bff 66%, #9b7bff 84%, #d07bff);
  opacity: .9;
}
.bv-custom:dir(rtl) .bv-sl-hue .bv-track {
  background: linear-gradient(-90deg, #1fe3a8, #2bffbb 20%, #19c8e0 46%, #5a9bff 66%, #9b7bff 84%, #d07bff);
}
.bv-custom .bv-sl-hue .bv-fill { display: none; }

/* preview card */
.bv-custom .bv-prev {
  position: relative; width: 116px; padding: 10px 11px 11px; border-radius: 13px;
  display: flex; flex-direction: column; gap: 7px;
}
.bv-custom .bv-aura { position: absolute; inset: 14% 8%; z-index: -1; filter: blur(22px); opacity: .55; }
.bv-custom .bv-aura i { border-radius: 50%; }
.bv-custom .bv-edge { position: absolute; top: -1px; inset-inline: 18px; height: 2px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 10px rgba(31,227,168,.45); }
.bv-custom .bv-ptop { display: flex; align-items: center; justify-content: space-between; height: 26px; }
.bv-custom .bv-tile { position: relative; width: 26px; height: 26px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 14px -3px rgba(31,227,168,.6); }
.bv-custom .bv-tile svg { position: relative; z-index: 1; width: 15px; height: 15px; color: #03140e; }
.bv-custom .bv-live { display: flex; align-items: center; gap: 4px; font-size: 7.5px; letter-spacing: .14em; }
.bv-custom .bv-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #2bffbb; box-shadow: 0 0 6px #1fe3a8; animation: bv-cu-blink 1.5s ease-in-out infinite; }
.bv-custom .bv-pl { height: 5px; border-radius: 3px; background: rgba(238,245,243,.38); width: 78%; }
.bv-custom .bv-pl + .bv-pl { height: 4px; background: rgba(255,255,255,.12); width: 52%; margin-top: -2px; }
.bv-custom .bv-pfoot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }

/* hue layers (shared by tile, edge, aura) */
.bv-custom .bv-hues { position: absolute; inset: 0; display: block; border-radius: inherit; }
.bv-custom .bv-hues i {
  position: absolute; inset: 0; border-radius: inherit;
  animation: bv-cu-hue 9s var(--bv-io) infinite both;
}
.bv-custom .bv-hues i + i { opacity: 0; }  /* static/base = state A (teal) */
.bv-custom .bv-hues i:nth-child(1) { background: linear-gradient(135deg, #16cfe0, #1fe3a8 50%, #2bffbb); animation-delay: .26s; }
.bv-custom .bv-hues i:nth-child(2) { background: linear-gradient(135deg, #19c8e0, #4fb2ff); animation-delay: calc(.26s - 6s); }
.bv-custom .bv-hues i:nth-child(3) { background: linear-gradient(135deg, #8b7bff, #c77bff); animation-delay: calc(.26s - 3s); }

/* odometer price */
.bv-custom .bv-price {
  display: flex; align-items: baseline;
  font-family: var(--bv-sans); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums; color: #f4fffb;
  text-shadow: 0 0 16px rgba(31,227,168,.35);
}
.bv-custom .bv-price em { font-size: 12px; font-weight: 500; color: var(--bv-brand); margin-inline-end: 1px; text-shadow: none; }
.bv-custom .bv-dg, .bv-custom .bv-tick {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.bv-custom .bv-dg { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.bv-custom .bv-dg i {
  display: block; width: 1ch; line-height: 1.1em; word-break: break-all; white-space: normal; text-align: center;
  translate: 0 calc(var(--da) * -1.1em);
  animation: bv-cu-roll 9s var(--bv-io) infinite both;
}
.bv-custom .bv-dg:nth-of-type(1) i { --da: 3; --db: 2; --dc: 4; animation-delay: .14s; }
.bv-custom .bv-dg:nth-of-type(2) i { --da: 5; --db: 2; --dc: 8; animation-delay: .2s; }
.bv-custom .bv-dg:nth-of-type(3) i { --da: 0; --db: 0; --dc: 0; animation: none; }

/* duration ticker chip */
.bv-custom .bv-dur {
  display: inline-flex; align-items: center; gap: 3px; height: 15px; padding-inline: 4px 5px; border-radius: 5px; margin-bottom: 2px;
  font-family: var(--bv-mono); font-size: 8px; font-weight: 500; color: rgba(238,245,243,.85);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.bv-custom .bv-dur svg { width: 8px; height: 8px; color: var(--bv-brand); }
.bv-custom .bv-tick { display: inline-block; height: 1.25em; overflow: hidden; }
.bv-custom .bv-tick i {
  display: flex; flex-direction: column;
  --da: 1; --db: 0; --dc: 2;
  translate: 0 calc(var(--da) * -1.25em);
  animation: bv-cu-roll2 9s var(--bv-io) infinite both;
}
.bv-custom .bv-tick b { display: block; height: 1.25em; line-height: 1.25em; font-weight: 500; }

.bv-custom .bv-pflash {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(43,255,187,.7), 0 0 22px -4px rgba(31,227,168,.6);
  opacity: 0;
  animation: bv-cu-flash 3s ease-out 3.25s infinite both;
}

@keyframes bv-cu-seg {
  0%, 26%        { clip-path: inset(0 var(--ra) 0 var(--la) round 5px); }
  29.6%          { clip-path: inset(0 min(var(--ra), var(--rb)) 0 min(var(--la), var(--lb)) round 5px); }
  33.33%, 59.33% { clip-path: inset(0 var(--rb) 0 var(--lb) round 5px); }
  63%            { clip-path: inset(0 min(var(--rb), var(--rc)) 0 min(var(--lb), var(--lc)) round 5px); }
  66.67%, 92.67% { clip-path: inset(0 var(--rc) 0 var(--lc) round 5px); }
  96.3%          { clip-path: inset(0 min(var(--rc), var(--ra)) 0 min(var(--lc), var(--la)) round 5px); }
  100%           { clip-path: inset(0 var(--ra) 0 var(--la) round 5px); }
}
@keyframes bv-cu-knob {
  0%, 26%        { translate: calc(var(--bv-s) * var(--fa) * 100%) 0; }
  33.33%, 59.33% { translate: calc(var(--bv-s) * var(--fb) * 100%) 0; }
  66.67%, 92.67% { translate: calc(var(--bv-s) * var(--fc) * 100%) 0; }
  100%           { translate: calc(var(--bv-s) * var(--fa) * 100%) 0; }
}
@keyframes bv-cu-fill {
  0%, 26%        { scale: var(--fa) 1; }
  33.33%, 59.33% { scale: var(--fb) 1; }
  66.67%, 92.67% { scale: var(--fc) 1; }
  100%           { scale: var(--fa) 1; }
}
@keyframes bv-cu-roll {
  0%, 26%        { translate: 0 calc(var(--da) * -1.1em); }
  33.33%, 59.33% { translate: 0 calc(var(--db) * -1.1em); }
  66.67%, 92.67% { translate: 0 calc(var(--dc) * -1.1em); }
  100%           { translate: 0 calc(var(--da) * -1.1em); }
}
@keyframes bv-cu-roll2 {
  0%, 26%        { translate: 0 calc(var(--da) * -1.25em); }
  33.33%, 59.33% { translate: 0 calc(var(--db) * -1.25em); }
  66.67%, 92.67% { translate: 0 calc(var(--dc) * -1.25em); }
  100%           { translate: 0 calc(var(--da) * -1.25em); }
}
@keyframes bv-cu-hue {
  0%, 26%    { opacity: 1; }
  33.33%, 92.67% { opacity: 0; }
  100%       { opacity: 1; }
}
@keyframes bv-cu-flash {
  0%        { opacity: 0; }
  8%        { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes bv-cu-gear {
  0%, 26%        { rotate: 0deg; }
  33.33%, 59.33% { rotate: 120deg; }
  66.67%, 92.67% { rotate: 240deg; }
  100%           { rotate: 360deg; }
}
@keyframes bv-cu-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------------------------ responsive (container) */
@container (max-width: 340px) {
  .bv-custom .bv-stage { scale: .88; }
}
@container (max-width: 300px) {
  .bv-custom .bv-stage { scale: .82; }
  .bv-start .bv-side { width: 34px; }
}
@container (min-width: 520px) {
  .bv-custom .bv-stage { scale: 1.08; }
  .bv-team .bv-stage { width: 360px; }
}

/* ------------------------------------------------ reduced motion: final, still frame */
@media (prefers-reduced-motion: reduce) {
  .bento-vis::after,
  .bento-vis *, .bento-vis *::before, .bento-vis *::after { animation: none !important; }
  .bv-start .bv-caret, .bv-start .bv-url::after { opacity: 0; }
  .bv-team .bv-scan i::before { opacity: 0; }
}