/* =========================================================
   BAOLA INTERACTIVE SYSTEM DEMONSTRATOR
   Responsive Beside Diagram Mode
   ========================================================== */

/* ---------- Variables ---------- */
:root {
  --navy-950: #082b42;
  --navy-900: #0b3d5c;

  --blue-700: #137ebc;
  --blue-600: #1598d1;
  --blue-400: #65cdf6;

  --green-700: #157344;
  --green-600: #1a9958;
  --green-400: #6fda78;
  --green-100: #e4f8e9;

  --red-700: #b4202c;
  --red-600: #d9363f;
  --red-100: #ffe4e5;

  --orange-600: #e98522;

  --ink-950: #142c3c;
  --ink-700: #385365;
  --ink-600: #617483;
  --ink-500: #7a8d9a;

  --line-soft: #dbe7ee;
  --line-mid: #d2e1e9;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.76);
  --canvas: #eaf2f6;

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-floating: 0 18px 50px rgba(10, 48, 72, 0.16);
  --shadow-soft: 0 10px 24px rgba(18, 63, 89, 0.08);

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   BASE
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink-950);
  background:
    radial-gradient(circle at 10% 5%, rgba(101, 205, 246, 0.16), transparent 23%),
    radial-gradient(circle at 93% 12%, rgba(111, 218, 120, 0.12), transparent 22%),
    linear-gradient(150deg, #f6fbfd 0%, var(--canvas) 48%, #f3f8fa 100%);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: #ffffff;
  background: var(--blue-700);
}

:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
}

/* =========================================================
   SECTION / SHELL
   ========================================================== */
.baola-demo-section {
  width: 100%;
  overflow-x: clip;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 1280px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 420px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-700), #0d659b);
  box-shadow: 0 10px 18px rgba(15, 108, 165, 0.18);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong {
  display: block;
  color: var(--navy-950);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.brand-copy p {
  margin: 4px 0 0;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.55;
}

.demo-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* =========================================================
   LAYOUT
   ========================================================== */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  align-items: start;
}

.diagram-card,
.dashboard-card,
.story-card {
  position: relative;
  border: 1px solid rgba(206, 223, 232, 0.92);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(16px);
}

.diagram-card {
  width: 100%;
  overflow: hidden;
}

.dashboard-card,
.story-card {
  padding: 18px;
}

.story-card,
.demo-note {
  display: block;
}

.demo-note {
  margin: 16px 2px 0;
  color: var(--ink-600);
  font-size: 13px;
  line-height: 1.75;
}

/* =========================================================
   PRESENTATION HEADING
   ========================================================== */
.card-heading {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 24px 24px 14px;
  border: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.9) 72%,
      rgba(255, 255, 255, 0) 100%
    );
  pointer-events: none;
}

.card-heading::after {
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-600), var(--green-400));
  content: "";
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.card-heading h1,
.dashboard-card h2,
.story-card h2 {
  margin: 0;
  color: var(--navy-950);
  letter-spacing: -0.035em;
}

.card-heading h1 {
  max-width: 760px;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.08;
}

.card-heading p:not(.eyebrow) {
  max-width: 68ch;
  margin: 12px 0 0;
  color: var(--ink-600);
  font-size: 15px;
  line-height: 1.65;
}

.app-shell.is-running .card-heading,
.app-shell.is-pressure-drop .card-heading,
.app-shell.is-recovering .card-heading,
.app-shell.is-degassing .card-heading,
.app-shell.is-dirt-separation .card-heading,
.app-shell.is-complete .card-heading {
  display: none;
}

/* =========================================================
   DIAGRAM AREA
   ========================================================== */
.diagram-scroll-hint {
  display: none;
  margin: 0 18px 10px;
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.diagram-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 700px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(101, 205, 246, 0.18), transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(111, 218, 120, 0.13), transparent 23%),
    linear-gradient(180deg, #fafdff 0%, #eaf5f8 100%);
}

.diagram-wrap::before,
.diagram-wrap::after {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.diagram-wrap::before {
  top: 16%;
  left: -86px;
  width: 200px;
  height: 200px;
  background: rgba(101, 205, 246, 0.1);
}

.diagram-wrap::after {
  right: 3%;
  bottom: -90px;
  width: 250px;
  height: 250px;
  background: rgba(111, 218, 120, 0.12);
}

.system-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
  transition:
    max-height 0.45s var(--ease-premium),
    transform 0.45s var(--ease-premium);
}

