/* Illustrations — how the site's own vector drawings are painted.
   The drawings themselves are printed by inc/illustrations.php: a system
   diagram, a water-source cross-section and the line icons. Nothing here is
   loaded as a file, so a drawing takes its colours from the tokens and costs no
   extra request.

   A diagram prints two arrangements of the same picture and this sheet shows
   one at a time, so a narrow screen gets a stacked flow rather than a shrunken
   one. Its motion is CSS only: the links draw themselves, a highlight travels
   along the energy path, and every moving part stops under reduced motion. */

.diagram{
  margin:0;
}

.diagram__svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.diagram__svg--stack{display:none}

/* A variant whose picture is a photograph rather than a drawing: the image
   fills the same frame and sits under the same line, so the section keeps its
   rhythm and only the picture changes. */
.diagram__photo{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-md);
}

/* ------------------------------------------------------------------ Nodes -- */
.diagram__node{
  opacity:0;
  transform:translateY(var(--reveal-shift));
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity var(--transition-arrive), transform var(--transition-arrive);
  transition-delay:var(--node-delay,0ms);
}

.diagram.is-in .diagram__node{opacity:1;transform:none}

.diagram__box{
  fill:var(--ill-panel);
  stroke:var(--color-line);
  stroke-width:1.5;
  transition:stroke var(--transition-mid), fill var(--transition-mid);
}

.diagram__icon{color:var(--ill-structure);stroke:currentColor}

.diagram__label{
  fill:var(--color-heading);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
}

.diagram__note{
  fill:var(--color-muted);
  font-family:var(--font-body);
  font-size:12px;
}

/* The drive is the part the page is about, so it is the one filled node. */
.diagram__node[data-tone="drive"] .diagram__box{fill:var(--ill-drive-pale);stroke:var(--ill-drive)}
.diagram__node[data-tone="drive"] .diagram__icon{color:var(--ill-drive)}
.diagram__node[data-tone="energy"] .diagram__icon{color:var(--ill-energy-line)}
.diagram__node[data-tone="water"] .diagram__icon{color:var(--ill-water)}
.diagram__node[data-tone="quiet"] .diagram__box{stroke-dasharray:6 4;fill:var(--color-pale)}
.diagram__node[data-tone="quiet"] .diagram__icon{color:var(--ill-structure-soft)}
.diagram__node[data-tone="keep"] .diagram__box{fill:var(--color-pale)}
.diagram__node[data-tone="keep"] .diagram__icon{color:var(--ill-structure-soft)}

/* ------------------------------------------------------------------ Links -- */
/* Every link is normalised with pathLength="100", so one dash scale drives a
   link of any length: the line draws itself in, and a travelling highlight
   reads as a glow because a wide faint copy of the path sits under it. */
.diagram__line{
  fill:none;
  stroke:var(--color-line);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .55s ease-out;
  transition-delay:var(--link-delay,0ms);
}

.diagram.is-in .diagram__line{stroke-dashoffset:0}

.diagram__head{
  stroke:none;
  fill:var(--color-line);
  opacity:0;
  transition:opacity var(--transition-mid);
  transition-delay:var(--link-delay,0ms);
}

.diagram.is-in .diagram__head{opacity:1}

.diagram__link[data-kind="energy"] .diagram__line{stroke:var(--ill-energy-line)}
.diagram__link[data-kind="energy"] .diagram__head{fill:var(--ill-energy-line)}
.diagram__link[data-kind="water"] .diagram__line{stroke:var(--ill-water)}
.diagram__link[data-kind="water"] .diagram__head{fill:var(--ill-water)}
.diagram__link[data-kind="ac"] .diagram__line{stroke:var(--ill-structure-soft);stroke-dasharray:6 5;stroke-dashoffset:0}
.diagram__link[data-kind="ac"] .diagram__head{fill:var(--ill-structure-soft)}
.diagram__link[data-kind="data"] .diagram__line{stroke:var(--ill-structure-soft);stroke-width:1.5;stroke-dasharray:3 4;stroke-dashoffset:0}
.diagram__link[data-kind="data"] .diagram__head{fill:var(--ill-structure-soft)}

.diagram__glow,
.diagram__dot{
  fill:none;
  stroke-linecap:round;
  stroke-width:6;
  stroke-dasharray:10 90;
  stroke-dashoffset:100;
  opacity:0;
}

.diagram__glow{stroke-width:12;stroke:var(--ill-energy-line);opacity:0}
.diagram__dot{stroke-width:6;stroke:var(--ill-energy-line)}

.diagram__link[data-kind="water"] .diagram__glow,
.diagram__link[data-kind="water"] .diagram__dot{stroke:var(--ill-water)}

.diagram.is-in .diagram__glow{
  opacity:.16;
  animation:hober-flow-pulse 3.2s ease-in-out infinite;
  animation-delay:var(--flow-delay,0ms);
}

.diagram.is-in .diagram__dot{
  opacity:1;
  animation:hober-flow-dash 3.2s linear infinite;
  animation-delay:var(--flow-delay,0ms);
}

.diagram__caption{
  margin:16px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--color-muted);
}

/* The diagram sits in the same pale frame the site's pictures use, so a section
   that mixes a photograph and a drawing keeps one rhythm. */
.diagram-panel{
  padding:clamp(20px,3vw,36px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-pale);
}

.diagram-panel--plain{border:0;background:transparent;padding:0}

/* ---------------------------------------------------------- Water scenes -- */
/* A cross-section of where the water comes from. It is a drawing, not a site
   photograph: it shows the arrangement the page is talking about, and every
   label it carries is printed as text beside it as well. */
.scene{margin:0}
.scene__svg{display:block;width:100%;height:auto}
.scene__ground{fill:var(--color-pale);stroke:var(--color-line)}
.scene__water{fill:var(--ill-water-pale);stroke:none}
.scene__metal{fill:#fff;stroke:var(--ill-structure)}
.scene__wall{fill:none;stroke:var(--ill-structure);stroke-width:2}
.scene__panel{fill:var(--color-sun-pale);stroke:var(--ill-structure)}
.scene__sun{fill:none;stroke:var(--ill-energy-line);stroke-width:2}
.scene__pipe{fill:none;stroke:var(--ill-structure);stroke-width:2;stroke-linecap:round}
.scene__waterline{fill:none;stroke:var(--ill-water);stroke-width:1.5;stroke-dasharray:5 5}
.scene__flow{fill:none;stroke:var(--ill-water);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 6}
.scene__label{fill:var(--color-muted);font-family:var(--font-body);font-size:11px}
.scene__caption{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--color-muted)}

/* The drawing takes the same pale panel the diagrams sit in, so a page can put
   a photograph, a diagram and a cross-section in one row of cards. */
.scene-panel{
  padding:clamp(16px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-pale);
}

.scene-panel--plain{border:0;background:transparent;padding:0}

/* ------------------------------------------------------------------ Icons -- */
.icon{display:inline-block;vertical-align:middle;color:inherit}
.icon--sun{color:#d99b1f}
.icon--water{color:var(--ill-water)}
.icon--drive{color:var(--ill-drive)}

/* ------------------------------------------------------------- Responsive -- */
@media (max-width:820px){
  .diagram__svg--wide{display:none}
  .diagram__svg--stack{display:block}
}