/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Start page. Every discipline is drawn as a small network in its own idiom: a source symbol,
   the distribution and one branch per tool with a terminal unit (radiator, diffuser, wall unit, tap).
   Everything is still. Hovering or focusing a ready tool opens its valve or damper, starts the source
   and lets the medium run from the source to the terminal (feedback, not decoration).
   The geometry is built in assets/js/home.js, which also sets --row, --head and --net. */

.home-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 72px) var(--gutter) var(--sp-7);
  display: grid;
  gap: var(--sp-6);
}

.home-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.home-actions { display: flex; align-items: center; gap: var(--sp-2); }
.wordmark {
  font-family: var(--font-sans);
  font-stretch: var(--stretch-brand);
  font-weight: 600;
  color: var(--text-strong);
  font-size: var(--fs-3xl);
  line-height: 0.92;
  letter-spacing: -0.015em;
}

/* ---- layout ---------------------------------------------------------------- */

.disciplines { display: grid; gap: var(--sp-6) var(--sp-7); }
@media (min-width: 880px) { .disciplines { grid-template-columns: 1fr 1fr; } }

.discipline { position: relative; min-width: 0; }
.net { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

.discipline-name {
  height: var(--head);
  display: flex;
  align-items: center;
  padding-left: 60px;
  font-stretch: var(--stretch-brand);
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.tools { list-style: none; margin: 0; padding: 0; }
.tool > a, .tool > div {
  height: var(--row);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-left: calc(var(--net) + var(--sp-4));
  color: inherit;
  text-decoration: none;
}
.tool-name {
  font-stretch: var(--stretch-brand);
  font-weight: 600;
  color: var(--text-strong);
  font-size: var(--fs-xl);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.is-placeholder .tool-name { color: var(--text-muted); }

.is-ready a:hover .tool-name, .is-ready a:focus-visible .tool-name { color: var(--primary); }
.is-ready a:focus-visible { outline: none; }
.is-ready a:focus-visible .tool-name { text-decoration: underline; }

@media (max-width: 520px) {
  .tool-name { font-size: var(--fs-lg); }
}

/* ---- tools without a discipline: tiles, centred, wrapping ------------------------- */

.general-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); padding-top: var(--sp-2); }
.general-tools[hidden] { display: none; }
.gtile {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 200px; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface);
  color: var(--text-muted); text-decoration: none;
}
.gtile.is-ready:hover, .gtile.is-ready:focus-visible { border-color: var(--primary); color: var(--primary); }
.gtile.is-ready:hover .tool-name, .gtile.is-ready:focus-visible .tool-name { color: var(--primary); }
.gtile.is-ready:focus-visible { outline: none; }
.gtile.is-ready:focus-visible .tool-name { text-decoration: underline; }
.gtile.is-placeholder .tool-name { color: var(--text-muted); }

/* ---- drawing ---------------------------------------------------------------- */

.net {
  --line: var(--text-muted);          /* built parts */
  --line-placeholder: var(--border-strong);
  --flow: var(--primary);             /* moving medium, running source, reached terminal */
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.net .is-placeholder { --line: var(--line-placeholder); }

.pipe { stroke: var(--line); stroke-width: 2; }
.manifold { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.duct-wall { stroke: var(--line); stroke-width: 20; }
.duct-in { stroke: var(--bg); stroke-width: 16; }

.term { stroke: var(--line); stroke-width: 2; transition: stroke 0.2s; }
.term rect { fill: var(--bg); }
.term path { stroke-width: 1.5; }
.term .tap-body { fill: var(--bg); stroke-width: 2; stroke-linejoin: round; }

.valve { stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; fill: var(--line); transition: fill 0.2s; }
.damper, .flap, .lever { stroke: var(--line); stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transition: transform 0.25s ease-out; }
.damper { transform-origin: center; }
.damper circle { fill: var(--bg); stroke-width: 1.5; }
.lever { stroke-width: 2.5; transform-origin: right center; }

/* source symbol */
.src-ring { fill: var(--bg); stroke: var(--text); stroke-width: 2; transition: stroke 0.2s; }
.src { stroke: var(--text); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 0.2s, fill 0.2s; }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 0.7s linear infinite paused; }
.fan-hub { fill: var(--bg); }
.flake { animation-duration: 6s; }
.flame { transform-box: fill-box; transform-origin: center bottom; }

/* medium: revealed along its path from the source (mask), then moving */
.reveal { stroke: white; stroke-width: 6; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 0s 0.2s; } /* mask luminance, not a colour */
.flow { stroke: var(--flow); opacity: 0; transition: opacity 0.2s; animation: flow-16 0.35s linear infinite paused; }
.flow-air { stroke-width: 2; stroke-dasharray: 7 9; }
.flow-water { stroke-width: 3; stroke-dasharray: 5 5; animation-name: flow-10; animation-duration: 0.45s; }
.flow-gas { stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 8; animation-name: flow-8; animation-duration: 0.3s; }
.flow-return { animation-direction: reverse; }
.flow.out { stroke-width: 2; }

/* active branch */
.run.is-active .reveal { stroke-dashoffset: 0; transition: stroke-dashoffset var(--reveal) linear; }
.run.is-active .flow { opacity: 1; animation-play-state: running; transition: none; }
.run.is-active .out { transition: opacity 0.2s var(--reveal); }
.run.is-active .valve { fill: var(--bg); }
.run.is-active .damper { transform: rotate(90deg); }
.run.is-active .lever { transform: rotate(25deg); }
.run.is-active .flap { transform: translateY(4px); transition-delay: var(--reveal); }
.run.is-active .term { stroke: var(--flow); transition-delay: var(--reveal); }

.is-on .src-ring, .is-on .src { stroke: var(--flow); }
.is-on .spin { animation-play-state: running; }
.is-on .flame { fill: var(--flow); animation: flicker 0.5s ease-in-out infinite alternate; }
.is-on .drop { fill: var(--flow); animation: drip 0.9s ease-in infinite; }
.drop-reflection { fill: none; }
.is-on .drop-reflection { stroke: var(--bg); }

@keyframes flow-16 { to { stroke-dashoffset: -16; } }
@keyframes flow-10 { to { stroke-dashoffset: -10; } }
@keyframes flow-8 { to { stroke-dashoffset: -8; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flicker { to { transform: scale(0.94, 1.06); } }
@keyframes drip {
  0% { transform: translateY(-1px); opacity: 0; }
  25% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(4px); opacity: 0; }
}