/* =========================================================
   VRI — ENGINE / 仕組み flow animation (dark band)
   情報ソース → AI集約 → 専門家が再構成 → レポート → 営業/経営企画
   ========================================================= */

.engine { background: var(--ink); color: var(--paper); border-top: var(--line-thick); border-bottom: var(--line-thick); position: relative; overflow: hidden; }
.engine::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--paper) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 100%;
}

.engine__head {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.4rem,5vw,4rem) var(--gutter) 0;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.4rem;
}
.engine__lab { font-family: var(--mono); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--acid); }
.engine__title { font-family: var(--gothic); font-weight: 900; font-size: clamp(1.9rem,4vw,3.2rem); line-height: 1.05; letter-spacing: -.02em; margin-top: 1rem; }
.engine__title b { color: var(--blue); }
.engine__deck { font-family: var(--mincho); font-weight: 700; font-size: clamp(.98rem,1.6vw,1.2rem); line-height: 1.7; color: color-mix(in srgb, var(--paper) 70%, transparent); max-width: 46ch; }
@media (max-width: 760px){ .engine__head { grid-template-columns: 1fr; } }

.engine__stage { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(1.4rem,3vw,2.4rem) var(--gutter) clamp(2.2rem,4vw,3.4rem); }
#engineSvg { display: block; width: 100%; height: auto; overflow: visible; }

/* mobile: keep the diagram legible by enforcing a min width + horizontal swipe */
@media (max-width: 720px){
  .engine__stage { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .engine__stage::before {
    content: "← 横スクロールで全体を表示 →"; display: block; text-align: center;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 50%, transparent); margin-bottom: .7rem;
  }
  #engineSvg { width: 900px; min-width: 900px; }
}

/* ---- SVG element styling ---- */
.eg-conduit { fill: none; stroke: color-mix(in srgb, var(--paper) 34%, transparent); stroke-width: 1.8; }
.eg-flow { fill: none; stroke-width: 2.6; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .95; animation: egflow .85s linear infinite; }
.eg-flow-s { stroke: color-mix(in srgb, var(--paper) 80%, transparent); }
.eg-flow-b { stroke: var(--blue); }
.eg-flow-a { stroke: var(--acid); }
@keyframes egflow { to { stroke-dashoffset: -28; } }
.eg-halo { }
/* Reduce-motion: slow the flow down rather than freezing it entirely */
@media (prefers-reduced-motion: reduce){ .eg-flow { animation-duration: 1.8s; } }
.eg-box { fill: none; stroke: var(--paper); stroke-width: 2; }
.eg-box-fill { fill: color-mix(in srgb, var(--paper) 17%, var(--ink)); }
.eg-node { fill: color-mix(in srgb, var(--paper) 16%, var(--ink)); stroke: var(--paper); stroke-width: 2.4; }
.eg-node-ai { stroke: var(--blue); fill: color-mix(in srgb, var(--blue) 26%, var(--ink)); }
.eg-glow-ai { fill: var(--blue); opacity: 0; }
.eg-glow-acid { fill: var(--acid); opacity: 0; }

.eg-t { font-family: var(--gothic); font-weight: 700; fill: var(--paper); }
.eg-t-big { font-family: var(--gothic); font-weight: 900; fill: var(--paper); }
.eg-t-mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.eg-t-dim { fill: color-mix(in srgb, var(--paper) 55%, transparent); }
.eg-t-acid { fill: var(--acid); }
.eg-t-blue { fill: var(--blue); }

.eg-dot { fill: color-mix(in srgb, var(--paper) 40%, transparent); }
.eg-report-line { stroke: var(--acid); stroke-width: 3; stroke-linecap: square; }
.eg-arrow { fill: color-mix(in srgb, var(--paper) 45%, transparent); }

/* legend under diagram */
.engine__legend { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(2rem,4vw,3rem);
  display: flex; flex-wrap: wrap; gap: 1.6rem; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--paper) 55%, transparent); }
.engine__legend span { display: inline-flex; align-items: center; gap: .5em; }
.engine__legend i { width: 10px; height: 10px; display: inline-block; }
.engine__legend i.s { background: var(--paper); }
.engine__legend i.b { background: var(--blue); }
.engine__legend i.a { background: var(--acid); }