/* =========================================================
   Problem cards — "The cost of not knowing" — hi-fi animated visuals
   ========================================================= */

/* All cards in this section sit on a clean white surface */
.problem .bcard {
  background: #ffffff;
  border-color: var(--border-default);
  padding-bottom: 22px;
}
.problem .bcard .bc-title { color: var(--ink); }
.problem .bcard .bc-title strong { color: var(--ink); }
.problem .bcard .bc-sub { color: var(--fg-muted); }

/* The inner visual sits inside the card with proper inset and rounded corners on every side */
.problem .bc-vis {
  background: #fcfbf7;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  margin: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 22px -16px rgba(23,23,26,0.06);
}

/* Wide variant — text on the left, visual on the right (used by full-width card) */
.problem .bcard.pc-wide {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  min-height: 0;
}
.problem .bcard.pc-wide .bc-text {
  padding-top: 0;
  padding-bottom: 0;
  align-self: center;
  max-width: none;
}
.problem .bcard.pc-wide .bc-title { font-size: 26px; line-height: 1.22; }
.problem .bcard.pc-wide .bc-media {
  margin-top: 0;
  min-height: 0;
  align-self: center;
}
.problem .bcard.pc-wide .bc-vis {
  min-height: 0;
}
.problem .bcard.pc-wide .bc-vis-wait {
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 14px;
}
@media (max-width: 900px) {
  .problem .bcard.pc-wide {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .problem .bcard.pc-wide .bc-text { padding-top: 0; padding-bottom: 0; }
}

/* Animations run as soon as the page loads. Each animated element below
   defaults to its END state so a paused / static capture still looks right;
   the animation simply re-plays the entrance for users who see it live. */
.problem .bc-vis::before {
  /* keep the dotted texture only where it makes sense */
  background-image: radial-gradient(circle at 1px 1px, rgba(23,23,26,0.035) 1px, transparent 1.5px);
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
  opacity: 0.5;
}

/* Pause animations until the card is in view (data-reveal toggles .in) */
.pc .bc-vis [class*="bcv"] { animation-play-state: paused; }
.pc .bcvs-card-bar i,
.pc .bcv-spark, .pc .bcv-area, .pc .bcv-dot,
.pc .bcvs-flow-dot, .pc .bcvs-grid > .err,
.pc .bcvs-card::after, .pc .bcvs-card-ok .d,
.pc .bcv-live .dot, .pc .bcvs-sheet {
  animation-play-state: paused;
}
.pc.in .bc-vis [class*="bcv"],
.pc.in .bcvs-card-bar i,
.pc.in .bcv-spark, .pc.in .bcv-area, .pc.in .bcv-dot,
.pc.in .bcvs-flow-dot, .pc.in .bcvs-grid > .err,
.pc.in .bcvs-card::after, .pc.in .bcvs-card-ok .d,
.pc.in .bcv-live .dot, .pc.in .bcvs-sheet {
  animation-play-state: running;
}

/* Shared visual frame replacing the placeholder GIF container */
.bc-vis {
  position: relative;
  flex: 1;
  border-radius: 14px 14px 0 0;
  background: #fff;
  border: 1px solid var(--border-default);
  border-bottom: 0;
  margin: 0 -8px -1px;
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.6) inset,
    0 12px 24px -16px rgba(23,23,26,0.10);
  isolation: isolate;
}
.bc-vis::before {
  /* subtle dotted grid for warmth */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(23,23,26,0.04) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, transparent, #000 30%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
  z-index: -1;
  opacity: 0.7;
}

/* =========================================================
   Card 1 — Today's number (live EBIT, sparkline, count-up)
   ========================================================= */
.bc-vis-num { padding-top: 18px; }
.bc-vis-num .bcv-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.bc-vis-num .bcv-greet {
  font-style: italic;
  font-size: 14px;
  color: var(--fg-muted);
  font-weight: 500;
}
.bc-vis-num .bcv-greet em { font-style: normal; color: var(--ink); font-weight: 600; }
.bc-vis-num .bcv-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-positive);
  padding: 3px 8px 3px 7px;
  background: rgba(0,128,96,0.08);
  border: 1px solid rgba(0,128,96,0.18);
  border-radius: 999px;
  font-weight: 600;
}
.bc-vis-num .bcv-live .dot {
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--color-accent-positive);
  box-shadow: 0 0 0 0 rgba(0,128,96,0.6);
  animation: bcvLivePulse 2.2s ease-in-out infinite;
}
@keyframes bcvLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,128,96,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(0,128,96,0); }
}

