/* コンテナ単位の見た目設定 */
.js-diagonal-flow {
  /* パレット（カンマ区切り） */
  --dsf-palette: #BE1A20, #323232;

  /* Flow / Static の線幅 */
  --dsf-flow-stroke-width: 2px;
  --dsf-static-stroke-width: 2px;

  /* Flow hover の最大拡大率 */
  --dsf-hover-scale: 1.10;

  position: relative;
  overflow: hidden;
}

/* 描画ルート */
.dsf-root {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* レイヤー共通 */
.dsf-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* レイヤー前後関係 */
.dsf-layer--flow-far  { z-index: 10; }
.dsf-layer--flow-mid  { z-index: 20; }
.dsf-layer--blink     { z-index: 25; }
.dsf-layer--flow-near { z-index: 30; }
.dsf-layer--static    { z-index: 40; }

/* アイテム共通 */
.dsf-item {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

/* SVG 共通 */
.dsf-svg {
  display: block;
  overflow: visible;
}

/* Flow の hit 判定 */
.dsf-item--flow {
  pointer-events: auto;
}

/* use は塗り／線のある部分だけでヒット */
.dsf-item--flow use {
  pointer-events: visiblePainted;
}

/* Flow 内部要素（transform / filter / opacity 対象） */
.dsf-flow-inner {
  transform: translateZ(0) scale(1);
  will-change: transform, filter, opacity;
}

/* Blink はインタラクションなし */
.dsf-item--blink,
.dsf-item--blink .dsf-svg,
.dsf-item--blink * {
  pointer-events: none;
}

/* Static はインタラクションなし */
.dsf-item--static,
.dsf-item--static .dsf-svg,
.dsf-item--static * {
  pointer-events: none;
}