/* ==========================================================================
   construction-heroes.css
   Page-scoped overrides for the five Construction solution heroes.

   Loaded AFTER enterprise-heroes.css and only by pages under
   solutions/construction/. It reuses the enterprise hero band, grid, ink
   alignment math, figure sizing and copy treatment verbatim. The only
   content difference is that longer construction titles may wrap; type size,
   subtitle measure, spacing and hierarchy remain the enterprise standard.

   Ink vars match .enthero--operations (--ink-x0:190; --ink-w:240;
   --ink-edge:0.7px) so every construction diagram shares one baseline with
   the approved enterprise pages. All diagram geometry lives inside
   x 192-428 / y 30-256 of the shared viewBox "188 26 244 234".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared ink alignment for all five construction heroes
   -------------------------------------------------------------------------- */
.enthero--con-capital,
.enthero--con-delivery,
.enthero--con-controls,
.enthero--con-quality,
.enthero--con-excellence {
  --ink-x0: 190;
  --ink-w: 240;
  --ink-edge: 0.7px;
}

/* --------------------------------------------------------------------------
   2. Wrapping titles — enterprise typography, with wrapping enabled
   -------------------------------------------------------------------------- */
.enthero--con-capital .enthero__copy h1,
.enthero--con-delivery .enthero__copy h1,
.enthero--con-controls .enthero__copy h1,
.enthero--con-quality .enthero__copy h1,
.enthero--con-excellence .enthero__copy h1 {
  white-space: normal;
  text-wrap: balance;
}

/* Match the enterprise suite's three-line desktop lede rhythm with a
   page-specific measure rather than authored line breaks. */
.enthero--con-capital .enthero__lede {
  max-width: 22.5em;
}

.enthero--con-delivery .enthero__lede {
  max-width: 22em;
}

.enthero--con-controls .enthero__lede {
  max-width: 22em;
}

.enthero--con-quality .enthero__lede {
  max-width: 22em;
}

.enthero--con-excellence .enthero__lede {
  max-width: 21.5em;
}

/* --------------------------------------------------------------------------
   3. Staggered reveal for the construction diagrams
      Every primitive is a visible static shape by default; the animation
      only reveals it. If the animation never runs, the diagram still reads
      as finished line art.

      Note: these diagrams deliberately do NOT use a dashoffset draw-on.
      The shared enterprise rule sets `vector-effect: non-scaling-stroke`
      on every path in a .dg--v2 figure, which makes stroke-dasharray
      resolve in device pixels rather than user units. A pathLength-based
      dash then truncates the line at whatever the current figure scale
      happens to be. A staggered opacity reveal is scale-independent and
      keeps the same sequenced feel.
   -------------------------------------------------------------------------- */
