/* ===========================================================================
   SolutionsDataHub -- 仕組み v4: layer diagram + beams.
   The core is the product's own words, a データ活用レイヤー: a rounded layer
   with 4 tiers that the data passes THROUGH. Two drawings share every class
   here: .dh-map-h (sources left, people right, exits under the layer) and
   .dh-map-v (top to bottom).
   Navy stage with a faint spreadsheet grid (the page's identity), light layer;
   every colour is a custom property on .dh-map.
   Beam = one light per wire with a fading tail: 3 strokes (tail / mid / head)
   of different dash length share one clock, heads aligned
   (offset L -> L - 1.45 over pathLength 1, dash gap 3 = never wraps). Each wire
   rests between runs (55% travel / 45% rest). v6.1: one wave read in one
   direction (Phong 2026-10-05: "A nối B thì tia chạy A→B"): every source at
   0s, every way out (利用者, 出口) at 1.8s via --d. Runs only with html.dh-motion AND
   .dh-map.is-on (datahub-map.js: >= 15% on screen). Only stroke-dashoffset
   and opacity animate.
   =========================================================================== */

.dh-map {
  --stage: linear-gradient(rgba(143, 201, 245, 0.06) 1px, transparent 1px) 0 0 / 100% 24px,
           linear-gradient(90deg, rgba(143, 201, 245, 0.06) 1px, transparent 1px) 0 0 / 64px 100%,
           radial-gradient(120% 90% at 50% 45%, #12345A 0%, #0B2036 70%);
  --wire: rgba(143, 201, 245, 0.3); --card: #10304F; --card-line: rgba(143, 201, 245, 0.18); --t: #FFFFFF; --s: #A9BED2; --cap: #A9BED2;
  --tile: rgba(143, 201, 245, 0.14); --ic: #8FC9F5; --tile-sheet: rgba(62, 168, 116, 0.18); --ic-sheet: #7FD3A8; --chip: rgba(143, 201, 245, 0.12); --chip-t: #D2DEEA;
  --layer: #F7FBFF; --layer-line: #8FC9F5; --lt: #102A43; --ls: #195C91; --tier: #FFFFFF; --tier-line: #D5E5F3;
  --tier-lit: #DDEEFC; --tic: #E9F4FD; --tico: #1B6FB3; --tt: #102A43; --ts: #5A6B7C; --mark: #1B6FB3;
  --beam-tail: #2C7FC0; --beam-mid: #8FC9F5; --beam-head: #FFFFFF;
  margin-top: clamp(28px, 3vw, 44px);
}
.dh-map-fig { overflow-x: auto; padding: clamp(20px, 2.6vw, 36px); border-radius: 24px; background: var(--stage); }
.dh-map-fig > svg { display: block; width: 100%; height: auto; }
/* two drawings of one map: the wide one only where its 12.5-unit text renders
   at >= 12px (drawing ~1070px wide from 1200px), the top-to-bottom one below,
   capped so its text stays a sane size (v6, 2026-10-05: was 1024px = 9.2px) */
.dh-map-fig > .dh-map-h { min-width: 1000px; }
.dh-map-fig > .dh-map-v { display: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 1199px) {
  .dh-map-fig > .dh-map-h { display: none; }
  .dh-map-fig > .dh-map-v { display: block; }
}
@media (max-width: 599px) { .dh-map-fig { padding: 14px; border-radius: 20px; } }

/* ---- nodes ------------------------------------------------------------------ */
.dh-map-cap { fill: var(--cap); }
.dh-map-wire path { stroke: var(--wire); stroke-width: 1.5; }
.dh-map-card { fill: var(--card); stroke: var(--card-line); }
.dh-map-tile { fill: var(--tile); }
.dh-map-tile--sheet { fill: var(--tile-sheet); }
.dh-map svg svg { overflow: visible; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dh-map-ic { stroke: var(--ic); }
.dh-map-ic--sheet { stroke: var(--ic-sheet); }
.dh-map-t { fill: var(--t); }
.dh-map-s { fill: var(--s); }
.dh-map-chip { fill: var(--chip); }
.dh-map-ct { fill: var(--chip-t); font-weight: 700; }

/* ---- layer ------------------------------------------------------------------ */
.dh-map-lbg { fill: var(--layer); stroke: var(--layer-line); stroke-width: 1.5; }
.dh-map-mark rect { fill: var(--mark); }
.dh-map-mark path { stroke: var(--layer); stroke-width: 2; }
.dh-map-lt { fill: var(--lt); }
.dh-map-ls { fill: var(--ls); }
.dh-map-tier { fill: var(--tier); stroke: var(--tier-line); }
.dh-map-tierlit { fill: var(--tier-lit); opacity: 0; }
.dh-map-tic { fill: var(--tic); }
.dh-map-tico { stroke: var(--tico); }
.dh-map-tt { fill: var(--tt); }
.dh-map-ts { fill: var(--ts); }
.dh-map-lock { stroke: var(--ls); }
.dh-map-lf { fill: var(--ls); }

/* ---- beams ------------------------------------------------------------------ */
.dh-map-beams { opacity: 0; transition: opacity 0.5s var(--ease-soft); }
.dh-map-beam path { stroke-linecap: round; stroke-dasharray: var(--L) 3; stroke-dashoffset: var(--L); }   /* --L = dash length; keyframes below repeat it */
.dh-map-beam .t { --L: 0.4; stroke: var(--beam-tail); stroke-width: 7; opacity: 0.22; }
.dh-map-beam .m { --L: 0.18; stroke: var(--beam-mid); stroke-width: 4; opacity: 0.75; }
.dh-map-beam .h { --L: 0.04; stroke: var(--beam-head); stroke-width: 5; }
html.dh-motion .dh-map.is-on .dh-map-beams { opacity: 1; }
html.dh-motion .dh-map.is-on .dh-map-beam .t { animation: dh-map-beam-t 6.4s var(--ease-soft) var(--d, 0s) infinite; }
html.dh-motion .dh-map.is-on .dh-map-beam .m { animation: dh-map-beam-m 6.4s var(--ease-soft) var(--d, 0s) infinite; }
html.dh-motion .dh-map.is-on .dh-map-beam .h { animation: dh-map-beam-h 6.4s var(--ease-soft) var(--d, 0s) infinite; }
html.dh-motion .dh-map.is-on .dh-map-tierlit { animation: dh-map-tier 6.4s var(--ease-soft) calc(var(--k) * 1.6s) infinite; }
/* literal values on purpose: var() inside these keyframes makes Chrome jump instead of interpolate */
@keyframes dh-map-beam-t { 0% { stroke-dashoffset: 0.4; } 55%, 100% { stroke-dashoffset: -1.05; } }
@keyframes dh-map-beam-m { 0% { stroke-dashoffset: 0.18; } 55%, 100% { stroke-dashoffset: -1.27; } }
@keyframes dh-map-beam-h { 0% { stroke-dashoffset: 0.04; } 55%, 100% { stroke-dashoffset: -1.41; } }
/* the phone's long wire DATA HUB -> 出口 (gen-map.py LONG_PL = 1.68 x a normal wire):
   pathLength 1.68 keeps its light the size of the others; it travels 1.68 + 0.45 in
   81% of the cycle = the same speed (74 units/s). Change both numbers together. */
.dh-map-beam--long path { stroke-dasharray: var(--L) 4; }
html.dh-motion .dh-map.is-on .dh-map-beam--long .t { animation-name: dh-map-beam-lt; }
html.dh-motion .dh-map.is-on .dh-map-beam--long .m { animation-name: dh-map-beam-lm; }
html.dh-motion .dh-map.is-on .dh-map-beam--long .h { animation-name: dh-map-beam-lh; }
@keyframes dh-map-beam-lt { 0% { stroke-dashoffset: 0.4; } 81%, 100% { stroke-dashoffset: -1.73; } }
@keyframes dh-map-beam-lm { 0% { stroke-dashoffset: 0.18; } 81%, 100% { stroke-dashoffset: -1.95; } }
@keyframes dh-map-beam-lh { 0% { stroke-dashoffset: 0.04; } 81%, 100% { stroke-dashoffset: -2.09; } }
@keyframes dh-map-tier { 0%, 100% { opacity: 0; } 12%, 22% { opacity: 1; } 40% { opacity: 0; } }

.dh-mech-note { margin: 14px 0 0; max-width: 52em; font-size: 14px; line-height: 1.9; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .dh-map-beams { display: none; }
  .dh-map-tierlit { animation: none !important; }
}