/*----------------------------------------*/
/*  "How it works" - scroll-driven system diagram
/*  Scoped to .wwc. Uses the site's brand tokens only.
/*----------------------------------------*/

.wwc {
  --wwc-navy: var(--theme-blue-color, #212877);
  --wwc-red: var(--primary-red, #ed1b24);
  --wwc-blue: var(--color-primary-two, #0f55dc);
  --wwc-water: #1560bd;
  --wwc-green: #2fbf5b;
  --wwc-ink: #5a6070;
  --wwc-line: #c8d0e0;

  position: relative;
  /* The cycle runs on a clock now, so the section is an ordinary block - it no
     longer needs scroll distance to play through, and nothing is pinned. */
  padding: 64px 0 30px;

  /* Rooftop photograph behind the whole section, anchored to the bottom so
     the roof floor - where the pump and tank stand - is always in view; any
     excess is trimmed from the sky. A light wash at the top keeps the heading
     readable and fades out well before the hardware. */
  background-color: #dcecfa;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.4) 22%,
      rgba(255, 255, 255, 0) 42%
    ),
    url("../images/wired-hero-bg/working-wired.webp");
  background-size: 100% 100%, cover;
  background-position: 0 0, center bottom;
  background-repeat: no-repeat, no-repeat;
}

.wwc__sticky > .container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* ---------- header ---------- */
.wwc__header {
  order: 1;
  text-align: center;
  flex: 0 0 auto;
}

.wwc__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--wwc-navy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 16px rgba(255, 255, 255, 0.9);
}

.wwc__title-accent {
  color: var(--wwc-red);
}

.wwc__subtitle {
  margin: 10px auto 0;
  max-width: 46em;
  font-size: 15px;
  line-height: 24px;
  color: #3b4250;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.95);
}

/* ---------- stage ---------- */
/* Single full-width column, centred. The SVG holds its own aspect ratio, which
   differs between the two layouts because the parts are rearranged. */
.wwc__stage {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The whole diagram scaled as one piece - about two thirds of its former
   width - so every pipe and cable keeps meeting its part. */
.wwc__figure {
  flex: 0 1 66%;
  max-width: 880px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wwc-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1100 / 560;
}

/* ---------- shared hardware styling ---------- */
.wwc-box {
  stroke: var(--wwc-line);
  stroke-width: 2;
  filter: drop-shadow(0 10px 20px rgba(20, 26, 52, 0.07));
}

/* ---------- controller ----------
   Drawn from the XA25FA front panel: cream shell with corner mounting tabs, a
   teal upper panel carrying the logo, the warranty seal and the lamp column,
   and a yellow lower panel with the brand block and the rocker. */
.wwc-ctrl__shell {
  fill: #eeece6;
  stroke: #d6d3c9;
  stroke-width: 1.5;
  filter: drop-shadow(0 10px 20px rgba(20, 26, 52, 0.14));
}

.wwc-ctrl__tab {
  fill: #e2dfd5;
  stroke: #cdc9be;
  stroke-width: 1.2;
}

.wwc-ctrl__tab-hole {
  fill: #a8a294;
}

.wwc-ctrl__panel-top {
  fill: #0d5c58;
}

.wwc-ctrl__panel-bot {
  fill: #f6c918;
}

/* ----- logo plate ----- */
.wwc-ctrl__logo-box {
  fill: #ffffff;
}

/* ----- warranty seal ----- */
.wwc-ctrl__seal {
  fill: #c99a12;
}

.wwc-ctrl__seal-in {
  fill: #f3c637;
}

.wwc-ctrl__seal-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  fill: #3d2c05;
}

.wwc-ctrl__seal-txt {
  font-size: 4.2px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #3d2c05;
}

/* the longest word on the seal, kept inside its circle */
.wwc-ctrl__seal-txt--wide {
  font-size: 3.4px;
  letter-spacing: 0.02em;
}

.wwc-ctrl__model-line {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  fill: #ffffff;
}

/* ----- lamp column ----- */
.wwc-ctrl__lamp--on {
  fill: #ff3b30;
}

.wwc-ctrl__lamp--off {
  fill: #7f1f1a;
}

.wwc-ctrl__lamp-label {
  font-size: 8.4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #ffffff;
}

/* ----- brand block ----- */
.wwc-ctrl__brand-big {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  fill: #d81f26;
}

.wwc-ctrl__brand-sub {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: #14161c;
}

.wwc-ctrl__made {
  font-size: 6.4px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #14161c;
}

.wwc-ctrl__print {
  font-size: 6.2px;
  fill: #14161c;
}

/* ----- rocker ----- */
.wwc-ctrl__rocker {
  fill: #16181c;
}

.wwc-ctrl__rocker-in {
  fill: #2b2f36;
}

.wwc-ctrl__rocker-mark {
  font-size: 11px;
  font-weight: 700;
  fill: #f2f4f7;
}

.wwc-ctrl__switch-label {
  font-size: 7.4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  fill: #14161c;
}

/* ----- terminal block ----- */
.wwc-ctrl__strip {
  fill: #dedbd2;
  stroke: #c9c5ba;
  stroke-width: 1.2;
}

.wwc-ctrl__screw {
  fill: #c9d2db;
}

.wwc-ctrl__screw-in {
  fill: #eef2f6;
}

.wwc-ctrl__screw-slot {
  fill: none;
  stroke: #8f9aa6;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.wwc-ctrl__boot rect,
.wwc-pump__boot {
  fill: #2a3142;
}

/* ---------- LEDs ---------- */
.wwc-led__glow {
  fill: currentColor;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.wwc-led__dot {
  fill: #7f1f1a;
  transition: fill 0.5s ease;
}

.wwc-led--motor {
  color: #2fbf5b;
}

.wwc-led--low,
.wwc-led--full {
  color: var(--wwc-green);
}

.wwc-led.is-on .wwc-led__dot {
  fill: currentColor;
}

.wwc-led.is-on .wwc-led__glow {
  opacity: 0.28;
}

.wwc-led.is-on ~ .wwc-ctrl__state,
.wwc-ctrl__state.is-on {
  fill: var(--wwc-navy);
}

/* ---------- tank ----------
   Moulded cylinder from the supplied reference: rounded shoulders, five ribs,
   orange cap, feet. The body is a pale tint of the reference blue rather than
   solid, so the water level stays legible inside it - a solid shell would hide
   the animation entirely. Ribs and shading sit over the water, so a full tank
   still reads as the same moulding. */
/* white rather than pale blue, so the tank stands out against the sky in the
   rooftop background */
.wwc-tank__body {
  fill: url(#wwc-g-tank);
  stroke: none;
  filter: drop-shadow(0 10px 18px rgba(20, 40, 70, 0.16));
}

.wwc-tank__outline {
  fill: none;
  stroke: #1189cf;
  stroke-width: 3.5;
}

.wwc-tank__cap {
  fill: #ff7a45;
}

.wwc-tank__collar {
  fill: #e8541f;
}

.wwc-tank__foot,
.wwc-tank__inlet {
  fill: #0e7cc0;
}

/* the feed arrives from the left on desktop, the right when stacked */
.wwc-tank__inlet--r {
  display: none;
}

.wwc-tank__gland rect {
  fill: #e8ecf3;
  stroke: #b3bccd;
  stroke-width: 1.5;
}

.wwc-tank__ribs rect {
  fill: #ffffff;
  opacity: 0.2;
}

.wwc-tank__shade {
  fill: #0b5696;
  opacity: 0.13;
}

.wwc-tank__sheen {
  fill: #ffffff;
  opacity: 0.28;
}

.wwc-water__body,
.wwc-water__wave {
  fill: url(#wwc-g-water);
}

.wwc-water__wave {
  opacity: 1;
}

.wwc-water__waves {
  animation: wwc-wave 7s linear infinite;
}

@keyframes wwc-wave {
  to {
    transform: translateX(-280px);
  }
}

/* ---------- float switch ----------
   Orange float and counterweight on a black cable, after the Xpert unit.
   how-it-works.js sets the float's position and angle; the gentle bob below
   runs only while it is floating, not while it hangs. */
.wwc-float__cable {
  fill: none;
  stroke: #1d2230;
  stroke-width: 3;
  stroke-linecap: round;
}

.wwc-float__weight-body {
  fill: url(#wwc-g-weight);
  filter: drop-shadow(0 2px 3px rgba(20, 26, 52, 0.25));
}

.wwc-float__weight-band {
  fill: rgba(120, 40, 0, 0.28);
}

.wwc-float__weight-shine {
  fill: rgba(255, 255, 255, 0.35);
}

.wwc-float__hull {
  fill: url(#wwc-g-float);
  stroke: #b8480a;
  stroke-width: 0.8;
  filter: drop-shadow(0 3px 4px rgba(20, 26, 52, 0.28));
}

.wwc-float__hull-shine {
  fill: rgba(255, 255, 255, 0.28);
}

.wwc-float__nozzle {
  fill: #e25f12;
}

.wwc-float__rib {
  fill: none;
  stroke: rgba(120, 40, 0, 0.45);
  stroke-width: 1.1;
}

.wwc-float__brand {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #ffffff;
}

.wwc-float__brand-sub {
  font-size: 4.6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #ffffff;
}

.wwc-float__bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: wwc-float-bob 2.6s ease-in-out infinite;
}

.wwc-float.is-hanging .wwc-float__bob {
  animation: none;
}

@keyframes wwc-float-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(1.6px) rotate(-2.5deg);
  }
}

/* rings on the water around the float, hidden while it hangs clear */
.wwc-float__ripple {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.4;
  transition: opacity 0.4s ease;
}

.wwc-float.is-hanging .wwc-float__ripple {
  opacity: 0;
}

.wwc-sensor__mark {
  stroke: var(--wwc-navy);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  opacity: 0.28;
  transition: opacity 0.45s ease, stroke 0.45s ease;
}

.wwc-sensor.is-active .wwc-sensor__mark {
  opacity: 0.75;
  stroke: var(--wwc-blue);
}

.wwc-mark {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  fill: var(--wwc-navy);
  opacity: 0.85;
  /* a white halo so the label holds up over sky and greenery */
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
  transition: opacity 0.45s ease;
}

.wwc-mark.is-active {
  opacity: 1;
}

.wwc-mark--muted {
  opacity: 0.5;
}

/* ---------- rooftop mounting (wide layout only) ---------- */
.wwc-ground__shadow {
  fill: rgba(28, 38, 52, 0.32);
}

.wwc-ground__post {
  fill: #97a1ab;
}

.wwc-ground__post-hi {
  fill: rgba(255, 255, 255, 0.35);
}

.wwc-ground__plate {
  fill: #7a848e;
}

.wwc-ground__plinth {
  fill: url(#wwc-g-concrete);
  stroke: #c2c7cc;
  stroke-width: 1;
}

.wwc-ground__plinth-side {
  fill: rgba(30, 40, 55, 0.08);
}

.wwc-ground__slab {
  fill: #eef0f2;
  stroke: #c9ced3;
  stroke-width: 1;
}

/* ---------- pump ---------- */
.wwc-pump__base {
  fill: #123a70;
}

.wwc-pump__volute {
  fill: #17539b;
}

.wwc-pump__volute-in {
  fill: #0f3f7d;
}

.wwc-pump__rotor path {
  fill: #bcd9f7;
}

.wwc-pump__rotor {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: wwc-spin 2.6s linear infinite;
  animation-play-state: paused;
}

.wwc-pump__hub {
  fill: #eaf3fd;
}

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

.wwc-pump__label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: #ffffff;
}

.wwc-pump__state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: rgba(255, 255, 255, 0.65);
  transition: fill 0.45s ease;
}

/* ---------- pipes and cables ---------- */
.wwc-pipe {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wwc-pipe--casing {
  stroke: #9cc6ee;
  stroke-width: 17;
}

.wwc-pipe--bore {
  stroke: #e4f0fc;
  stroke-width: 10;
}

/* The water column itself: a solid, continuous fill of the bore. It was
   previously a dashed stroke, which rendered as a row of separate capsules
   rather than water. The path carries pathLength="100" so one dash covers it
   whatever the desktop/mobile geometry is, letting the column advance from the
   pump to the tank inlet when the motor starts, and fade out when it stops. */
.wwc-pipe--flow {
  stroke: var(--wwc-water);
  stroke-width: 10;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset 1s ease-out, opacity 0.45s ease;
}

/* Movement comes from highlights carried along inside the column, not from
   the column itself. Two layers at different widths and speeds slide over
   each other so the current reads as turbulent rather than as a marquee.
   Both dash cycles total 92 units, so a single keyframe loops either one. */
.wwc-pipe--stream {
  stroke: #b3dcff;
  stroke-width: 4.6;
  stroke-dasharray: 30 62;
  opacity: 0;
  transition: opacity 0.45s ease;
  animation: wwc-flow 1.35s linear infinite;
  animation-play-state: paused;
}

.wwc-pipe--stream-b {
  stroke: #e6f4ff;
  stroke-width: 2;
  stroke-dasharray: 10 82;
  animation-duration: 2.2s;
}

@keyframes wwc-flow {
  to {
    stroke-dashoffset: -92;
  }
}

/* Two stacked strokes: the outer sheath and a lighter core down the middle,
   the same trick the pipe uses to stop a flat line reading as a flat line. */
.wwc-cable path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wwc-cable__sheath {
  stroke: #242b3a;
  stroke-width: 6.5;
}

.wwc-cable__core {
  stroke: #3d4763;
  stroke-width: 2.6;
}

.wwc-ctrl__boot rect,
.wwc-pump__boot {
  fill: #2a3142;
}

/* running state drives every decorative loop */
.wwc.is-running .wwc-pump__rotor,
.wwc.is-running .wwc-pipe--stream {
  animation-play-state: running;
}

.wwc.is-running .wwc-pipe--flow {
  opacity: 1;
  stroke-dashoffset: 0;
}

.wwc.is-running .wwc-pipe--stream {
  opacity: 0.85;
}

.wwc.is-running .wwc-pipe--stream-b {
  opacity: 0.6;
}

/* ---------- status caption ---------- */
.wwc__status {
  order: 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 18px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  color: var(--wwc-navy);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  box-shadow: 0 8px 22px rgba(20, 40, 70, 0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.wwc__status-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wwc-line);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}

.wwc.is-running .wwc__status-dot {
  background: var(--wwc-red);
  box-shadow: 0 0 0 4px rgba(237, 27, 36, 0.16);
}

/* screen-reader running commentary */
.wwc__sr {
  order: 4;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- responsive ---------- */
/* stacked diagram: controller -> tank -> pump. The SVG swaps to the taller
   portrait viewBox, so its aspect ratio has to follow. */
@media (max-width: 1199px) {
  .wwc__figure {
    flex-basis: 76%;
  }
}

@media (max-width: 991px) {
  .wwc {
    padding: 60px 0 36px;
  }

  .wwc-svg {
    aspect-ratio: 600 / 920;
  }

  /* the stacked diagram, kept to a readable size */
  .wwc__figure {
    flex-basis: 100%;
    max-width: 440px;
  }

  /* the mounting is drawn for the wide layout's positions */
  .wwc-ground {
    display: none;
  }

  .wwc-tank__inlet--l {
    display: none;
  }

  .wwc-tank__inlet--r {
    display: block;
  }

  .wwc__title {
    font-size: clamp(21px, 4.4vw, 28px);
  }

  .wwc__subtitle {
    font-size: 13.5px;
    line-height: 21px;
  }

  .wwc__status {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 575px) {
  .wwc {
    padding: 50px 0 28px;
  }

  .wwc__status {
    padding: 6px 14px;
  }
}

/* ---------- reduced motion ----------
   The cycle does not play; the diagram holds one representative frame
   (tank full, pump stopped) and the decorative loops stop. */
@media (prefers-reduced-motion: reduce) {
  .wwc-water__waves,
  .wwc-pump__rotor,
  .wwc-pipe--stream,
  .wwc.is-running .wwc-pump__rotor,
  .wwc.is-running .wwc-pipe--stream {
    animation: none;
  }

  /* the column still fills, just without the easing sweep */
  .wwc-pipe--flow {
    transition: opacity 0.45s ease;
  }

  .wwc-led__dot,
  .wwc-led__glow,
  .wwc-sensor__mark,
  .wwc-float__ripple {
    transition: none;
  }

  .wwc-float__bob {
    animation: none;
  }
}