.dgc-draw,
.dgc-pop {
  opacity: 1;
  animation: dgc-pop-in 420ms cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes dgc-pop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dgc-draw,
  .dgc-pop {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   4. Responsive — mirrors the enterprise hero breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .enthero--con-capital .enthero__copy h1,
  .enthero--con-delivery .enthero__copy h1,
  .enthero--con-controls .enthero__copy h1,
  .enthero--con-quality .enthero__copy h1,
  .enthero--con-excellence .enthero__copy h1 {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   5. Capital Strategy & PMO large-motion prototype

   This single-page prototype tests the proposed suite-wide animation system:
   large right-half composition, one clear operating story, and a coordinated
   5.4s enter / hold / exit loop. It intentionally does not affect the other
   four construction pages or any enterprise solution page.
   -------------------------------------------------------------------------- */
.enthero--con-capital {
  --ink-x0: 0;
  --ink-w: 620;
  --ink-hu: 360;
  --ink-y0: 0;
  --ink-h: clamp(260px, 25.13vw, 380px);
  --ink-edge: 1px;
}

.enthero--con-capital .dg--capital-prototype {
  --csp-enter: 4s;
  overflow: visible;
}

.enthero--con-capital .dg--capital-prototype path,
.enthero--con-capital .dg--capital-prototype rect {
  transform-box: fill-box;
  transform-origin: center;
}

.enthero--con-capital .csp-initiative {
  fill: #fff;
  stroke: var(--slate-deep);
  stroke-width: 2;
  opacity: 0;
  animation: csp-initiative-enter var(--csp-enter) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.enthero--con-capital .csp-initiative--one {
  --csp-from-x: -34px;
  --csp-from-y: -14px;
}

.enthero--con-capital .csp-initiative--two {
  --csp-from-x: -54px;
  --csp-from-y: 8px;
  animation-delay: 90ms;
}

.enthero--con-capital .csp-initiative--three {
  --csp-from-x: -26px;
  --csp-from-y: 18px;
  animation-delay: 180ms;
}

.enthero--con-capital .csp-flow,
.enthero--con-capital .csp-spine,
.enthero--con-capital .csp-route,
.enthero--con-capital .csp-level {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: none;
}

.enthero--con-capital .csp-flow {
  stroke: var(--slate-deep);
  stroke-width: 2;
  animation: csp-flow-enter var(--csp-enter) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enthero--con-capital .csp-flow--two {
  animation-delay: 90ms;
}

.enthero--con-capital .csp-flow--three {
  animation-delay: 180ms;
}

.enthero--con-capital .csp-spine {
  stroke: var(--burgundy);
  stroke-width: 2.5;
  animation: csp-spine-enter var(--csp-enter) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enthero--con-capital .csp-gate {
  fill: #fff;
  stroke: var(--ember);
  stroke-width: 2.5;
  opacity: 0;
  animation: csp-gate-enter var(--csp-enter) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.enthero--con-capital .csp-route {
  stroke: var(--rust-deep);
  stroke-width: 4;
  animation: csp-route-enter var(--csp-enter) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enthero--con-capital .csp-frame {
  fill: none;
  stroke: var(--slate-deep);
  stroke-width: 2.5;
  opacity: 0;
  animation: csp-frame-enter var(--csp-enter) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enthero--con-capital .csp-level {
  stroke: var(--slate);
  stroke-width: 2;
  animation: csp-level-enter var(--csp-enter) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.enthero--con-capital .csp-level--two {
  animation-delay: 80ms;
}

.enthero--con-capital .csp-level--three {
  animation-delay: 160ms;
}

.enthero--con-capital .csp-node {
  fill: var(--rust-deep);
  stroke: none;
  opacity: 0;
  animation: csp-node-enter var(--csp-enter) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.enthero--con-capital .csp-node--two {
  animation-delay: 80ms;
}

.enthero--con-capital .csp-node--three {
  animation-delay: 160ms;
}

@keyframes csp-initiative-enter {
  0%,
  8% {
    opacity: 0;
    transform: translate(var(--csp-from-x), var(--csp-from-y));
  }
  45%,
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes csp-flow-enter {
  0%,
  22% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  58%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes csp-spine-enter {
  0%,
  35% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  68%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes csp-gate-enter {
  0%,
  42% {
    opacity: 0;
    transform: scale(0.72);
  }
  72%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes csp-route-enter {
  0%,
  48% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  78%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes csp-frame-enter {
  0%,
  55% {
    opacity: 0;
    transform: translateX(28px);
  }
  85%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes csp-level-enter {
  0%,
  62% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  92%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0.58;
  }
}

@keyframes csp-node-enter {
  0%,
  70% {
    opacity: 0;
    transform: translateX(-12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .enthero--con-capital .csp-initiative,
  .enthero--con-capital .csp-gate,
  .enthero--con-capital .csp-node {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .enthero--con-capital .csp-flow,
  .enthero--con-capital .csp-spine,
  .enthero--con-capital .csp-route,
  .enthero--con-capital .csp-level {
    animation: none !important;
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .enthero--con-capital .csp-level {
    opacity: 0.58;
  }

  .enthero--con-capital .csp-frame {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}