/* Kondisi awal */
.app-shell:not(.is-running):not(.is-pressure-drop):not(.is-recovering):not(.is-degassing):not(.is-dirt-separation):not(.is-complete) .system-svg {
  max-height: 700px;
  transform: translateY(34px);
}

/* Simulasi aktif */
.app-shell.is-running .system-svg,
.app-shell.is-pressure-drop .system-svg,
.app-shell.is-recovering .system-svg,
.app-shell.is-degassing .system-svg,
.app-shell.is-dirt-separation .system-svg,
.app-shell.is-complete .system-svg {
  max-height: 820px;
  transform: translateY(0);
}

/* =========================================================
   MOBILE CALLOUTS
   ========================================================== */
.mobile-callouts {
  display: none;
  gap: 12px;
  padding: 0 18px 18px;
}

.mobile-callout-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(248, 251, 253, 0.96);
}

.mobile-callout-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 999px;
  color: #0a4633;
  background: #71d343;
  font-size: 14px;
  font-weight: 900;
}

.mobile-callout-card h3 {
  margin: 0 0 4px;
  color: var(--navy-950);
  font-size: 15px;
  line-height: 1.35;
}

.mobile-callout-card p {
  margin: 0;
  color: var(--ink-600);
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
   DASHBOARD
   ========================================================== */
.dashboard-card {
  z-index: 2;
  width: 100%;
  overflow: visible;
}

.dashboard-card h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.14;
}

.dashboard-card > p:not(.eyebrow) {
  margin: 10px 0 0;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.6;
}

.pressure-gauge {
  display: grid;
  justify-items: center;
  margin: 18px 0;
  padding: 16px 14px 14px;
  border: 1px solid #dceaf0;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 15%, #ffffff 0%, #eff9fc 72%);
}

.gauge-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border: 12px solid #d6e8ef;
  border-top-color: var(--green-600);
  border-right-color: var(--green-600);
  border-radius: 50%;
  transform: rotate(45deg);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.gauge-ring::before {
  position: absolute;
  width: 102px;
  height: 102px;
  border: 1px solid #e6f0f4;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 7px 15px rgba(35, 86, 111, 0.09);
  content: "";
}

.gauge-ring::after {
  position: absolute;
  top: 18px;
  width: 4px;
  height: 50px;
  border-radius: 20px;
  background: linear-gradient(180deg, #2aae67, #147141);
  box-shadow: 0 2px 4px rgba(10, 76, 43, 0.22);
  content: "";
  transform: rotate(-48deg);
  transform-origin: 50% 58px;
  transition:
    background 0.3s ease,
    transform 0.7s var(--ease-premium);
}

.gauge-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  transform: rotate(-45deg);
}

.gauge-content strong {
  color: var(--navy-900);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.gauge-content span {
  margin-top: 4px;
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 800;
}

.pressure-gauge > p {
  margin: 12px 0 0;
  color: var(--ink-600);
  font-size: 12px;
}

.pressure-gauge > p strong {
  color: var(--green-700);
}

.metric-list {
  display: grid;
  gap: 10px;
}

.metric-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px 10px 14px;
  overflow: hidden;
  border: 1px solid #e0ebf0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.metric-item::before {
  width: 4px;
  height: 18px;
  border-radius: 8px;
  background: var(--green-400);
  content: "";
  flex: 0 0 auto;
}

.metric-item span {
  flex: 1;
  min-width: 0;
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.metric-item strong {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--green-700);
  background: var(--green-100);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.app-shell.is-pressure-drop .metric-item:first-child strong,
.app-shell.is-pressure-drop .metric-item:nth-child(2) strong,
.app-shell.is-pressure-drop .metric-item:nth-child(3) strong {
  color: var(--red-700);
  background: var(--red-100);
}

.app-shell.is-recovering .metric-item:nth-child(2)::before,
.app-shell.is-recovering .metric-item:nth-child(3)::before {
  background: var(--blue-600);
}

.app-shell.is-degassing .metric-item:nth-child(4)::before {
  background: #a57ab5;
}

.app-shell.is-dirt-separation .metric-item:nth-child(5)::before,
.app-shell.is-dirt-separation .metric-item:nth-child(6)::before {
  background: var(--orange-600);
}

/* ---------- Controls ---------- */
.controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}

.control-button {
  min-height: 46px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-700), #0d659b);
  box-shadow: 0 7px 15px rgba(11, 108, 165, 0.2);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.01em;
  transition:
    transform 0.2s var(--ease-premium),
    box-shadow 0.2s ease,
    filter 0.2s ease,
    opacity 0.2s ease;
}

