/* ============================================================
   ZAR ENGINE — Industrial Animation System
   Premium, controlled, engineering-grade motion.
   All durations deliberate. No cartoon. No heavy libs.
   ============================================================ */

:root {
  --zar-dur-micro: 180ms;
  --zar-dur-card: 260ms;
  --zar-dur-stage: 620ms;
  --zar-dur-seq: 980ms;
  --zar-ease: cubic-bezier(.22,.95,.32,1);
  --zar-ease-out: cubic-bezier(.16,1,.3,1);
}

/* Global reduced motion — static states, minimal movement */
@media (prefers-reduced-motion: reduce) {
  .zar-pipe, .zar-packet, .zar-node, .zar-gauge-fill, .zar-sludge,
  .zar-process-stage, .zar-flow-line, .zar-flow-arrow,
  .zar-cap-net .edge, .zar-cap-net .node,
  .zar-timeline-bar, .zar-pipeline .flow {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .zar-reveal, .zar-stagger-grid .zar-card { opacity: 1; transform: none; }
}

/* ============================================================
   1. PROCESS PIPELINE (SVG + CSS)
   ============================================================ */
.zar-pipeline {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 14px;
  overflow: hidden;
}
.zar-pipeline svg { width: 100%; height: auto; display: block; }
.zar-pipe {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke .2s ease;
}
.zar-pipe.active { stroke: var(--brand); }
.zar-flow {
  fill: none;
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 18 12;
  animation: zarFlowMove 920ms linear infinite;
}
@keyframes zarFlowMove {
  to { stroke-dashoffset: -30; }
}
.zar-packet {
  fill: var(--brand);
  opacity: .92;
  transition: opacity .2s ease;
}
.zar-packet.dim { opacity: .18; }

.zar-stage-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.zar-stage-label.active { color: var(--brand-2); }

.zar-pipeline-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.zar-pipeline-controls .chip {
  font-size: .72rem;
  font-weight: 800;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.zar-pipeline-controls .chip.active,
.zar-pipeline-controls .chip:hover {
  border-color: var(--brand);
  color: var(--brand-2);
}

/* ============================================================
   2. CAPABILITY / KNOWLEDGE NETWORK
   ============================================================ */
.zar-cap-net {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  user-select: none;
}
.zar-cap-net svg { display: block; width: 100%; height: auto; }
.zar-cap-net .edge {
  stroke: var(--line);
  stroke-width: 2;
  transition: stroke .2s ease, stroke-width .2s ease;
}
.zar-cap-net .edge.active {
  stroke: var(--brand);
  stroke-width: 3;
}
.zar-cap-net .node {
  cursor: pointer;
  transition: transform .2s var(--zar-ease), filter .2s;
}
.zar-cap-net .node circle {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 2;
  transition: stroke .2s, fill .2s;
}
.zar-cap-net .node.active circle {
  stroke: var(--brand);
  fill: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.zar-cap-net .node text {
  font-size: 10px;
  font-weight: 800;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.zar-cap-net .node.center circle { stroke-width: 3; }
.zar-cap-net .detail {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--muted);
  min-height: 72px;
}
.zar-cap-net .detail b { color: var(--text); display: block; margin-bottom: 4px; }

/* ============================================================
   3. TANK CROSS-SECTION (Sludge Extraction)
   ============================================================ */
.zar-tank {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  position: relative;
}
.zar-tank svg { width: 100%; max-width: 520px; display: block; margin: 0 auto; }
.zar-sludge {
  transition: height 820ms var(--zar-ease), y 820ms var(--zar-ease);
}
.zar-tank .legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 10px;
  font-size: .72rem;
  color: var(--muted);
}
.zar-tank .legend span { display: inline-flex; align-items: center; gap: 6px; }
.zar-tank .legend i { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
.zar-tank .legend .sludge { background: #3f4b3a; }
.zar-tank .legend .liquid { background: #6aa8d8; }

.zar-tank-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.zar-tank .stat {
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}

/* ============================================================
   4. WATER TREATMENT INTERACTIVE FLOW
   ============================================================ */
.zar-water {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 16px;
}
.zar-water-source {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.zar-water-source button {
  font-size: .74rem;
  font-weight: 800;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.zar-water-source button.active { border-color: var(--brand); color: var(--brand-2); }

.zar-water-path {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}
.zar-water-stage {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  font-size: .78rem;
  transition: border-color .2s, background .2s;
  position: relative;
  overflow: hidden;
}
.zar-water-stage.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}
.zar-water-stage .label { font-weight: 800; letter-spacing: .04em; }
.zar-water-stage .sub { font-size: .64rem; color: var(--muted); margin-top: 2px; }

/* ============================================================
   5. RESULT GAUGE + ANIMATED OUTPUT
   ============================================================ */
.zar-gauge {
  width: 158px;
  height: 158px;
  margin: 0 auto;
  position: relative;
}
.zar-gauge svg { transform: rotate(-90deg); }
.zar-gauge .bg { fill: none; stroke: var(--line); stroke-width: 11; }
.zar-gauge .fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 820ms var(--zar-ease);
}
.zar-gauge .value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 900;
}
.zar-gauge .value .num { font-size: 1.6rem; line-height: 1; }
.zar-gauge .value .unit { font-size: .68rem; color: var(--muted); letter-spacing: .06em; }

/* ============================================================
   6. BEFORE / AFTER SLIDER (technical)
   ============================================================ */
.zar-compare {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  touch-action: none;
}
.zar-compare img { display: block; width: 100%; }
.zar-compare .after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.zar-compare .handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.zar-compare .handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* ============================================================
   7. INTERACTIVE ORG MAP (ZAR Group)
   ============================================================ */
.zar-org {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
}
.zar-org svg { display: block; width: 100%; height: auto; }
.zar-org .node { cursor: pointer; }
.zar-org .node circle { transition: stroke .2s, fill .2s; }
.zar-org .node.active circle { stroke: var(--brand); }
.zar-org .node text { font-size: 9.5px; font-weight: 800; fill: var(--text); text-anchor: middle; pointer-events: none; }
.zar-org .edge { stroke: var(--line); stroke-width: 1.5; transition: stroke .2s; }
.zar-org .edge.active { stroke: var(--brand); }
.zar-org-detail {
  margin-top: 12px;
  font-size: .84rem;
  min-height: 62px;
  color: var(--muted);
}

/* ============================================================
   8. TIMELINE (scroll progress)
   ============================================================ */
.zar-timeline {
  position: relative;
  padding-left: 38px;
}
.zar-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--line);
}
.zar-timeline .milestone {
  position: relative;
  margin-bottom: 22px;
}
.zar-timeline .dot {
  position: absolute;
  left: -2px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--line);
  transition: border-color .3s, background .3s;
}
.zar-timeline .milestone.on .dot {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.zar-timeline .year { font-weight: 900; letter-spacing: .04em; }
.zar-timeline .body { margin-top: 2px; }

/* ============================================================
   9. NEURALOPS / KNOWLEDGE PULSE (real data only)
   ============================================================ */
.zar-pulse-net {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
}
.zar-pulse-net svg { width: 100%; height: auto; }
.zar-pulse-net .core { fill: var(--brand); }
.zar-pulse-net .ring {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  opacity: .35;
  animation: zarRing 2.8s ease-out infinite;
}
@keyframes zarRing {
  0% { transform: scale(0.6); opacity: .5; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.zar-pulse-net .packet {
  fill: var(--brand);
  opacity: .9;
}

/* ============================================================
   10. SMART ROUTE VISUAL (Contact / Intent)
   ============================================================ */
.zar-route {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.zar-route-path {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.zar-route-step {
  font-size: .78rem;
  font-weight: 800;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: all .2s ease;
}
.zar-route-step.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand-2);
}
.zar-route-step.done { opacity: .6; }

/* ============================================================
   11. MICRO INTERACTIONS (cards, filters, tabs)
   ============================================================ */
.zar-card { transition: transform var(--zar-dur-card) var(--zar-ease), box-shadow var(--zar-dur-card) ease, border-color .2s; }
.zar-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); border-color: var(--brand); }

.zar-tab {
  padding: 6px 14px;
  border-bottom: 2px solid transparent;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .15s;
}
.zar-tab.active { border-bottom-color: var(--brand); color: var(--brand-2); }

.filter-chip {
  transition: transform .12s ease, border-color .12s;
}
.filter-chip:active { transform: scale(0.985); }

/* ============================================================
   12. PROJECT / ARTICLE CARD REFINEMENT
   ============================================================ */
.project-card img, .insight-card img, .case-image img {
  transition: transform 620ms var(--zar-ease);
}
.project-card:hover img, .case:hover img { transform: scale(1.035); }

/* ============================================================
   13. MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 860px) {
  .zar-pipeline, .zar-cap-net, .zar-org, .zar-water, .zar-tank {
    padding: 12px 10px;
  }
  .zar-water-path { grid-template-columns: repeat(2, 1fr); }
  .zar-cap-net svg, .zar-org svg { max-height: 320px; }
}