.bc-vis-num .bcv-kicker {
  margin-top: 8px;
  font-style: italic;
  font-size: 12px;
  color: var(--fg-placeholder);
}
.bc-vis-num .bcv-num {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.bc-vis-num .bcv-num .cur { font-size: 0.42em; color: var(--fg-muted); font-weight: 500; }
.bc-vis-num .bcv-num .dec { font-size: 0.5em; color: var(--fg-muted); font-weight: 500; }
.bc-vis-num .bcv-num .int { display: inline-block; }
.bc-vis-num .bcv-num .int.animating {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 100%);
}

.bc-vis-num .bcv-trend {
  margin: 12px -4px 0;
  height: 56px;
}
.bc-vis-num .bcv-trend svg { width: 100%; height: 100%; display: block; }
.bc-vis-num .bcv-spark {
  stroke-dasharray: 700;
  stroke-dashoffset: 0;
  animation: bcvSparkDraw 2.4s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bc-vis-num .bcv-area {
  opacity: 1;
  animation: bcvAreaIn 1.6s 1.6s ease-out both;
}
.bc-vis-num .bcv-dot {
  opacity: 1;
  transform-origin: 240px 18px;
  animation: bcvDotIn 0.4s 2.5s ease-out both, bcvDotPulse 2s 2.9s ease-in-out infinite;
}
@keyframes bcvSparkDraw { from { stroke-dashoffset: 700; } }
@keyframes bcvAreaIn   { from { opacity: 0; } }
@keyframes bcvDotIn    { from { opacity: 0; } }
@keyframes bcvDotPulse {
  0%, 100% { r: 3.2; opacity: 1; }
  50%      { r: 4.5; opacity: 0.85; }
}

.bc-vis-num .bcv-ctx {
  margin-top: 12px;
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-muted);
}
.bc-vis-num .bcv-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,128,96,0.10);
  color: var(--color-accent-positive);
  font-weight: 600;
}
.bc-vis-num .bcv-meta { color: var(--fg-placeholder); margin-left: auto; }
.bc-vis-num .bcv-clock { color: var(--fg-muted); }

/* Divider between sections inside the tall card */
.bc-vis-num .bcv-divider {
  margin: 18px -10px 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-default) 12%, var(--border-default) 88%, transparent);
}

/* Section block (breakdown + week) */
.bc-vis-num .bcv-sec { display: flex; flex-direction: column; gap: 7px; }
.bc-vis-num .bcv-sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.bc-vis-num .bcv-sec-lab {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.bc-vis-num .bcv-sec-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-placeholder);
  letter-spacing: 0.04em;
}