.control-button:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 10px 20px rgba(11, 108, 165, 0.25);
  transform: translateY(-2px);
}

.control-button:active:not(:disabled) {
  transform: translateY(0);
}

.control-button.secondary {
  border-color: #d6e5ec;
  color: #345266;
  background: #f0f6f8;
  box-shadow: none;
}

.control-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

/* =========================================================
   STORY / TIMELINE
   ========================================================== */
.story-card {
  display: grid;
  gap: 16px;
}

.story-copy p:not(.eyebrow) {
  margin: 10px 0 0;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.65;
}

.timeline {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.timeline::-webkit-scrollbar {
  display: none;
}

.timeline-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  border: 1px solid #d6e5ec;
  border-radius: 999px;
  color: var(--ink-700);
  background: #f5fafc;
  font-size: 14px;
  font-weight: 900;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.timeline-step.active,
.timeline-step[aria-current="step"] {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-700), #0d659b);
}

.timeline-step:hover {
  transform: translateY(-1px);
}

/* =========================================================
   SVG TEXT
   ========================================================== */
.system-svg .diagram-subtitle,
.system-svg .equipment-subtitle {
  fill: #6d8290;
  font-size: 12px;
  font-weight: 650;
}

.system-svg .diagram-label {
  fill: #27475b;
  font-size: 13px;
  font-weight: 850;
}

.system-svg .equipment-title {
  fill: #ffffff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.system-svg .equipment-subtitle {
  fill: #d8ecf7;
  font-size: 10px;
  font-weight: 650;
}

.system-svg .equipment-label {
  fill: #24495e;
  font-size: 12px;
  font-weight: 850;
}

.system-svg .equipment-label-subtitle {
  fill: #718691;
  font-size: 10px;
  font-weight: 700;
}

