/* SWISS Instalacije: service page illustration and its scroll reveal.
   One static SVG (never repaints) plus a small overlay SVG on top with the same
   viewBox. As the illustration moves up the first screen, the overlay fills segment
   by segment until the device is on. The drawing style is copied from the home page
   house scene (swiss-energy-scene.css): flat cutaway, no gradients except the tank
   fill, no shadows, no outlines in other colours.
   CSP safe: the script sets only attributes and CSSOM values, never inline styles.
   Load only on service pages, after swiss-theme.css. Without JavaScript, and with
   prefers-reduced-motion: reduce, the finished state shows: everything on, nothing moving. */

.svc-scene {
  --svc-hot: var(--brand, #c2272b);
  --svc-hot-soft: var(--brand-text, #dd585c);
  --svc-cold: #7fb3d5;          /* illustration only, never for text */
  --svc-used: #8a8a8a;
  --svc-body: #1e1e1e;
  --svc-outline: #575757;
  --svc-detail: #353535;
  --svc-edge: #4a4a4a;
  --svc-idle: #3b3b3b;
  --svc-wall: #2a2a2a;
  --svc-bead: rgba(242, 242, 240, 0.85);

  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 480 / 360;      /* fixed box, so nothing shifts while the page loads */
  background: var(--bg, #151515);
  border: 1px solid var(--line, #2a2a2a);
  border-radius: 6px;
  overflow: hidden;
}

/* older engines without aspect-ratio keep a stable box from the padding hack */
@supports not (aspect-ratio: 1) {
  .svc-scene::before { content: ""; display: block; padding-top: 75%; }
}

.svc-scene > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

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

.svc-wall { fill: var(--svc-wall); }
.svc-floor { fill: none; stroke: var(--svc-edge); stroke-width: 1.5; }
.svc-eq { fill: var(--svc-body); stroke: var(--svc-outline); stroke-width: 2; stroke-linejoin: round; }
.svc-eq-line { fill: none; stroke: var(--svc-detail); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-eq-edge { fill: none; stroke: var(--svc-edge); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-water-empty { fill: #181c1e; }
.svc-pipe-rest { fill: none; stroke: var(--svc-idle); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.svc-coil-rest { stroke-width: 4; }
.svc-led-ring { fill: none; stroke: var(--svc-outline); stroke-width: 1.5; }

/* ---------- animated overlay ---------- */

.svc-pipe { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.svc-pipe--fill { stroke-dasharray: 1 1; stroke-dashoffset: 0; } /* pathLength=1; offset 0 = full (finished) */
.svc-pipe--hot { stroke: var(--svc-hot); }
.svc-pipe--cold { stroke: var(--svc-cold); }
.svc-coil { stroke-width: 4; }

.svc-flow {
  fill: none;
  stroke: var(--svc-bead);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 14;
  opacity: 0;
}

.svc-tank-fill { opacity: 0.85; }

.svc-drop {
  fill: none;
  stroke: var(--svc-hot-soft);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.svc-led { fill: var(--svc-hot); }   /* default: on. This is the finished state for no-JS. */

/* When the script runs it drives the reveal, so the moving parts start hidden and
   only appear once their step is complete. */
.svc-scene.is-enhanced .svc-flow { opacity: 0; }
.svc-scene.is-enhanced .svc-step.is-done .svc-flow { opacity: 1; }
.svc-scene.is-enhanced .svc-step.is-done .svc-drop { opacity: 1; }

/* ---------- shared parts for the other services (fans, fins, air) ---------- */

.svc-pipe--used { stroke: var(--svc-used); }        /* used / stale air, gray */
.svc-duct { stroke-width: 10; stroke-linecap: butt; }
.svc-fin-rest { fill: none; stroke: var(--svc-idle); stroke-width: 3; stroke-linecap: round; }

.svc-fan { transform-box: fill-box; transform-origin: center; }
.svc-blade, .svc-hub { fill: var(--svc-outline); }

.svc-shimmer { fill: none; stroke: var(--svc-hot-soft); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0; }
.svc-air, .svc-vair { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 7; opacity: 0; }
.svc-air, .svc-vair--in { stroke: var(--svc-cold); }
.svc-vair--out { stroke: var(--svc-used); }

/* these appear only once their step is complete */
.svc-scene.is-enhanced .svc-step.is-done .svc-shimmer,
.svc-scene.is-enhanced .svc-step.is-done .svc-air,
.svc-scene.is-enhanced .svc-step.is-done .svc-vair { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* animations inside the drawing repaint it, so they run in about 15 steps per second,
     and pause while the illustration is off screen */
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-flow {
    animation: svc-flow 0.9s steps(14) infinite;
  }
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-pipe--fill {
    animation: svc-done 0.6s ease-out 1;   /* one short double blink on completion */
  }
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-drop {
    animation: svc-drip 1.1s steps(16) infinite;
  }
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-drop:nth-child(2) { animation-delay: -0.4s; }
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-drop:nth-child(3) { animation-delay: -0.75s; }
  /* the status light blinks like a turn signal while nothing has started */
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-led.is-armed { animation: svc-blink 0.7s steps(1) infinite; }
  /* fans turn, heat shimmers and air flows once their step is done */
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-fan { animation: svc-spin 2.4s linear infinite; }
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-shimmer { animation: svc-dash 1s steps(15) infinite; }
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-air,
  .svc-scene.is-enhanced:not(.is-offscreen) .svc-step.is-done .svc-vair { animation: svc-air 0.8s steps(12) infinite; }
}

/* nothing animates while the illustration is off screen */
.svc-scene.is-offscreen *,
.svc-scene.is-offscreen *::before,
.svc-scene.is-offscreen *::after { animation-play-state: paused !important; }

@keyframes svc-flow { to { stroke-dashoffset: -14.1; } }
@keyframes svc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.12; } }
@keyframes svc-done { 0% { opacity: 1; } 20% { opacity: 0.35; } 40% { opacity: 1; } 60% { opacity: 0.35; } 100% { opacity: 1; } }
@keyframes svc-drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } }
@keyframes svc-spin { to { transform: rotate(360deg); } }
@keyframes svc-dash { to { stroke-dashoffset: -14; } }
@keyframes svc-air { to { stroke-dashoffset: -11; } }

@media (max-width: 599px) {
  .svc-pipe { stroke-width: 5.6; }
  .svc-flow { stroke-width: 3.8; }
  .svc-coil { stroke-width: 4.6; }
}