/* =========================
   DOWN-PAGE SECTIONS
   A text panel, an "instrument" drawing, and one or more traces that run
   from one to the other when the section scrolls into view
   (assets/js/sections.js).

   Every instrument rests in its resolved state. A tiny script in the page
   head marks the page (.zid-arm) so instruments show their "before" state
   from the first paint; sections.js releases each one (.is-live) when its
   traces arrive. With no script or with reduced motion, the page simply
   shows the resolved state.
   ========================= */

/* =========================
   KNOBS
   ========================= */
:root {
  --zid-trace-color: #ffd864;      /* connecting traces + clean routes */
  --zid-trace-width: 1.75;
  --zid-trace-ms: 700ms;           /* text panel → instrument */
  --zid-warn: #ffab40;
  --zid-ok: #48c78e;
  --zid-steel: #4f6f94;
  --zid-steel-dim: #3e587b;
  --zid-line-dark: #24324a;
}

/* =========================
   SECTION + CONNECTING TRACES
   ========================= */
[class*="zid-section-we-"],
.zid-section-you-choose {
  position: relative;
  align-items: center;
}

/* The text panel and its instrument share a centre line. (WordPress pins
   the row's own alignment, so this is set on the columns.) */
[class*="zid-section-we-"] > .wp-block-column,
.zid-section-you-choose > .wp-block-column {
  align-self: center;
}

/* We Think was built earlier with larger spacing saved in the page
   content. Match the other four so the rhythm down the page is even. */
.zid-section-we-think {
  margin-top: var(--wp--preset--spacing--30) !important;
  margin-bottom: var(--wp--preset--spacing--30) !important;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) !important;
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) !important;
}

.zid-section-we-think > .zid-section-image {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* When the columns stack, the text panel always comes first */
@media (max-width: 781px) {
  [class*="zid-section-we-"] > .zid-section-card,
  .zid-section-you-choose > .zid-section-card {
    order: -1;
  }
}

.zid-section-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.zid-section-trace path {
  fill: none;
  stroke: var(--zid-trace-color);
  stroke-width: var(--zid-trace-width);
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--zid-trace-ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.zid-section-trace circle {
  fill: #151d28;
  stroke: var(--zid-trace-color);
  stroke-width: 1.5;
}

.zid-section-trace.is-armed path {
  stroke-dashoffset: 1;
  transition: none;
}

/* =========================
   TEXT PANEL
   ========================= */
.zid-section-card > .wp-block-group {
  position: relative;
  border-radius: 14px !important;
  background-image: linear-gradient(180deg, rgba(28, 39, 59, 0.9) 0%, rgba(21, 29, 40, 0.9) 100%);
  box-shadow:
    0 30px 70px -28px rgba(4, 8, 14, 0.9),
    0 2px 6px rgba(4, 8, 14, 0.35),
    inset 0 1px 0 rgba(180, 191, 206, 0.08);
}

/* Small system label above each heading */
.zid-section-card > .wp-block-group::before {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--wp--preset--font-family--francisco-regular);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-text-1);
  opacity: 0.7;
}

.zid-section-we-think  .zid-section-card > .wp-block-group::before { content: "01 \2014  Diagnosis"; }
.zid-section-we-design .zid-section-card > .wp-block-group::before { content: "02 \2014  Structure"; }
.zid-section-we-plan   .zid-section-card > .wp-block-group::before { content: "03 \2014  Prevention"; }
.zid-section-we-act    .zid-section-card > .wp-block-group::before { content: "04 \2014  Response"; }
.zid-section-you-choose .zid-section-card > .wp-block-group::before { content: "05 \2014  Connection"; }

/* =========================
   INSTRUMENTS — shared parts
   ========================= */