.system-svg .supply-label,
.system-svg .return-label,
.system-svg .branch-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.system-svg .supply-label {
  fill: #187db4;
  opacity: 1;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.system-svg .return-label {
  fill: #228653;
}

.system-svg .branch-label {
  fill: #557385;
  font-size: 10px;
}

.system-svg .pipe-label {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.system-svg .baola-skid-title {
  fill: #0b4d72;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.system-svg .skid-label {
  fill: #ffffff;
  font-size: 10px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(7, 53, 78, 0.4);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.system-svg .skid-subtitle {
  fill: #d8edf7;
  font-size: 8px;
  font-weight: 700;
}

.app-shell.is-recovering .system-svg .supply-label {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* =========================================================
   SVG PIPING
   ========================================================== */
.system-svg .pipe {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.system-svg .pipe-supply {
  stroke: #2d9bd0;
  stroke-width: 15;
  filter: drop-shadow(0 3px 3px rgba(15, 109, 161, 0.18));
}

.system-svg .pipe-return {
  stroke: #39ae68;
  stroke-width: 15;
  filter: drop-shadow(0 3px 3px rgba(23, 125, 68, 0.17));
}

.system-svg .pipe-branch {
  stroke: #6d8e9f;
  stroke-width: 10;
}

.system-svg .pipe-makeup {
  stroke: #347eaf;
  stroke-width: 10;
}

.system-svg .pipe-degassing {
  stroke: #a57ab5;
  stroke-width: 9;
  stroke-dasharray: 8 8;
}

.system-svg .static-arrows polygon {
  fill: rgba(255, 255, 255, 0.93);
  filter: drop-shadow(0 1px 2px rgba(11, 54, 78, 0.2));
}

/* ---------- Water Flow ---------- */
.system-svg .water-flow {
  fill: none;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  stroke-dasharray: 8 22;
  transition: opacity 0.45s var(--ease-premium);
}

.system-svg .water-flow-supply {
  stroke: #e4f9ff;
}

.system-svg .water-flow-return {
  stroke: #eafff0;
}

.system-svg .water-flow-branch {
  stroke: #e9f6fd;
}

.system-svg .water-flow-makeup {
  stroke: #cbeeff;
}

.app-shell.is-running .water-flow,
.app-shell.is-complete .water-flow {
  opacity: 0.94;
  animation: water-flow 1.15s linear infinite;
}

.app-shell.is-running .water-flow-return,
.app-shell.is-complete .water-flow-return {
  animation-duration: 1.25s;
  animation-direction: reverse;
}

.app-shell.is-running .water-flow-branch,
.app-shell.is-complete .water-flow-branch {
  animation-duration: 1.1s;
}

.app-shell.is-running .water-flow-makeup,
.app-shell.is-complete .water-flow-makeup {
  opacity: 0;
  animation: none;
}

.app-shell.is-recovering .water-flow-makeup {
  opacity: 1;
  animation: water-flow 0.72s linear infinite;
}

/* =========================================================
   SVG EQUIPMENT
   ========================================================== */
.system-svg .equipment {
  stroke: #24465d;
  stroke-width: 3;
}

.system-svg .chiller-body {
  fill: url(#chillerGradient);
}

.system-svg .chiller-screen {
  fill: #c5efff;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
}

.system-svg .fan-ring {
  fill: #dff6ff;
  stroke: #398fb5;
  stroke-width: 3;
}

.system-svg .fan path {
  fill: #4e9fc2;
}

.system-svg .ahu-body {
  fill: url(#ahuGradient);
  stroke: #314d60;
  stroke-width: 3;
}

.system-svg .ahu-coil-panel {
  fill: #ebf3f6;
}

.system-svg .coil-lines {
  stroke: #a2b5c0;
  stroke-width: 6;
  stroke-linecap: round;
}

.system-svg .pump-body {
  fill: #166d9f;
  stroke: #204a63;
  stroke-width: 3;
}

.system-svg .pump-core {
  fill: #dcf6ff;
  stroke: #6bb9d7;
  stroke-width: 3;
}

.system-svg .pump-impeller path {
  fill: #2f8db8;
}

.system-svg .baola-body {
  fill: url(#baolaGradient);
}

.system-svg .baola-top-module {
  fill: #bfe7f5;
  stroke: #275874;
  stroke-width: 2;
}

.system-svg .baola-pump-body {
  fill: #dcebf1;
  stroke: #23465b;
  stroke-width: 3;
}

.system-svg .baola-pump-impeller path {
  fill: #2d8db8;
}

.system-svg .tank-body {
  fill: url(#tankGradient);
  stroke: #83202a;
  stroke-width: 3;
}

.system-svg .tank-highlight {
  fill: rgba(255, 255, 255, 0.17);
}

.system-svg .makeup-source-body {
  fill: #f3fbff;
  stroke: #7697a8;
  stroke-width: 3;
}

.system-svg .makeup-source-lines {
  fill: none;
  stroke: #4b9ac1;
  stroke-width: 4;
  stroke-linecap: round;
}

.system-svg .vacuum-body {
  fill: #715f90;
  stroke: #3a3152;
  stroke-width: 3;
}

.system-svg .vacuum-top {
  fill: #8a74ae;
  stroke: #3a3152;
  stroke-width: 3;
}

.system-svg .vacuum-bottom {
  fill: #55466f;
  stroke: #3a3152;
  stroke-width: 3;
}

.system-svg .vacuum-core-line {
  stroke: #e6d6fa;
  stroke-width: 4;
  stroke-linecap: round;
}

.system-svg .magnet-body {
  fill: #dd9651;
  stroke: #7d4a1f;
  stroke-width: 3;
}

.system-svg .magnet-icon {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8;
  stroke-linecap: round;
}

.system-svg .filter-body {
  fill: #7f9aa7;
  stroke: #425f70;
  stroke-width: 3;
}

.system-svg .filter-lines {
  fill: none;
  stroke: #f1fbff;
  stroke-width: 4;
  stroke-linecap: round;
}

/* =========================================================
   CALLOUTS
   ========================================================== */
.system-svg .callout {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.97);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.42s ease,
    transform 0.42s var(--ease-premium);
}

.system-svg .callout-line {
  stroke: #95aab7;
  stroke-width: 2;
  stroke-dasharray: 4 5;
}

.system-svg .callout-box {
  fill: rgba(255, 255, 255, 0.96);
  stroke: #d5e2e9;
  stroke-width: 2;
  filter: drop-shadow(0 5px 8px rgba(33, 67, 89, 0.1));
}

.system-svg .callout-number {
  fill: #71d343;
}

.system-svg .callout-number-text {
  fill: #0a4633;
  font-size: 13px;
  font-weight: 900;
}

.system-svg .callout-title {
  fill: #1c3c50;
  font-size: 14px;
  font-weight: 850;
}

.system-svg .callout-description {
  fill: #6a7f8d;
  font-size: 11px;
  font-weight: 650;
}

.app-shell.is-pressure-drop .callout-pressure,
.app-shell.is-recovering .callout-makeup,
.app-shell.is-degassing .callout-vacuum,
.app-shell.is-dirt-separation .callout-magnetic {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app-shell.is-complete .callout {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}

/* =========================================================
   ANIMATION LAYERS
   ========================================================== */
.system-svg .animation-layer {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
}

.system-svg .ahu-airflow,
.system-svg .chiller-airflow,
.system-svg .released-air {
  opacity: 0;
}

.system-svg .air-stream,
.system-svg .released-air-stream {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.system-svg .air-stream {
  stroke: rgba(173, 225, 245, 0.95);
  stroke-width: 4;
  stroke-dasharray: 12 18;
  filter: drop-shadow(0 0 5px rgba(89, 186, 226, 0.2));
}

.system-svg .ahu-stream {
  stroke: rgba(157, 222, 244, 0.95);
}

.system-svg .chiller-stream {
  stroke: rgba(197, 240, 255, 0.92);
}

.system-svg .released-air-stream {
  stroke: #d3b7ef;
  stroke-width: 4;
  filter: drop-shadow(0 0 6px rgba(188, 141, 228, 0.2));
}

.system-svg .pressure-warning circle {
  fill: #e33c44;
  stroke: #ffffff;
  stroke-width: 4;
  filter: drop-shadow(0 3px 7px rgba(184, 30, 37, 0.28));
}

.system-svg .pressure-warning text {
  fill: #d0212b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.system-svg .pressure-warning text:nth-of-type(1) {
  fill: #ffffff;
  font-size: 22px;
}

.app-shell.is-pressure-drop .pressure-warning {
  opacity: 1;
  animation: warning-pulse 1s ease-in-out infinite;
}

.system-svg .bubble {
  fill: rgba(234, 248, 255, 0.9);
  stroke: #85c6e5;
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(38, 127, 171, 0.23));
}

.app-shell.is-degassing .air-bubbles {
  opacity: 1;
}

.app-shell.is-degassing .bubble-one {
  animation: bubble-one 2.35s ease-in-out infinite;
}

.app-shell.is-degassing .bubble-two {
  animation: bubble-two 2.1s ease-in-out 0.25s infinite;
}

.app-shell.is-degassing .bubble-three {
  animation: bubble-three 2.55s ease-in-out 0.5s infinite;
}

.app-shell.is-degassing .bubble-four {
  animation: bubble-four 2.15s ease-in-out 0.1s infinite;
}

.app-shell.is-degassing .bubble-five {
  animation: bubble-five 2.45s ease-in-out 0.35s infinite;
}

.app-shell.is-degassing .released-air {
  opacity: 0.98;
}

.app-shell.is-degassing .released-air-1 {
  animation: released-air-up 1.45s ease-in-out infinite;
}

.app-shell.is-degassing .released-air-2 {
  animation: released-air-up 1.6s ease-in-out 0.18s infinite;
}

.app-shell.is-degassing .released-air-3 {
  animation: released-air-up 1.35s ease-in-out 0.3s infinite;
}

.system-svg .magnetic-dirt .dirt {
  fill: #9a5538;
  stroke: #61321f;
  stroke-width: 2;
}

.app-shell.is-dirt-separation .magnetic-dirt {
  opacity: 1;
}

.app-shell.is-dirt-separation .dirt-one {
  animation: dirt-move-one 1.6s var(--ease-premium) infinite;
}

.app-shell.is-dirt-separation .dirt-two {
  animation: dirt-move-two 1.75s var(--ease-premium) 0.12s infinite;
}

.app-shell.is-dirt-separation .dirt-three {
  animation: dirt-move-three 1.9s var(--ease-premium) 0.2s infinite;
}

.app-shell.is-dirt-separation .dirt-four {
  animation: dirt-move-four 1.7s var(--ease-premium) 0.28s infinite;
}

.app-shell.is-dirt-separation .dirt-five {
  animation: dirt-move-five 1.6s var(--ease-premium) 0.36s infinite;
}

.system-svg .captured-dirt circle,
.system-svg .captured-dirt rect {
  fill: #80452f;
  stroke: #573023;
  stroke-width: 1.5;
}

.app-shell.is-dirt-separation .captured-dirt,
.app-shell.is-complete .captured-dirt {
  opacity: 1;
  animation: captured-dirt-pulse 1.1s ease-in-out infinite alternate;
}

.system-svg .fine-particles circle {
  fill: #f4d447;
  stroke: #a97712;
  stroke-width: 1.5;
}

.app-shell.is-dirt-separation .fine-particles {
  opacity: 0.95;
  animation: fine-particle-vibrate 0.55s linear infinite;
}

/* =========================================================
   EQUIPMENT STATE
   ========================================================== */
.app-shell.is-running .fan,
.app-shell.is-complete .fan {
  transform-box: fill-box;
  transform-origin: center;
  animation: fan-spin 2.4s linear infinite;
}

.app-shell.is-running #mainPumpImpeller,
.app-shell.is-complete #mainPumpImpeller {
  transform-box: fill-box;
  transform-origin: center;
  animation: impeller-spin 1.8s linear infinite;
}

.app-shell.is-recovering #baolaPumpImpeller {
  transform-box: fill-box;
  transform-origin: center;
  animation: impeller-spin 0.58s linear infinite;
}

.app-shell.is-recovering #baolaPump {
  transform-box: fill-box;
  transform-origin: center;
  animation: pump-glow 0.85s ease-in-out infinite alternate;
}

.app-shell.is-recovering #makeupSource {
  transform-box: fill-box;
  transform-origin: center;
  animation: equipment-highlight 0.85s ease-in-out infinite alternate;
}

.app-shell.is-degassing #vacuumSeparator {
  transform-box: fill-box;
  transform-origin: center;
  animation: vacuum-glow 0.9s ease-in-out infinite alternate;
}

.app-shell.is-dirt-separation #magneticSeparator {
  transform-box: fill-box;
  transform-origin: center;
  animation: magnet-pulse 0.85s ease-in-out infinite alternate;
}

.app-shell.is-dirt-separation #optionalFilter {
  transform-box: fill-box;
  transform-origin: center;
  animation: filter-highlight 0.9s ease-in-out infinite alternate;
}

.app-shell.is-running .ahu-airflow,
.app-shell.is-complete .ahu-airflow,
.app-shell.is-running .chiller-airflow,
.app-shell.is-complete .chiller-airflow {
  opacity: 0.95;
}

.app-shell.is-running .ahu-stream-1,
.app-shell.is-complete .ahu-stream-1 {
  animation: airflow-forward 1.9s linear infinite;
}

.app-shell.is-running .ahu-stream-2,
.app-shell.is-complete .ahu-stream-2 {
  animation: airflow-forward 1.6s linear 0.18s infinite;
}

.app-shell.is-running .ahu-stream-3,
.app-shell.is-complete .ahu-stream-3 {
  animation: airflow-forward 2.1s linear 0.34s infinite;
}

.app-shell.is-running .chiller-stream-1,
.app-shell.is-complete .chiller-stream-1 {
  animation: airflow-backward 1.65s linear infinite;
}

.app-shell.is-running .chiller-stream-2,
.app-shell.is-complete .chiller-stream-2 {
  animation: airflow-backward 1.9s linear 0.14s infinite;
}

.app-shell.is-running .chiller-stream-3,
.app-shell.is-complete .chiller-stream-3 {
  animation: airflow-backward 2.15s linear 0.28s infinite;
}

/* =========================================================
   PRESSURE GAUGE STATE
   ========================================================== */
.app-shell.is-pressure-drop #pressureGauge .gauge-ring {
  border-color: #f4c1c4;
  border-top-color: var(--red-600);
  border-right-color: var(--red-600);
  animation: gauge-alert 0.8s ease-in-out infinite;
}

.app-shell.is-pressure-drop #pressureGauge .gauge-ring::after {
  background: linear-gradient(180deg, #ef6b71, #b4232c);
  transform: rotate(-107deg);
}

.app-shell.is-recovering #pressureGauge .gauge-ring,
.app-shell.is-complete #pressureGauge .gauge-ring {
  border-color: #c7ebd2;
  border-top-color: var(--green-600);
  border-right-color: var(--green-600);
}

