/* ==========================================================================
   MEA Ecosystem — Blood Flow Explorer
   Menggantikan Galaxy Explorer (orbit fisika berat). Semua sel adalah
   elemen SVG native (<circle> + <animateMotion>) yang berjalan dalam
   sistem koordinat viewBox yang SAMA PERSIS dengan jalur pipa — sehingga
   posisinya selalu presisi di jalur pada ukuran layar berapa pun (desktop
   maupun mobile), tidak seperti versi awal yang memakai <div> HTML dengan
   CSS offset-path (rawan meleset karena beda sistem koordinat dari SVG).

   File terpisah dari landing.css. Dependensi: token-color.css
   ========================================================================== */

.bloodflow-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 500;
  margin: 40px auto 0;
  overflow: hidden;
}

.bloodflow-vessel-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  height: 112%;
  transform: translate(-50%, -50%);
  display: block;
  touch-action: manipulation;
}

/* Sel dekoratif — seragam, redup, sekadar ornamen. Tidak interaktif. */
.bf-cell-deco {
  fill: var(--mea-accent, #3B82F6);
  opacity: 0.35;
  pointer-events: none;
}

/* Sel produk — lebih besar, warna mencolok. Area klik (hit-area) dibuat
   lebih besar dari lingkaran visualnya supaya mudah disentuh di HP. */
.bf-cell-product-hit {
  fill: transparent;
  cursor: pointer;
}

.bf-cell-product-body {
  fill: var(--mea-surface-raised, #1E1E1E);
  stroke: var(--mea-border-strong, #3A3A3A);
  stroke-width: 1.5;
  pointer-events: none;
}

.bf-cell-product-body.is-focused {
  stroke: var(--mea-accent, #3B82F6);
  stroke-width: 2.5;
}

.bf-cell-product-icon {
  stroke: var(--mea-accent, #3B82F6);
  fill: none;
  stroke-width: 1.8;
  pointer-events: none;
}