.zid-section-svg[data-zid-instrument] {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* Only the entry in use is shown. sections.js sets .zid-entry-top when the
   panels stack; otherwise the traces enter from the side. */
.zi-only-top,
.zid-entry-top .zi-only-side {
  display: none;
}

.zid-entry-top .zi-only-top {
  display: inline;
}

.zi-panel {
  fill: rgba(21, 29, 40, 0.55);
  stroke: var(--zid-line-dark);
  stroke-width: 1;
}

.zi-chip {
  fill: #1c273b;
  stroke: var(--zid-steel);
  stroke-width: 1.5;
}

.zi-terminal {
  fill: #151d28;
  stroke: var(--zid-trace-color);
  stroke-width: 1.5;
}

.zi-route {
  fill: none;
  stroke: var(--zid-trace-color);
  stroke-width: var(--zid-trace-width);
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 650ms cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.zi-pip {
  fill: var(--zid-ok);
  transition: fill 400ms ease 1400ms;
}

/* "Before" state, shared. Arming is instant; transitions run on release. */
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) * { transition: none !important; }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-route { stroke-dashoffset: 1; }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-pip   { fill: var(--zid-line-dark); }

/* =========================
   01 — WE THINK
   A tangle with one fault is diagnosed and redrawn as three clean routes.
   ========================= */
[data-zid-instrument="think"] .zi-feed { transition-duration: 220ms; transition-delay: 0ms; }
[data-zid-instrument="think"] .zi-r2   { transition-delay: 560ms; }
[data-zid-instrument="think"] .zi-r3   { transition-delay: 670ms; }

.zi-tangle path {
  fill: none;
  stroke: var(--zid-steel-dim);
  stroke-width: var(--zid-trace-width);
  stroke-linejoin: round;
}

.zi-tangle {
  opacity: 0.1;
  transition: opacity 600ms ease 300ms;
}

.zi-node {
  fill: var(--zid-ok);
  transition: fill 400ms ease 1150ms;
}

.zi-ring {
  fill: none;
  stroke: var(--zid-ok);
  stroke-width: 1.25;
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
    opacity 450ms ease 200ms,
    stroke 400ms ease 1150ms;
}

/* Outputs on the chip's far side: dark until the chip is healthy */
.zi-out {
  fill: none;
  stroke: var(--zid-trace-color);
  stroke-width: var(--zid-trace-width);
  stroke-linejoin: round;
  transition: stroke 350ms ease 1550ms;
}

.zi-out-node {
  fill: var(--zid-ok);
  stroke: var(--zid-ok);
  stroke-width: 1.5;
  transition: fill 300ms ease 1750ms, stroke 300ms ease 1750ms;
}

.zi-out.o2      { transition-delay: 1630ms; }
.zi-out.o3      { transition-delay: 1710ms; }
.zi-out-node.o2 { transition-delay: 1830ms, 1830ms; }
.zi-out-node.o3 { transition-delay: 1910ms, 1910ms; }

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-out      { stroke: var(--zid-steel-dim); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-out-node { fill: #151d28; stroke: var(--zid-steel-dim); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-tangle { opacity: 0.9; }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-node   { fill: var(--zid-warn); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-ring   { opacity: 0; transform: scale(0.4); stroke: var(--zid-warn); }

/* =========================
   02 — WE DESIGN
   Scattered modules snap onto a grid and are joined by two rails.
   ========================= */
[data-zid-instrument="design"] .zi-rail { transition-duration: 600ms; transition-delay: 0ms; }
[data-zid-instrument="design"] .zi-tap  { transition-duration: 320ms; transition-delay: 950ms; }

.zi-mod {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 250ms,
    opacity 450ms ease 250ms;
}

.zi-mod rect {
  fill: #1c273b;
  stroke: var(--zid-steel);
  stroke-width: 1.5;
}

.zi-mod.m2 { transition-delay: 310ms; }
.zi-mod.m3 { transition-delay: 370ms; }
.zi-mod.m4 { transition-delay: 430ms; }
.zi-mod.m5 { transition-delay: 490ms; }
.zi-mod.m6 { transition-delay: 550ms; }

.zi-mod.m1 .zi-pip { transition-delay: 1300ms; }
.zi-mod.m2 .zi-pip { transition-delay: 1370ms; }
.zi-mod.m3 .zi-pip { transition-delay: 1440ms; }
.zi-mod.m4 .zi-pip { transition-delay: 1510ms; }
.zi-mod.m5 .zi-pip { transition-delay: 1580ms; }
.zi-mod.m6 .zi-pip { transition-delay: 1650ms; }

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-mod    { opacity: 0.6; }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-mod.m1 { transform: translate(-28px, 34px) rotate(-14deg); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-mod.m2 { transform: translate(22px, -30px) rotate(9deg); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-mod.m3 { transform: translate(48px, 40px) rotate(21deg); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-mod.m4 { transform: translate(36px, -22px) rotate(-8deg); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-mod.m5 { transform: translate(-18px, 30px) rotate(16deg); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-mod.m6 { transform: translate(60px, -12px) rotate(-19deg); }

/* =========================
   03 — WE PLAN
   Three traces wrap the chip in guard rings; each ends in a status light.
   The calmest of the five: slow draw, nothing else moves.
   ========================= */
[data-zid-instrument="plan"] .zi-guard { transition-duration: 1150ms; transition-delay: 0ms; }
[data-zid-instrument="plan"] .zi-g2    { transition-delay: 160ms; }
[data-zid-instrument="plan"] .zi-g3    { transition-delay: 320ms; }

[data-zid-instrument="plan"] .zi-p1   { transition-delay: 1200ms; }
[data-zid-instrument="plan"] .zi-p2   { transition-delay: 1400ms; }
[data-zid-instrument="plan"] .zi-p3   { transition-delay: 1600ms; }
[data-zid-instrument="plan"] .zi-core { transition-delay: 1900ms; }

/* =========================
   04 — WE ACT
   Five systems, one flagged. A single trace goes straight to it. The
   shortest, sharpest motion of the five.
   ========================= */
.zid-section-we-act {
  --zid-trace-ms: 320ms;
}

.zi-rowbox {
  fill: #1c273b;
  stroke: var(--zid-steel);
  stroke-width: 1.5;
  transition: stroke 220ms ease 300ms;
}

.zi-bar {
  fill: var(--zid-steel-dim);
  opacity: 0.7;
}

/* Every light ends green. Before, they show everyday states. */
.zi-steady {
  fill: var(--zid-ok);
  transition: fill 300ms ease 1220ms;
}

.zi-steady.d1 { transition-delay: 1620ms; }
.zi-steady.d2 { transition-delay: 1740ms; }
.zi-steady.d3 { transition-delay: 1860ms; }

/* Each row's meter fills as the bus reaches it, then closes green */
.zi-bar-fill.d1 { transition-delay: 1200ms, 1620ms; }
.zi-bar-fill.d2 { transition-delay: 1320ms, 1740ms; }
.zi-bar-fill.d3 { transition-delay: 1440ms, 1860ms; }

[data-zid-instrument="act"] .zi-row-ring.d1 { transition-delay: 1620ms, 1620ms, 0ms; }
[data-zid-instrument="act"] .zi-row-ring.d2 { transition-delay: 1740ms, 1740ms, 0ms; }
[data-zid-instrument="act"] .zi-row-ring.d3 { transition-delay: 1860ms, 1860ms, 0ms; }

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-steady.zi-st-ok        { fill: #2a7a58; }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-steady.zi-st-standby   { fill: var(--zid-steel); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-steady.zi-st-scheduled { fill: #e8d3a3; }

/* The bus that wires the other rows in after the fix */
[data-zid-instrument="act"] .zi-route.zi-branch    { transition-duration: 260ms; transition-delay: 940ms; }
[data-zid-instrument="act"] .zi-route.zi-branch.b2 { transition-delay: 1060ms; }
[data-zid-instrument="act"] .zi-route.zi-branch.b3 { transition-delay: 1180ms; }

.zi-junction {
  fill: var(--zid-trace-color);
  transition: opacity 150ms ease 900ms;
}

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-junction { opacity: 0; }

/* The flagged row's work: fills in gold, then closes green */
.zi-bar-fill {
  fill: var(--zid-ok);
  transform-box: fill-box;
  transform-origin: left center;
  transition:
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1) 260ms,
    fill 250ms ease 700ms;
}

/* One ripple from the light as it resolves. Plays once, on release. */
.zi-ripple {
  fill: none;
  stroke: var(--zid-ok);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes zidRipple {
  from { opacity: 0.85; transform: scale(1); }
  to   { opacity: 0;    transform: scale(2.8); }
}

@media (prefers-reduced-motion: no-preference) {
  [data-zid-instrument="act"] .zi-ripple {
    animation: zidRipple 750ms ease-out 720ms forwards;
  }
}

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-ripple   { animation: none; }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-bar-fill { transform: scaleX(0); fill: var(--zid-trace-color); }

[data-zid-instrument="act"] .zi-route {
  transition-duration: 260ms;
  transition-delay: 0ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-zid-instrument="act"] .zi-node {
  transition-duration: 200ms;
  transition-delay: 700ms;
}

[data-zid-instrument="act"] .zi-ring {
  transition-duration: 300ms, 300ms, 200ms;
  transition-delay: 220ms, 220ms, 700ms;
}

[data-zid-instrument="act"] .zi-rowbox-fault {
  transition-delay: 700ms;
}

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-rowbox-fault { stroke: var(--zid-warn); }
:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-row-ring { stroke: var(--zid-ok); }

/* =========================
   05 — YOU CHOOSE
   The last trace on the page ends in a button: the one action.
   ========================= */
[data-zid-instrument="choose"] .zi-route { transition-duration: 420ms; transition-delay: 0ms; }
[data-zid-instrument="choose"] .zi-pip   { transition-delay: 520ms; }

.zi-btn {
  cursor: pointer;
  outline: none;
}

.zi-btn rect {
  fill: #1c273b;
  stroke: var(--zid-trace-color);
  stroke-width: 1.75;
  transition: stroke 300ms ease 420ms, fill 180ms ease, stroke-width 180ms ease;
}

.zi-btn-label {
  fill: #f2f4f7;
  font-family: var(--wp--preset--font-family--optima);
  font-size: 21px;
  font-weight: 700;
}

.zi-btn-arrow {
  fill: none;
  stroke: var(--zid-trace-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.zi-btn:hover rect,
.zi-btn:focus-visible rect {
  fill: #24324a;
  stroke-width: 2.5;
}

.zi-btn:hover .zi-btn-arrow,
.zi-btn:focus-visible .zi-btn-arrow {
  transform: translateX(5px);
}

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-btn rect { stroke: var(--zid-steel-dim); }

/* The drawing shrinks on phones, so the button label gets a larger size there */
@media (max-width: 781px) {
  .zi-btn-label {
    font-size: 24px;
  }
}

/* Framing traces around the button: draw outward after it goes live */
[data-zid-instrument="choose"] .zi-frame    { transition-duration: 380ms; transition-delay: 600ms; }
[data-zid-instrument="choose"] .zi-frame.f3,
[data-zid-instrument="choose"] .zi-frame.f7 { transition-delay: 660ms; }
[data-zid-instrument="choose"] .zi-frame.f4,
[data-zid-instrument="choose"] .zi-frame.f6 { transition-delay: 720ms; }
[data-zid-instrument="choose"] .zi-frame.f5 { transition-delay: 780ms; }

.zi-endnodes circle {
  fill: #151d28;
  stroke: var(--zid-trace-color);
  stroke-width: 1.5;
  transition: opacity 260ms ease 1050ms;
}

:is(.zid-section-svg.is-armed, .zid-arm .zid-section-svg:not(.is-live)) .zi-endnodes circle { opacity: 0; }

/* Touch devices get Call / Text / Email in place of the single button,
   when the theme has contact details set (data-zid-direct="1"). */
.zi-btn-direct {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  [data-zid-direct="1"] .zi-btn-page   { display: none; }
  [data-zid-direct="1"] .zi-btn-direct { display: inline; }
}