.app-shell.is-recovering #pressureGauge .gauge-ring::after {
  background: linear-gradient(180deg, #64ce72, #137743);
  transform: rotate(-48deg);
}

/* =========================================================
   KEYFRAMES
   ========================================================== */
@keyframes water-flow {
  to {
    stroke-dashoffset: -30;
  }
}

@keyframes fan-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes impeller-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes warning-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(220, 47, 55, 0.1));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 10px rgba(220, 47, 55, 0.48));
    transform: scale(1.12);
  }
}

@keyframes gauge-alert {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(217, 54, 63, 0);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(217, 54, 63, 0.14);
  }
}

@keyframes pump-glow {
  to {
    filter: drop-shadow(0 0 9px rgba(57, 183, 239, 0.72));
  }
}

@keyframes equipment-highlight {
  to {
    filter: brightness(1.08) drop-shadow(0 0 9px rgba(33, 156, 218, 0.44));
  }
}

@keyframes vacuum-glow {
  to {
    filter: drop-shadow(0 0 10px rgba(205, 153, 239, 0.6));
  }
}

@keyframes magnet-pulse {
  to {
    filter: drop-shadow(0 0 10px rgba(244, 159, 63, 0.68));
    transform: scale(1.07);
  }
}

@keyframes filter-highlight {
  to {
    filter: drop-shadow(0 0 9px rgba(245, 209, 69, 0.62));
  }
}

