/* Loading screen (homepage, once per visit; markup in partials/loader.html).
   Timeline, ~5s: the feed tank fills, liquid runs tank -> pump -> heat exchanger -> reactor
   (agitator spins) -> separator -> product + recycle streams, then the screen fades out. */
html.is-loading { overflow: hidden; }
.loader { display: none; }
html.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  padding: 24px 4vw;
  background: var(--page-bg);
  color: var(--text);
  animation: loaderWipe 1.8s cubic-bezier(.7,0,.3,1) 4.75s forwards;
}
/* exit: the diagram and progress lift away, then the whole screen slides up like a curtain;
   its glowing accent edge (just below the screen until it moves) shows the lift even though
   the curtain and the page share a background color */
@keyframes loaderWipe { to { transform: translateY(-100%); visibility: hidden; } }
html.is-loading .loader::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 24px 4px rgba(var(--accent-rgb), 0.55);
}
html.is-loading .loader > * { animation: loaderLift 0.55s cubic-bezier(.5,0,.75,0) 4.5s forwards; }
@keyframes loaderLift { to { opacity: 0; transform: translateY(-48px); } }

/* set like the "Jin Lee" on the welcome page: Lora, bold, in the accent color */
.loader { font-family: Lora, Georgia, serif; }
.loader-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 700;
  color: var(--accent-text-lg);
}
.loader-title span { color: var(--muted); font-size: 0.5em; font-weight: 400; letter-spacing: 0.04em; }

.pfd { width: min(100%, 1250px); max-height: 66vh; overflow: visible; }
.pfd-lines, .pfd-pipes {
  fill: none;
  stroke: var(--text);
  stroke-width: 5;
  stroke-linejoin: round;
}
.pfd marker path { fill: var(--text); }
.pfd-lines .tube { stroke-width: 3; opacity: 0.7; }
.pfd-labels text {
  fill: var(--text);
  font-family: Lora, Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  text-anchor: middle;
}

/* liquid */
.level, .pump-fill { fill: var(--accent); }
.level {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: levelUp var(--t) cubic-bezier(.3,.6,.3,1) var(--d) forwards;
}
@keyframes levelUp { to { transform: scaleY(var(--level)); } }
.pump-fill { opacity: 0; animation: pumpFill 0.3s ease var(--d) forwards; }
@keyframes pumpFill { to { opacity: 0.85; } }

.pfd-flow path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 11;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: flow var(--t) linear var(--d) forwards;
}
@keyframes flow { to { stroke-dashoffset: 0; } }

/* agitator: blades swing through the shaft like a spinning impeller seen side-on */
.impeller {
  transform-box: view-box;
  transform-origin: 1294px 655px;
  animation: impeller 0.55s ease-in-out var(--d) infinite;
}
@keyframes impeller { 50% { transform: scaleX(-1); } }

.loader-progress { width: min(100%, 520px); text-align: center; }
.loader-progress p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.loader-pct { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.loader-bar {
  height: 3px;
  border-radius: 3px;
  background: rgba(var(--overlay-rgb), 0.12);
  overflow: hidden;
}
.loader-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}