/* Breakdown rows */
.bc-vis-num .bcv-bd-row {
  display: grid;
  grid-template-columns: 64px 1fr 56px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  animation: bcvBdIn .55s var(--d, 0s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bc-vis-num .bcv-bd-lab {
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.bc-vis-num .bcv-bd-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
.bc-vis-num .bcv-bd-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-app);
  border: 1px solid var(--border-default);
  overflow: hidden;
}
.bc-vis-num .bcv-bd-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: var(--ink);
  border-radius: 999px;
  animation: bcvBdFill 1s var(--d, 0s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bc-vis-num .bcv-bd-bar.bcv-bd-neg i { background: linear-gradient(90deg, #c7c5bd, #8A8A8A); }
.bc-vis-num .bcv-bd-bar.bcv-bd-pos i { background: linear-gradient(90deg, var(--color-accent-positive), #4CCDA3); box-shadow: 0 0 0 1px rgba(0,128,96,0.3), 0 0 10px rgba(0,128,96,0.22); }
.bc-vis-num .bcv-bd-bar.bcv-bd-mid i { background: linear-gradient(90deg, #5a5a60, #3a3a40); }
.bc-vis-num .bcv-bd-net .bcv-bd-lab,
.bc-vis-num .bcv-bd-net .bcv-bd-val { color: var(--ink); font-weight: 700; }
.bc-vis-num .bcv-bd-net { padding-top: 2px; padding-bottom: 2px; }
.bc-vis-num .bcv-bd-ebit { padding-top: 4px; }
.bc-vis-num .bcv-bd-ebit .bcv-bd-lab,
.bc-vis-num .bcv-bd-ebit .bcv-bd-val { color: var(--ink); font-weight: 700; }
.bc-vis-num .bcv-bd-ebit .bcv-bd-val { color: var(--color-accent-positive); }
@keyframes bcvBdIn   { from { opacity: 0; transform: translateX(-8px); } }
@keyframes bcvBdFill { from { width: 0; } }

/* This-week mini bar chart */
.bc-vis-num .bcv-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  height: 96px;
  align-items: end;
  padding: 0 2px;
}
.bc-vis-num .bcv-wb {
  position: relative;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #c7c5bd, #e8e6dd);
  animation: bcvWbGrow 1s var(--d, 0s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bc-vis-num .bcv-wb em {
  position: absolute;
  bottom: -16px;
  left: 0; right: 0;
  text-align: center;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-placeholder);
}
.bc-vis-num .bcv-wb-on {
  background: linear-gradient(180deg, var(--color-accent-positive), #4CCDA3);
  box-shadow: 0 0 0 1px rgba(0,128,96,0.3), 0 0 18px rgba(0,128,96,0.22);
}
.bc-vis-num .bcv-wb-on em { color: var(--color-accent-positive); font-weight: 700; }
@keyframes bcvWbGrow { from { height: 0; } }

/* =========================================================
   Card 2 — Sheet → nouz card  (vertical stack)
   ========================================================= */
.bc-vis-sheet {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-items: stretch;
  gap: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.bcvs-sheet {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-app);
  position: relative;
  animation: bcvsSheetTilt 6s ease-in-out infinite;
  transform-origin: center;
  box-shadow: 0 8px 18px -14px rgba(23,23,26,0.18);
}
@keyframes bcvsSheetTilt {
  0%, 100% { transform: rotate(-0.4deg) translateY(0); }
  50%      { transform: rotate(0.4deg) translateY(-2px); }
}
.bcvs-tabbar {
  display: flex;
  gap: 2px;
  padding: 5px 6px 0;
  background: linear-gradient(180deg, #eeece4, var(--bg-app));
  border-bottom: 1px solid var(--border-default);
}
.bcvs-tab {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px 5px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  color: var(--fg-muted);
}
.bcvs-tab:first-child { color: var(--ink); }
.bcvs-grid {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 1fr;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink);
}
.bcvs-grid > span {
  padding: 5px 8px;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.bcvs-grid > span:nth-child(4n) { border-right: 0; }
.bcvs-grid > span:nth-last-child(-n+4) { border-bottom: 0; }
.bcvs-grid > .h {
  background: #fff;
  color: var(--fg-muted);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
}
.bcvs-grid > .err {
  color: var(--color-destructive);
  font-weight: 600;
  position: relative;
  animation: bcvsErrFlash 3s ease-in-out infinite;
}
.bcvs-grid > .err:nth-of-type(2) { animation-delay: 0.4s; }
.bcvs-grid > .err:nth-of-type(3) { animation-delay: 0.9s; }
.bcvs-grid > .err:nth-of-type(4) { animation-delay: 1.4s; }
.bcvs-grid > .err:nth-of-type(5) { animation-delay: 1.9s; }
@keyframes bcvsErrFlash {
  0%, 70%, 100% { background: transparent; }
  78%, 85%      { background: rgba(215,44,13,0.10); }
}

/* Vertical flow arrow with dots */
.bcvs-flow {
  position: relative;
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
}
.bcvs-flow .bcvs-arr { width: 14px; height: 24px; }
.bcvs-flow-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--color-accent-positive);
  box-shadow: 0 0 0 3px rgba(0,128,96,0.12);
  transform: translateX(-50%);
  animation: bcvsFlow 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.bcvs-flow-dot:nth-child(2) { animation-delay: 0.8s; }
.bcvs-flow-dot:nth-child(3) { animation-delay: 1.6s; }
@keyframes bcvsFlow {
  0%   { top: 0;    opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 22px; opacity: 0; }
}

/* Output card */
.bcvs-card {
  background: linear-gradient(180deg, #17171A 0%, #0E0E10 100%);
  color: #fff;
  border-radius: 12px;
  padding: 14px 14px 14px;
  display: flex; flex-direction: column;
  gap: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 28px -16px rgba(23,23,26,0.45);
  position: relative;
  overflow: hidden;
}
.bcvs-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.bcvs-card-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(76,205,163,0.12);
  color: #4CCDA3;
  border: 1px solid rgba(76,205,163,0.2);
}
.bcvs-card::after {
  /* sheen */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: bcvsSheen 5s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes bcvsSheen {
  0%, 50%   { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}
.bcvs-card-lab {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.bcvs-card-val {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bcvs-card-val .cur { font-size: 0.55em; color: rgba(255,255,255,0.55); font-weight: 500; margin-right: 2px; }
.bcvs-card-val .dec { font-size: 0.5em; color: rgba(255,255,255,0.55); font-weight: 500; }
.bcvs-card-rows {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.85);
}
.bcvs-card-rows > span {
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start;
  padding: 6px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 240ms ease;
  will-change: transform;
}
.bcvs-card-rows > span:hover {
  transform: translateY(-6px) scale(1.04);
  background: rgba(76,205,163,0.14);
  border-color: rgba(76,205,163,0.35);
  box-shadow:
    0 12px 22px -10px rgba(0,0,0,0.45),
    0 0 0 1px rgba(76,205,163,0.18) inset;
  z-index: 2;
  position: relative;
}
.bcvs-card-rows > span:hover em { color: rgba(76,205,163,0.85); }
.bcvs-card-rows > span em {
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.bcvs-card-ok {
  margin-top: 4px;
  font-size: 10px;
  color: #4CCDA3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.bcvs-card-ok .d {
  width: 5px; height: 5px; border-radius: 99px;
  background: #4CCDA3;
  box-shadow: 0 0 0 0 rgba(76,205,163,0.5);
  animation: bcvsOkPulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes bcvsOkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,205,163,0.6); }
  80%, 100% { box-shadow: 0 0 0 6px rgba(76,205,163,0); }
}
.bcvs-card-bar {
  margin-top: 4px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.bcvs-card-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #4CCDA3, #008060);
  border-radius: 2px;
  animation: bcvsBarFill 1.6s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bcvsBarFill { from { width: 0; } }

/* =========================================================
   Card 3 — Break-even progress (cumulative EBIT vs target)
   ========================================================= */
.bc-vis-be {
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bcvbe-head {
  display: flex; flex-direction: column;
  gap: 4px;
}
.bcvbe-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.bcvbe-eb {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.bcvbe-sub {
  font-size: 11px;
  color: var(--fg-placeholder);
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bcvbe-sub em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
.bcvbe-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-positive);
  padding: 3px 8px 3px 7px;
  background: rgba(0,128,96,0.08);
  border: 1px solid rgba(0,128,96,0.2);
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.bcvbe-chip .d {
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--color-accent-positive);
  animation: bcvLivePulse 1.8s ease-in-out infinite;
}

/* Chart */
.bcvbe-chart {
  display: grid;
  /* Tightened Y-axis column from 38px+8 to 26px+4 so the canvas
     extends left and uses the card width. €22k (widest label) is
     ~24px at the 9px font size. */
  grid-template-columns: 26px 1fr;
  gap: 4px;
  flex: 1;
  min-height: 180px;
}
/* Y axis labels distribute so €29k aligns with the break-even target line
   (which sits 15% from the top of the canvas). */
.bcvbe-yaxis {
  position: relative;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-placeholder);
  letter-spacing: 0.02em;
  text-align: right;
  padding: 0;
  line-height: 1;
}
.bcvbe-yaxis > span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
/* 4-label Y axis (€22k / €14k / €7k / €0). Break-even is shown
   as a separate marker line at the €16k position INSIDE the
   chart, so the cumulative curve can be seen crossing it rather
   than asymptotically approaching the top edge. */
.bcvbe-yaxis > span:nth-child(1) { top: 5%; }
.bcvbe-yaxis > span:nth-child(2) { top: 39%; }
.bcvbe-yaxis > span:nth-child(3) { top: 70%; }
.bcvbe-yaxis > span:nth-child(4) { top: 100%; }
.bcvbe-yaxis-be { color: var(--color-accent-positive); font-weight: 700; }
/* overflow:visible so the readout tooltip can extend past the
   canvas edges at the leftmost/rightmost days without getting
   clipped. The inner <svg> handles its own viewBox clipping for
   the curve paths; no other absolute children extend past canvas. */
.bcvbe-canvas {
  position: relative;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0,128,96,0.025), rgba(0,128,96,0));
  overflow: visible;
}
.bcvbe-grid {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border-default);
  opacity: 0.55;
  pointer-events: none;
}
.bcvbe-grid-base { opacity: 0.8; }

/* Break-even target line — black dashed (was accent green). The
   curve goes from black solid below BE to green dotted above
   BE, so the target itself stays neutral black to read as the
   reference line, not as part of the curve. */
.bcvbe-target {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1.5px dashed var(--ink);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}
.bcvbe-target-lab {
  position: absolute;
  /* Sit centered on the BE line at the canvas's left edge. The
     BE line is at top:31% inside the canvas; transform pulls
     the label up by half its height so it straddles the line. */
  top: 31%;
  left: 8px;
  transform: translateY(-50%);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  background: rgba(255,255,255,0.95);
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(23,23,26,0.2);
  box-shadow: 0 2px 6px -3px rgba(23,23,26,0.12);
  z-index: 3;
  white-space: nowrap;
}

/* Today vertical guide */
.bcvbe-today {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(23,23,26,0.15);
  pointer-events: none;
}
.bcvbe-today::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(23,23,26,0.15);
}

/* Readout card sticking to today's marker */
.bcvbe-readout {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  display: flex; flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 6px 14px -6px rgba(23,23,26,0.18);
  white-space: nowrap;
  z-index: 2;
  animation: bcvbValIn .4s 1.5s ease-out both;
}
.bcvbe-readout .r-lab {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-placeholder);
  font-weight: 600;
}
.bcvbe-readout .r-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.bcvbe-readout .r-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-accent-positive);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* SVG line + area animations */
.bcvbe-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.bcvbe-area  { animation: bcvbeAreaIn 1.2s 0.6s ease-out both; }
.bcvbe-line  {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: bcvbeDraw 1.4s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bcvbe-proj  {
  stroke-dasharray: 3 4;
  animation: bcvbeProjIn 0.8s 1.6s ease-out both;
}
.bcvbe-today-dot {
  transform-origin: 150px 82px;
  transform-box: fill-box;
  animation: bcvbeDotIn 0.4s 1.4s ease-out both, bcvbeDotPulse 2.2s 1.8s ease-in-out infinite;
}
@keyframes bcvbeAreaIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bcvbeDraw    { to   { stroke-dashoffset: 0; } }
@keyframes bcvbeProjIn  { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes bcvbeDotIn   { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bcvbeDotPulse {
  0%, 100% { r: 4; }
  50%      { r: 5.2; }
}

/* X axis */
.bcvbe-xaxis {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.bcvbe-xaxis > span:first-child { grid-column: 1; }
.bcvbe-xaxis > span { grid-column: 2; }
.bcvbe-xaxis {
  /* repurpose grid for evenly spaced labels under canvas col.
     Padding-left matches the new chart grid (26px Y axis + 4px
     gap = 30px) so MAY 1 sits flush against the canvas left edge. */
  display: flex;
  justify-content: space-between;
  padding-left: 30px;
  padding-right: 0;
}
.bcvbe-xaxis .on { color: var(--color-accent-positive); font-weight: 700; }

/* Foot stats */
.bcvbe-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-default);
}
.bcvbe-stat {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bcvbe-stat .l {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-placeholder);
  font-weight: 600;
}
.bcvbe-stat .v {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bcvbe-stat-hi .v { color: var(--color-accent-positive); }
.bc-vis-bars {
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bcvb-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.bcvb-head-l { display: flex; flex-direction: column; gap: 2px; }
.bcvb-lab {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.bcvb-sub {
  font-size: 11px;
  color: var(--fg-placeholder);
  letter-spacing: -0.005em;
}
.bcvb-alert-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-destructive);
  padding: 3px 8px 3px 7px;
  background: rgba(215,44,13,0.08);
  border: 1px solid rgba(215,44,13,0.18);
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.bcvb-alert-chip .d {
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--color-destructive);
  animation: bcvLivePulse 1.6s ease-in-out infinite;
}

/* Chart layout: y-axis | canvas | (xaxis spans canvas) */
.bcvb-chart {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 1fr auto;
  gap: 4px 8px;
  flex: 1;
  min-height: 180px;
}
.bcvb-yaxis {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-placeholder);
  letter-spacing: 0.04em;
  text-align: right;
  padding: 0;
  line-height: 1;
}
.bcvb-yaxis-zero { color: var(--color-accent-positive); font-weight: 700; }

.bcvb-canvas {
  grid-column: 2; grid-row: 1;
  position: relative;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(23,23,26,0.015), rgba(23,23,26,0));
}
.bcvb-grid {
  position: absolute; inset: 0;
  pointer-events: none;
}
.bcvb-grid > span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border-default);
  opacity: 0.65;
}
.bcvb-grid-zero {
  background: transparent !important;
  border-top: 1px dashed var(--color-accent-positive);
  opacity: 0.55;
}
.bcvb-grid-zero em {
  position: absolute;
  right: 0;
  top: -16px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-positive);
  font-weight: 700;
  background: #fcfbf7;
  padding: 0 4px;
}

/* Bars sit on a 50% baseline (€0 = middle of canvas) */
.bcvb-bars2 {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}
/* Bars sit in a 2-row grid: row 1 = positive area, row 2 = negative area; the
   gridline between them IS the €0 / break-even line at exactly 50% of canvas. */
.bcvb-bars2 {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0 8px;
  padding: 4px 6px;
}
.bcvb-bar {
  position: relative;
  height: var(--h);
  width: 100%;
  border-radius: 4px;
  transform-origin: bottom center;
  animation: bcvbBarGrow .9s var(--d, 0s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bcvb-bar-pos {
  grid-row: 1;
  align-self: end;
  background: linear-gradient(180deg, #2a2a2f 0%, #17171A 100%);
}
.bcvb-bar-neg {
  grid-row: 2;
  align-self: start;
  background: linear-gradient(180deg, #D72C0D 0%, #a8200a 100%);
  transform-origin: top center;
}
.bcvb-bar-rec { opacity: 0.55; }
.bcvb-bar em {
  position: absolute;
  left: 50%;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: bcvbValIn .35s calc(var(--d) + .7s) ease-out both;
}
.bcvb-bar-pos em { bottom: 100%; margin-bottom: 4px; }
.bcvb-bar-neg em { top: 100%; margin-top: 4px; color: var(--color-destructive); }
.bcvb-bar-rec em { color: var(--fg-muted); font-weight: 600; }

/* The drift flag */
.bcvb-bar-here .bcvb-flag {
  position: absolute;
  left: 50%;
  top: calc(100% + 22px);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-destructive);
  background: #fff;
  border: 1px solid rgba(215,44,13,0.25);
  border-radius: 999px;
  padding: 3px 8px 3px 6px;
  box-shadow: 0 4px 14px -6px rgba(215,44,13,0.3);
  animation: bcvbValIn .35s 1.3s ease-out both;
}
.bcvb-bar-here .bcvb-flag .d {
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--color-destructive);
  animation: bcvLivePulse 1.6s ease-in-out infinite;
}
.bcvb-bar-here::after {
  /* connector line from bar to flag */
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 22px;
  background: rgba(215,44,13,0.4);
  transform: translateX(-50%);
  animation: bcvbValIn .35s 1.15s ease-out both;
}

@keyframes bcvbBarGrow { from { transform: scaleY(0); } }
@keyframes bcvbValIn   { from { opacity: 0; } }

.bcvb-xaxis {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 6px 6px 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  border-top: 1px solid var(--border-default);
}
.bcvb-xaxis .on { color: var(--color-destructive); font-weight: 700; }

.bcvb-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-default);
}
.bcvb-cause {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px;
  color: var(--fg-muted);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.bcvb-cause svg { width: 12px; height: 12px; color: var(--color-destructive); flex-shrink: 0; }
.bcvb-saved {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.bcvb-saved strong {
  color: var(--color-accent-positive);
  font-weight: 700;
  margin-left: 2px;
}

/* =========================================================
   Card 4 — Time-to-answer timeline (proper aligned grid)
   ========================================================= */
.bc-vis-wait {
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bcvw-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.bcvw-lab {
  font-size: 13.5px;
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bcvw-lab em {
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
}
.bcvw-key {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  white-space: nowrap;
}
.bcvw-key-cell { display: inline-flex; align-items: center; gap: 6px; }
.bcvw-key-sw {
  width: 12px; height: 4px; border-radius: 2px;
  display: inline-block;
}
.bcvw-key-sw-gray { background: linear-gradient(90deg, #d8d6cd, #8A8A8A); }
.bcvw-key-sw-green { background: linear-gradient(90deg, var(--color-accent-positive), #4CCDA3); }

/* Chart grid: rows share a single bar-column for perfect alignment */
.bcvw-chart {
  display: grid;
  grid-template-columns: 130px 1fr 110px;
  align-items: center;
  row-gap: 12px;
  column-gap: 16px;
  position: relative;
  padding: 22px 0 4px;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

/* Time scale lives ABOVE the bar column, perfectly aligned to bar's track */
.bcvw-scale {
  position: absolute;
  top: 4px;
  left: calc(130px + 16px);
  right: calc(110px + 16px);
  height: 14px;
  pointer-events: none;
}
.bcvw-scale > span {
  position: absolute;
  top: 0;
  left: var(--at);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-placeholder);
  font-weight: 600;
}
.bcvw-scale > span em { font-style: normal; }
.bcvw-scale > span:first-child { color: var(--color-accent-positive); }

/* Vertical grid lines that span the row stack */
.bcvw-grid {
  position: absolute;
  top: 22px; bottom: 4px;
  left: calc(130px + 16px);
  right: calc(110px + 16px);
  pointer-events: none;
}
.bcvw-grid > span {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  left: var(--at);
  background: var(--border-default);
  opacity: 0.55;
}
.bcvw-grid > span:first-child { background: rgba(0,128,96,0.3); opacity: 1; }

.bcvw-row {
  display: contents;
}
.bcvw-row .lab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--fg-muted);
  font-weight: 600;
  text-transform: none;
}
.bcvw-row .lab svg {
  width: 14px; height: 14px;
  color: var(--fg-placeholder);
  flex-shrink: 0;
}
.bcvw-row .track {
  position: relative;
  height: 24px;
  border-radius: 999px;
  background: var(--bg-app);
  overflow: hidden;
  border: 1px solid var(--border-default);
}
.bcvw-row .track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: linear-gradient(90deg, #d8d6cd, #8A8A8A);
  border-radius: 999px;
  animation: bcvwFill 1.6s var(--d, 0s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bcvwFill { from { width: 0; } }
.bcvw-row .val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}
/* "nouz" highlight row */
.bcvw-row.bcvw-hi .lab { color: var(--ink); }
.bcvw-row.bcvw-hi .lab svg { color: var(--color-accent-positive); }
.bcvw-row.bcvw-hi .track { border-color: rgba(0,128,96,0.4); background: rgba(0,128,96,0.06); }
.bcvw-row.bcvw-hi .track i {
  background: linear-gradient(90deg, var(--color-accent-positive), #4CCDA3);
  box-shadow: 0 0 0 1px rgba(0,128,96,0.3), 0 0 14px rgba(0,128,96,0.28);
}
.bcvw-row.bcvw-hi .val {
  color: var(--color-accent-positive);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.bcvw-pulse {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--color-accent-positive);
  box-shadow: 0 0 0 0 rgba(0,128,96,0.5);
  animation: bcvwPing 2s ease-out infinite;
}
@keyframes bcvwPing {
  0%   { box-shadow: 0 0 0 0 rgba(0,128,96,0.55); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(0,128,96,0); }
}
.bcvw-foot {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.bcvw-stat {
  font-size: 12.5px;
  color: var(--fg-muted);
  letter-spacing: -0.005em;
}
.bcvw-stat strong {
  color: var(--color-accent-positive);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  margin-right: 3px;
  font-size: 13px;
}
.bcvw-sep {
  width: 4px; height: 4px;
  border-radius: 99px;
  background: var(--border-default);
  display: inline-block;
}

@media (max-width: 720px) {
  .bcvw-chart { grid-template-columns: 100px 1fr 88px; column-gap: 10px; }
  .bcvw-scale { left: calc(100px + 10px); right: calc(88px + 10px); }
  .bcvw-grid { left: calc(100px + 10px); right: calc(88px + 10px); }
  .bcvw-foot { font-size: 11px; gap: 8px; }
}

/* =========================================================
   Interactive — sparkline crosshair (pc-1)
   ========================================================= */
.bc-vis-num .bcv-trend { position: relative; cursor: crosshair; }
.bc-vis-num .bcv-trend svg { pointer-events: none; }
.bcv-cursor {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(23,23,26,0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 2;
}
.bcv-cursor-dot {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 99px;
  background: var(--color-accent-positive);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,128,96,0.22), 0 4px 10px -3px rgba(0,128,96,0.35);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease;
  z-index: 3;
}
.bc-vis-num .bcv-trend.is-hover .bcv-cursor,
.bc-vis-num .bcv-trend.is-hover .bcv-cursor-dot { opacity: 1; }
.bc-vis-num .bcv-trend.is-hover { cursor: ew-resize; }

/* While scrubbing, dim the area/spark so the cursor reads stronger */
.bc-vis-num .bcv-trend.is-hover .bcv-area { opacity: 0.55; }

/* =========================================================
   Interactive — break-even scrubber (pc-3)
   ========================================================= */
.bcvbe-canvas { cursor: ew-resize; }
.bcvbe-canvas.is-hover svg { pointer-events: none; }
.bcvbe-readout { transition: left 120ms cubic-bezier(0.16, 1, 0.3, 1); }
.bcvbe-today    { transition: left 120ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Pulse the today marker so it reads as the "live" position */
.bcvbe-today-dot {
  animation: bcvbeDotPulse 2.2s ease-in-out infinite;
}
/* Subtle hint hover ring */
.bcvbe-canvas:hover .bcvbe-readout {
  box-shadow: 0 8px 20px -8px rgba(23,23,26,0.22);
}

/* =========================================================
   Interactive — pc-4 sequential bars
   ========================================================= */
/* The base track i is now driven by --target-w (set by .is-loaded).
   This avoids fighting the original (and reduced-motion) rules that
   already specify width directly. */
.bcvw-chart .bcvw-row .track i {
  animation: none !important;
  width: var(--target-w, 0) !important;
  transition: width var(--dur, 2.2s) cubic-bezier(0.22, 1, 0.36, 1);
}
.bcvw-chart .bcvw-row .track i.is-loaded {
  --target-w: var(--w);
}

/* All bars hidden until cued */
.bcvw-row .val { opacity: 0; transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(-6px); }
.bcvw-row.is-revealed .val { opacity: 1; transform: translateX(0); }

/* Default bar colors: the OLD-way rows should be red */
.bcvw-row:not(.bcvw-hi) .track {
  background: rgba(215,44,13,0.05);
  border-color: rgba(215,44,13,0.18);
}
.bcvw-row:not(.bcvw-hi) .track i {
  background: linear-gradient(90deg, #f1644b, #D72C0D);
  box-shadow: 0 0 0 1px rgba(215,44,13,0.18), 0 0 10px rgba(215,44,13,0.18);
}
.bcvw-row:not(.bcvw-hi) .val { color: var(--color-destructive); font-weight: 700; }
.bcvw-row:not(.bcvw-hi) .lab svg { color: var(--color-destructive); opacity: 0.65; }

/* The nouz row "instant" emphasis when revealed */
.bcvw-row.bcvw-hi.is-revealed .track i {
  transition: width 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bcvw-row.bcvw-hi.is-revealed {
  animation: nouzShake 0.6s 0.05s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes nouzShake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-3px); }
  30%  { transform: translateX(4px); }
  45%  { transform: translateX(-3px); }
  60%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
.bcvw-row.bcvw-hi.is-revealed .val { animation: nouzPop 0.45s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes nouzPop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}


  .bcv-spark, .bcv-area, .bcv-dot,
  .bcvs-sheet, .bcvs-flow-dot, .bcvs-grid > .err,
  .bcvs-card::after, .bcvs-card-ok .d, .bcvs-card-bar i,
  .bcvb-bar, .bcvb-bar em, .bcvb-bar-here .bcvb-flag, .bcvb-bar-here::after,
  .bcvw-row .track i, .bcvw-pulse, .bcv-vis-num .bcv-live .dot {
    animation: none !important;
  }
  .bc-vis-num .bcv-spark { stroke-dashoffset: 0; }
  .bc-vis-num .bcv-area, .bc-vis-num .bcv-dot { opacity: 1; }
  .bcvs-card-bar i { width: 100%; }
  .bcvw-row .track i { width: var(--w); }
  .bcvb-bar { transform: scaleY(1); }
  .bcvb-bar em, .bcvb-bar-here .bcvb-flag, .bcvb-bar-here::after { opacity: 1; }
  .bc-vis-num .bcv-bd-row { opacity: 1; transform: none; }
  .bc-vis-num .bcv-bd-bar i { width: var(--w); }
  .bc-vis-num .bcv-wb { height: var(--h); }
}