@keyframes bubble-one {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }

  18% {
    opacity: 1;
  }

  74% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate(63px, -70px) scale(1.15);
  }
}

@keyframes bubble-two {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.65);
  }

  20% {
    opacity: 1;
  }

  78% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(49px, -59px) scale(1.05);
  }
}

@keyframes bubble-three {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.72);
  }

  19% {
    opacity: 1;
  }

  75% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(36px, -49px) scale(1.1);
  }
}

@keyframes bubble-four {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }

  24% {
    opacity: 1;
  }

  78% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
    transform: translate(22px, -33px) scale(1);
  }
}

@keyframes bubble-five {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.65);
  }

  20% {
    opacity: 1;
  }

  78% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
    transform: translate(8px, -22px) scale(0.8);
  }
}

@keyframes airflow-forward {
  from {
    stroke-dashoffset: 0;
    opacity: 0.18;
  }

  30% {
    opacity: 0.92;
  }

  to {
    stroke-dashoffset: -60;
    opacity: 0.18;
  }
}

@keyframes airflow-backward {
  from {
    stroke-dashoffset: 0;
    opacity: 0.18;
  }

  30% {
    opacity: 0.88;
  }

  to {
    stroke-dashoffset: 60;
    opacity: 0.18;
  }
}

@keyframes released-air-up {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.82);
  }

  25% {
    opacity: 0.96;
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(1.08);
  }
}

@keyframes dirt-move-one {
  0% {
    opacity: 0;
    transform: translateX(-58px);
  }

  16%,
  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(42px) translateY(5px) scale(0.45);
  }
}

@keyframes dirt-move-two {
  0% {
    opacity: 0;
    transform: translateX(-58px) translateY(2px);
  }

  16%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(60px) translateY(8px) scale(0.42);
  }
}

@keyframes dirt-move-three {
  0% {
    opacity: 0;
    transform: translateX(-62px) rotate(0deg);
  }

  16%,
  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(88px) translateY(5px) rotate(180deg) scale(0.35);
  }
}

@keyframes dirt-move-four {
  0% {
    opacity: 0;
    transform: translateX(-53px) translateY(-2px);
  }

  16%,
  69% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(112px) translateY(5px) scale(0.38);
  }
}

@keyframes dirt-move-five {
  0% {
    opacity: 0;
    transform: translateX(-42px) translateY(1px);
  }

  16%,
  66% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(133px) translateY(8px) scale(0.3);
  }
}

@keyframes captured-dirt-pulse {
  to {
    filter: drop-shadow(0 0 5px rgba(120, 67, 43, 0.5));
  }
}

@keyframes fine-particle-vibrate {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(2px, -1px);
  }

  50% {
    transform: translate(-1px, 2px);
  }

  75% {
    transform: translate(1px, 1px);
  }
}

/* =========================================================
   PAUSE AND ACCESSIBILITY
   ========================================================== */
.app-shell.is-paused *,
.app-shell.is-paused *::before,
.app-shell.is-paused *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 768px) {
  .app-shell {
    padding: 22px;
  }

  .dashboard-card,
  .story-card {
    padding: 20px;
  }

  .controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.72fr);
    gap: 20px;
  }

  .dashboard-card {
    position: sticky;
    top: 16px;
  }

  .mobile-callouts {
    display: none;
  }

  .system-svg {
    min-width: 0;
  }
}

@media (max-width: 1180px) {
  .layout {
    gap: 18px;
  }

  .diagram-wrap {
    min-height: 640px;
  }

  .system-svg {
    max-height: 760px;
  }

  .app-shell:not(.is-running):not(.is-pressure-drop):not(.is-recovering):not(.is-degassing):not(.is-dirt-separation):not(.is-complete) .system-svg {
    max-height: 650px;
    transform: translateY(20px);
  }
}

@media (max-width: 1023px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .dashboard-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 980px) {
  .app-shell {
    padding: 16px;
  }

  .card-heading {
    padding: 22px 20px 12px;
  }

  .card-heading h1 {
    max-width: 650px;
    font-size: clamp(24px, 4.5vw, 36px);
  }

  .card-heading p:not(.eyebrow) {
    font-size: 14px;
  }

  .diagram-scroll-hint {
    display: block;
  }

  .diagram-wrap {
    min-height: auto;
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-behavior: smooth;
  }

  .system-svg,
  .app-shell.is-running .system-svg,
  .app-shell.is-pressure-drop .system-svg,
  .app-shell.is-recovering .system-svg,
  .app-shell.is-degassing .system-svg,
  .app-shell.is-dirt-separation .system-svg,
  .app-shell.is-complete .system-svg {
    width: auto;
    min-width: 1040px;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: translateY(0);
  }

  .app-shell:not(.is-running):not(.is-pressure-drop):not(.is-recovering):not(.is-degassing):not(.is-dirt-separation):not(.is-complete) .system-svg {
    min-width: 1040px;
    max-height: none;
    transform: translateY(0);
  }

  .mobile-callouts {
    display: grid;
  }

  .system-svg .callout {
    display: none;
  }
}

@media (max-width: 767px) {
  .app-header {
    gap: 12px;
  }

  .brand {
    gap: 12px;
  }

  .brand-mark,
  .demo-status {
    min-height: 44px;
  }

  .dashboard-card,
  .story-card {
    padding: 16px;
  }

  .dashboard-card h2,
  .story-card h2 {
    font-size: 22px;
  }

  .pressure-gauge {
    margin: 16px 0;
  }

  .gauge-ring {
    width: 144px;
    height: 144px;
  }

  .gauge-ring::before {
    width: 92px;
    height: 92px;
  }

  .gauge-content strong {
    font-size: 28px;
  }

  .metric-list {
    grid-template-columns: 1fr;
  }

  .metric-item {
    min-height: 44px;
  }

  .system-svg .equipment-title,
  .system-svg .equipment-subtitle,
  .system-svg .diagram-label,
  .system-svg .diagram-subtitle,
  .system-svg .supply-label,
  .system-svg .return-label,
  .system-svg .branch-label,
  .system-svg .baola-skid-title,
  .system-svg .skid-label,
  .system-svg .skid-subtitle {
    font-size: 14px;
  }

  .system-svg .branch-label,
  .system-svg .pipe-label,
  .system-svg .equipment-subtitle,
  .system-svg .equipment-label-subtitle,
  .system-svg .skid-subtitle {
    font-size: 12px;
  }

  .system-svg .pressure-warning text {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding: 12px;
  }

  .app-header {
    margin-bottom: 12px;
  }

  .brand-copy strong {
    font-size: 15px;
  }

  .brand-copy p {
    font-size: 13px;
  }

  .card-heading {
    padding: 20px 18px 10px;
  }

  .card-heading h1 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.12;
  }

  .card-heading p:not(.eyebrow) {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
  }

  .diagram-scroll-hint {
    margin: 0 16px 8px;
  }

  .diagram-wrap {
    padding: 12px;
  }

  .dashboard-card h2,
  .story-card h2 {
    font-size: 20px;
  }

  .pressure-gauge {
    display: none;
  }

  .metric-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .metric-item {
    align-items: flex-start;
    min-height: 64px;
    padding: 10px;
    flex-direction: column;
  }

  .metric-item::before {
    display: none;
  }

  .metric-item span,
  .metric-item strong {
    font-size: 11px;
  }

  .metric-item strong {
    white-space: normal;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .timeline-step {
    min-width: 44px;
    min-height: 44px;
  }

  .system-svg,
  .app-shell.is-running .system-svg,
  .app-shell.is-pressure-drop .system-svg,
  .app-shell.is-recovering .system-svg,
  .app-shell.is-degassing .system-svg,
  .app-shell.is-dirt-separation .system-svg,
  .app-shell.is-complete .system-svg,
  .app-shell:not(.is-running):not(.is-pressure-drop):not(.is-recovering):not(.is-degassing):not(.is-dirt-separation):not(.is-complete) .system-svg {
    min-width: 1120px;
  }

  .demo-note,
  .story-copy p:not(.eyebrow) {
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .metric-list {
    grid-template-columns: 1fr;
  }

  .card-heading h1 {
    font-size: 21px;
  }

  .eyebrow {
    font-size: 11px;
  }
}