/* Replaces photorealistic scene art with Imagen scenes based on the logistics-future-tech PPT main visuals. */

.pack-scene,
.routeopt-scene,
.agentdispatch-scene,
.v2x-scene,
.airground-scene,
.trusttrack-scene,
.selfheal-scene {
  background: #ffffff;
  aspect-ratio: 16 / 9;
}

.pack-scene::before,
.pack-scene::after,
.routeopt-scene::before,
.routeopt-scene::after,
.agentdispatch-scene::before,
.agentdispatch-scene::after,
.v2x-scene::before,
.v2x-scene::after,
.airground-scene::before,
.airground-scene::after,
.trusttrack-scene::before,
.trusttrack-scene::after,
.selfheal-scene::before,
.selfheal-scene::after {
  display: none;
}

.pack-scene-art,
.routeopt-scene-art,
.agentdispatch-scene-art,
.v2x-scene-art,
.airground-scene-art,
.trusttrack-scene-art,
.selfheal-scene-art {
  background: #ffffff;
  object-fit: contain;
  object-position: center;
}

.pack-camera-tag,
.pack-measure-box,
.pack-material-zone,
.pack-scan-grid,
.pack-result-card,
.pack-material-card,
.routeopt-svg,
.routeopt-heat-zone,
.routeopt-map-card,
.routeopt-candidate-card,
.routeopt-weight-card,
.routeopt-node,
.agentdispatch-svg,
.agentdispatch-conflict-zone,
.agentdispatch-card,
.agentdispatch-agent,
.agentdispatch-charger,
.v2x-svg,
.v2x-risk-zone,
.v2x-card,
.v2x-node,
.airground-svg,
.airground-sky-zone,
.airground-card,
.airground-node,
.trusttrack-svg,
.trusttrack-alert-zone,
.trusttrack-card,
.trusttrack-node,
.selfheal-svg,
.selfheal-fault-zone,
.selfheal-card,
.selfheal-node {
  display: none;
}

@media (max-width: 760px) {
  .pack-scene,
  .routeopt-scene,
  .agentdispatch-scene,
  .v2x-scene,
  .airground-scene,
  .trusttrack-scene,
  .selfheal-scene {
    aspect-ratio: 16 / 9;
  }
}

/* Keep the generated simulation scenes inside the left stage, never under the operator panel. */
.pack-layout,
.routeopt-layout,
.agentdispatch-layout,
.v2x-layout,
.airground-layout,
.trusttrack-layout,
.selfheal-layout {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  max-width: 100%;
}

.pack-stage-card,
.routeopt-stage-card,
.agentdispatch-stage-card,
.v2x-stage-card,
.airground-stage-card,
.trusttrack-stage-card,
.selfheal-stage-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
}

.pack-console,
.routeopt-console,
.agentdispatch-console,
.v2x-console,
.airground-console,
.trusttrack-console,
.selfheal-console {
  position: relative;
  z-index: 4;
  min-width: 0;
}

.pack-scene,
.routeopt-scene,
.agentdispatch-scene,
.v2x-scene,
.airground-scene,
.trusttrack-scene,
.selfheal-scene {
  min-height: 0;
  width: 100%;
  height: clamp(360px, 34vw, 580px);
  max-width: 100%;
  contain: paint;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 1)),
    #ffffff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.05);
}

.pack-scene-art,
.routeopt-scene-art,
.agentdispatch-scene-art,
.v2x-scene-art,
.airground-scene-art,
.trusttrack-scene-art,
.selfheal-scene-art {
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

.pack-scene::before,
.routeopt-scene::before,
.agentdispatch-scene::before,
.v2x-scene::before,
.airground-scene::before,
.trusttrack-scene::before,
.selfheal-scene::before {
  position: absolute;
  z-index: 2;
  display: block;
  content: "";
  inset: 12px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 10px;
  mix-blend-mode: screen;
  pointer-events: none;
}

.pack-scene::after,
.routeopt-scene::after,
.agentdispatch-scene::after,
.v2x-scene::after,
.airground-scene::after,
.trusttrack-scene::after,
.selfheal-scene::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  content: "";
  pointer-events: none;
  mix-blend-mode: screen;
}

.pack-scene::before {
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(90deg, transparent 0 35%, rgba(14, 165, 233, 0.18) 39%, rgba(14, 165, 233, 0.52) 41%, transparent 45% 100%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(37, 99, 235, 0.13) 27px 29px);
  background-size: 210% 100%, 100% 100%;
  animation: packMeasureGate 3.2s ease-in-out infinite;
}

.pack-scene::after {
  background:
    radial-gradient(circle at 35% 51%, rgba(14, 165, 233, 0.36) 0 7%, transparent 8%),
    radial-gradient(circle at 58% 61%, rgba(249, 115, 22, 0.22) 0 6%, transparent 7%),
    radial-gradient(circle at 77% 70%, rgba(16, 185, 129, 0.28) 0 6%, transparent 7%),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(37, 99, 235, 0.18) 58px 70px, transparent 70px 116px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 180% 6px;
  background-position: 0 0, 0 0, 0 0, 0 78%;
  animation: packConveyorFeed 2.7s linear infinite;
}

.pack-process-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.pack-process-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pack-process-path {
  fill: none;
  stroke: var(--path-color, #2563eb);
  stroke-dasharray: 15 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(37, 99, 235, 0.28));
  transition:
    opacity 180ms ease,
    stroke-width 180ms ease;
}

.path-feed,
.pin-feed,
.note-feed {
  --step-color: #2563eb;
  --path-color: #2563eb;
}

.path-measure,
.pin-measure,
.note-measure {
  --step-color: #0ea5e9;
  --path-color: #0ea5e9;
}

.path-fit,
.pin-fit,
.note-fit {
  --step-color: #10b981;
  --path-color: #10b981;
}

.path-cushion,
.pin-cushion,
.note-cushion {
  --step-color: #f97316;
  --path-color: #f97316;
}

.path-seal,
.pin-seal,
.note-seal {
  --step-color: #16a34a;
  --path-color: #16a34a;
}

.path-label,
.pin-label,
.note-label {
  --step-color: #2563eb;
  --path-color: #2563eb;
}

.path-blocked,
.pin-blocked,
.note-blocked {
  --step-color: #ef4444;
  --path-color: #ef4444;
}

.pack-process-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid var(--step-color);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--step-color) 18%, transparent),
    0 8px 18px rgba(15, 23, 42, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.pin-feed {
  left: 15%;
  top: 46%;
}

.pin-measure {
  left: 35%;
  top: 43%;
}

.pin-fit {
  left: 65%;
  top: 28%;
}

.pin-cushion,
.pin-blocked {
  left: 50%;
  top: 58%;
}

.pin-seal {
  left: 76%;
  top: 64%;
}

.pin-label {
  left: 84%;
  top: 73%;
}

.pack-process-note {
  position: absolute;
  width: clamp(128px, 15vw, 180px);
  padding: 8px 10px;
  border: 2px solid color-mix(in srgb, var(--step-color) 72%, white);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.76);
  color: #0f172a;
  line-height: 1.25;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(6px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.pack-process-note span {
  display: block;
  color: var(--step-color);
  font-size: 0.76rem;
  font-weight: 950;
}

.pack-process-note strong {
  display: block;
  margin-top: 3px;
  font-size: 0.9rem;
  font-weight: 950;
}

.note-feed {
  left: 20%;
  top: 34%;
}

.note-measure {
  left: 38%;
  top: 29%;
}

.note-fit {
  left: 60%;
  top: 22%;
}

.note-cushion,
.note-blocked {
  left: 53%;
  top: 71%;
}

.note-seal {
  left: 73%;
  top: 47%;
}

.note-label {
  left: 82%;
  top: 82%;
}

.pack-scene:is(.pack-measure, .pack-fit, .pack-cushion, .pack-seal, .pack-label) .path-feed,
.pack-scene:is(.pack-fit, .pack-cushion, .pack-seal, .pack-label) .path-measure,
.pack-scene:is(.pack-cushion, .pack-seal, .pack-label) .path-fit,
.pack-scene:is(.pack-seal, .pack-label) .path-cushion,
.pack-scene.pack-label .path-seal {
  stroke-dasharray: 0;
  stroke-width: 4;
  opacity: 0.52;
}

.pack-scene:is(.pack-measure, .pack-fit, .pack-cushion, .pack-seal, .pack-label) .pin-feed,
.pack-scene:is(.pack-fit, .pack-cushion, .pack-seal, .pack-label) .pin-measure,
.pack-scene:is(.pack-cushion, .pack-seal, .pack-label) .pin-fit,
.pack-scene:is(.pack-seal, .pack-label) .pin-cushion,
.pack-scene.pack-label .pin-seal {
  opacity: 0.7;
  transform: translate(-50%, -50%) scale(0.92);
}

.pack-scene.pack-feed .path-feed,
.pack-scene.pack-measure .path-measure,
.pack-scene.pack-fit .path-fit,
.pack-scene.pack-cushion .path-cushion,
.pack-scene.pack-seal .path-seal,
.pack-scene.pack-label .path-label,
.pack-scene.pack-blocked .path-blocked {
  stroke-width: 6;
  opacity: 1;
  animation: packProcessDash 1.05s linear infinite;
}

.pack-scene.pack-feed .pin-feed,
.pack-scene.pack-measure .pin-measure,
.pack-scene.pack-fit .pin-fit,
.pack-scene.pack-cushion .pin-cushion,
.pack-scene.pack-seal .pin-seal,
.pack-scene.pack-label .pin-label,
.pack-scene.pack-blocked .pin-blocked {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: packProcessPulse 1.35s ease-in-out infinite;
}

.pack-scene.pack-feed .note-feed,
.pack-scene.pack-measure .note-measure,
.pack-scene.pack-fit .note-fit,
.pack-scene.pack-cushion .note-cushion,
.pack-scene.pack-seal .note-seal,
.pack-scene.pack-label .note-label,
.pack-scene.pack-blocked .note-blocked {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.pack-scene.pack-blocked .path-feed,
.pack-scene.pack-blocked .path-measure,
.pack-scene.pack-blocked .path-fit,
.pack-scene.pack-blocked .pin-feed,
.pack-scene.pack-blocked .pin-measure,
.pack-scene.pack-blocked .pin-fit {
  opacity: 0.5;
}

.routeopt-scene::before {
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 22% 38%, rgba(37, 99, 235, 0.34) 0 1.7%, transparent 2.3%),
    radial-gradient(circle at 37% 48%, rgba(16, 185, 129, 0.34) 0 1.7%, transparent 2.3%),
    radial-gradient(circle at 55% 49%, rgba(239, 68, 68, 0.28) 0 1.9%, transparent 2.6%),
    radial-gradient(circle at 74% 64%, rgba(37, 99, 235, 0.3) 0 1.7%, transparent 2.3%),
    radial-gradient(circle at 84% 71%, rgba(16, 185, 129, 0.32) 0 2.2%, transparent 2.9%);
  animation: routeNodeReasoning 2.8s ease-in-out infinite;
}

.routeopt-scene::after {
  background:
    linear-gradient(132deg, transparent 23%, rgba(16, 185, 129, 0.08) 32%, rgba(16, 185, 129, 0.38) 39%, transparent 48%),
    repeating-linear-gradient(132deg, transparent 0 34px, rgba(16, 185, 129, 0.22) 34px 45px, transparent 45px 82px),
    linear-gradient(132deg, transparent 44%, rgba(239, 68, 68, 0.2) 49%, transparent 54%);
  background-size: 190% 190%, 190% 190%, 100% 100%;
  animation: routeRoadFlow 4.1s linear infinite;
}

.routeopt-process-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.routeopt-process-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.routeopt-process-graph,
.routeopt-process-route,
.routeopt-process-link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition:
    opacity 180ms ease,
    stroke-width 180ms ease;
}

.routeopt-process-graph {
  stroke: rgba(37, 99, 235, 0.66);
  stroke-dasharray: 4 12;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(37, 99, 235, 0.2));
}

.routeopt-process-route {
  stroke-width: 5;
  stroke-dasharray: 18 12;
  filter: drop-shadow(0 0 8px rgba(15, 23, 42, 0.24));
}

.routeopt-route-safe {
  stroke: #10b981;
}

.routeopt-route-fast {
  stroke: #f59e0b;
}

.routeopt-route-energy {
  stroke: #2563eb;
}

.routeopt-route-blocked {
  stroke: #ef4444;
  stroke-width: 8;
}

.routeopt-process-link {
  stroke: var(--route-step-color, #2563eb);
  stroke-dasharray: 12 10;
  stroke-width: 5;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--route-step-color) 42%, transparent));
}

.routeopt-process-zone {
  position: absolute;
  left: 56%;
  top: 54%;
  width: 14%;
  height: 12%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(239, 68, 68, 0.56), rgba(249, 115, 22, 0.28) 48%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.routeopt-process-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid var(--route-step-color, #2563eb);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--route-step-color, #2563eb) 18%, transparent),
    0 8px 18px rgba(15, 23, 42, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.routeopt-pin-start {
  left: 25.2%;
  top: 72.4%;
  --route-step-color: #2563eb;
}

.routeopt-pin-a {
  left: 38.2%;
  top: 64.1%;
  --route-step-color: #0ea5e9;
}

.routeopt-pin-b {
  left: 56%;
  top: 54.4%;
  --route-step-color: #ef4444;
}

.routeopt-pin-c {
  left: 62.5%;
  top: 47.2%;
  --route-step-color: #10b981;
}

.routeopt-pin-charge {
  left: 46.5%;
  top: 36.5%;
  --route-step-color: #2563eb;
}

.routeopt-pin-end {
  left: 80.8%;
  top: 20.6%;
  --route-step-color: #16a34a;
}

.routeopt-pin-vehicle {
  left: 62.4%;
  top: 47.2%;
  --route-step-color: #10b981;
}

.routeopt-process-note {
  position: absolute;
  width: clamp(132px, 16vw, 204px);
  padding: 8px 10px;
  border: 2px solid color-mix(in srgb, var(--route-step-color, #2563eb) 72%, white);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.76);
  color: #0f172a;
  line-height: 1.25;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(6px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.routeopt-process-note span {
  display: block;
  color: var(--route-step-color, #2563eb);
  font-size: 0.76rem;
  font-weight: 950;
}

.routeopt-process-note strong {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  font-weight: 950;
}

.note-route-feed {
  left: 28%;
  top: 66%;
  --route-step-color: #2563eb;
}

.note-route-map {
  left: 40%;
  top: 54%;
  --route-step-color: #0ea5e9;
}

.note-route-weight {
  left: 53%;
  top: 40%;
  --route-step-color: #ef4444;
}

.note-route-compare {
  left: 61%;
  top: 25%;
  --route-step-color: #f59e0b;
}

.note-route-dispatch {
  left: 71%;
  top: 38%;
  --route-step-color: #10b981;
}

.note-route-record {
  left: 79%;
  top: 67%;
  --route-step-color: #2563eb;
}

.note-route-blocked {
  left: 54%;
  top: 62%;
  --route-step-color: #ef4444;
}

.link-feed {
  --route-step-color: #2563eb;
}

.link-map {
  --route-step-color: #0ea5e9;
}

.link-weight,
.routeopt-scene.routeopt-blocked .link-weight {
  --route-step-color: #ef4444;
}

.link-dispatch {
  --route-step-color: #10b981;
}

.link-record {
  --route-step-color: #2563eb;
}

.routeopt-scene:is(.routeopt-map, .routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record, .routeopt-blocked) .routeopt-process-graph {
  opacity: 0.64;
  animation: routeOptProcessDash 1.2s linear infinite;
}

.routeopt-scene:is(.routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record) .routeopt-process-route {
  opacity: 0.42;
}

.routeopt-scene:is(.routeopt-compare, .routeopt-dispatch, .routeopt-record).case-normal .routeopt-route-safe,
.routeopt-scene:is(.routeopt-compare, .routeopt-dispatch, .routeopt-record).case-traffic .routeopt-route-safe,
.routeopt-scene:is(.routeopt-compare, .routeopt-dispatch, .routeopt-record).case-urgent .routeopt-route-fast,
.routeopt-scene:is(.routeopt-compare, .routeopt-dispatch, .routeopt-record).case-battery .routeopt-route-energy {
  stroke-width: 8;
  opacity: 1;
  animation: routeOptProcessDash 1.05s linear infinite;
}

.routeopt-scene.routeopt-blocked .routeopt-route-safe,
.routeopt-scene.routeopt-blocked .routeopt-route-fast,
.routeopt-scene.routeopt-blocked .routeopt-route-energy {
  opacity: 0.24;
}

.routeopt-scene.routeopt-blocked .routeopt-route-blocked {
  opacity: 1;
  animation: routeOptProcessDash 0.85s linear infinite;
}

.routeopt-scene:is(.routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record, .routeopt-blocked) .routeopt-zone-congestion,
.routeopt-scene.case-traffic .routeopt-zone-congestion {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.routeopt-scene.routeopt-feed .link-feed,
.routeopt-scene.routeopt-map .link-map,
.routeopt-scene.routeopt-weight .link-weight,
.routeopt-scene.routeopt-dispatch .link-dispatch,
.routeopt-scene.routeopt-record .link-record,
.routeopt-scene.routeopt-blocked .link-weight {
  opacity: 1;
  animation: routeOptProcessDash 0.95s linear infinite;
}

.routeopt-scene:not(.waiting) .routeopt-pin-start,
.routeopt-scene:is(.routeopt-map, .routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record, .routeopt-blocked) .routeopt-pin-a,
.routeopt-scene:is(.routeopt-map, .routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record, .routeopt-blocked) .routeopt-pin-b,
.routeopt-scene:is(.routeopt-map, .routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record, .routeopt-blocked) .routeopt-pin-c,
.routeopt-scene:is(.routeopt-map, .routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record, .routeopt-blocked) .routeopt-pin-charge,
.routeopt-scene:is(.routeopt-map, .routeopt-weight, .routeopt-compare, .routeopt-dispatch, .routeopt-record, .routeopt-blocked) .routeopt-pin-end {
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(0.92);
}

.routeopt-scene.routeopt-feed .routeopt-pin-start,
.routeopt-scene.routeopt-map .routeopt-pin-a,
.routeopt-scene.routeopt-weight .routeopt-pin-b,
.routeopt-scene.routeopt-compare .routeopt-pin-charge,
.routeopt-scene.routeopt-dispatch .routeopt-pin-vehicle,
.routeopt-scene.routeopt-record .routeopt-pin-end,
.routeopt-scene.routeopt-blocked .routeopt-pin-b {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: routeOptProcessPulse 1.35s ease-in-out infinite;
}

.routeopt-scene.routeopt-dispatch .routeopt-pin-vehicle,
.routeopt-scene.routeopt-record .routeopt-pin-vehicle {
  opacity: 1;
}

.routeopt-scene.routeopt-feed .note-route-feed,
.routeopt-scene.routeopt-map .note-route-map,
.routeopt-scene.routeopt-weight .note-route-weight,
.routeopt-scene.routeopt-compare .note-route-compare,
.routeopt-scene.routeopt-dispatch .note-route-dispatch,
.routeopt-scene.routeopt-record .note-route-record,
.routeopt-scene.routeopt-blocked .note-route-blocked {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.agentdispatch-scene::before {
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(99, 102, 241, 0.3) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 44%, transparent 0 12%, rgba(99, 102, 241, 0.18) 13%, transparent 15%),
    radial-gradient(circle at 18% 36%, rgba(37, 99, 235, 0.22) 0 4%, transparent 5%),
    radial-gradient(circle at 28% 76%, rgba(16, 185, 129, 0.2) 0 4%, transparent 5%),
    radial-gradient(circle at 77% 33%, rgba(249, 115, 22, 0.18) 0 4%, transparent 5%),
    radial-gradient(circle at 82% 74%, rgba(16, 185, 129, 0.2) 0 4%, transparent 5%);
  animation: agentHubHeartbeat 2.2s ease-in-out infinite;
}

.agentdispatch-scene::after {
  background:
    linear-gradient(32deg, transparent 18%, rgba(37, 99, 235, 0.2) 34%, transparent 45%),
    linear-gradient(148deg, transparent 22%, rgba(16, 185, 129, 0.2) 40%, transparent 52%),
    linear-gradient(4deg, transparent 38%, rgba(249, 115, 22, 0.18) 48%, transparent 57%);
  background-size: 160% 160%, 160% 160%, 160% 160%;
  animation: agentNegotiationLinks 3.1s ease-in-out infinite;
}

.v2x-scene::before {
  inset: 0;
  border: 0;
  background:
    repeating-radial-gradient(circle at 61% 43%, rgba(37, 99, 235, 0.22) 0 2px, transparent 3px 17px),
    radial-gradient(circle at 61% 43%, rgba(249, 115, 22, 0.22) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 61%, rgba(16, 185, 129, 0.2) 0 4%, transparent 5%);
  animation: v2xRoadsideBroadcast 2.5s ease-out infinite;
}

.v2x-scene::after {
  background:
    linear-gradient(128deg, transparent 30%, rgba(16, 185, 129, 0.24) 43%, transparent 54%),
    linear-gradient(18deg, transparent 47%, rgba(37, 99, 235, 0.2) 53%, transparent 60%),
    radial-gradient(circle at 72% 39%, rgba(249, 115, 22, 0.2) 0 6%, transparent 7%);
  background-size: 180% 180%, 140% 140%, 100% 100%;
  animation: v2xGreenWave 3.4s linear infinite;
}

.airground-scene::before {
  inset: 0;
  border: 0;
  background:
    linear-gradient(22deg, transparent 24%, rgba(16, 185, 129, 0.3) 35%, transparent 48%),
    radial-gradient(circle at 43% 57%, rgba(249, 115, 22, 0.24) 0 5%, transparent 6%);
  background-size: 180% 180%, 100% 100%;
  animation: airgroundGroundRelay 3.4s linear infinite;
}

.airground-scene::after {
  background:
    linear-gradient(148deg, transparent 27%, rgba(37, 99, 235, 0.28) 42%, transparent 55%),
    repeating-linear-gradient(148deg, transparent 0 42px, rgba(37, 99, 235, 0.2) 42px 52px, transparent 52px 96px),
    radial-gradient(circle at 78% 42%, rgba(37, 99, 235, 0.24) 0 5%, transparent 6%);
  background-size: 190% 190%, 190% 190%, 100% 100%;
  animation: airgroundDroneCorridor 4.2s linear infinite;
}

.trusttrack-scene::before {
  inset: 0;
  border: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(37, 99, 235, 0.16) 92px 104px, transparent 104px 184px),
    radial-gradient(circle at 18% 34%, rgba(37, 99, 235, 0.22) 0 4%, transparent 5%),
    radial-gradient(circle at 38% 34%, rgba(37, 99, 235, 0.2) 0 4%, transparent 5%),
    radial-gradient(circle at 58% 34%, rgba(37, 99, 235, 0.2) 0 4%, transparent 5%),
    radial-gradient(circle at 80% 34%, rgba(16, 185, 129, 0.22) 0 4%, transparent 5%);
  background-size: 184px 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: trustLedgerCommit 4.8s steps(5, end) infinite;
}

.trusttrack-scene::after {
  background:
    radial-gradient(circle at 27% 56%, rgba(14, 165, 233, 0.2) 0 4%, transparent 5%),
    radial-gradient(circle at 50% 56%, rgba(16, 185, 129, 0.2) 0 4%, transparent 5%),
    radial-gradient(circle at 74% 56%, rgba(249, 115, 22, 0.18) 0 4%, transparent 5%),
    linear-gradient(90deg, transparent 10%, rgba(16, 185, 129, 0.18) 52%, transparent 90%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 180% 3px;
  background-position: 0 0, 0 0, 0 0, -90% 62%;
  animation: trustEvidenceVerify 3.7s linear infinite;
}

.selfheal-scene::before {
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 52% 48%, rgba(239, 68, 68, 0.36) 0 6%, transparent 7%),
    linear-gradient(90deg, transparent 39%, rgba(239, 68, 68, 0.24) 45%, transparent 52%),
    linear-gradient(0deg, transparent 39%, rgba(239, 68, 68, 0.18) 47%, transparent 54%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: selfhealFaultIsolate 2.4s steps(2, end) infinite;
}

.selfheal-scene::after {
  background:
    linear-gradient(4deg, transparent 36%, rgba(16, 185, 129, 0.34) 46%, transparent 56%),
    radial-gradient(circle at 72% 63%, rgba(16, 185, 129, 0.26) 0 5%, transparent 6%),
    linear-gradient(90deg, transparent 15%, rgba(37, 99, 235, 0.16) 35%, transparent 52%);
  background-size: 190% 190%, 100% 100%, 180% 100%;
  animation: selfhealRecoverySwitch 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.stage-process-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.stage-process-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stage-process-line {
  fill: none;
  stroke: var(--step-color, #2563eb);
  stroke-dasharray: 14 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  opacity: 0;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--step-color, #2563eb) 38%, transparent));
  transition:
    opacity 180ms ease,
    stroke-width 180ms ease;
}

.stage-process-zone {
  position: absolute;
  border: 2px dashed var(--step-color, #ef4444);
  background: color-mix(in srgb, var(--step-color, #ef4444) 18%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--step-color, #ef4444) 28%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.stage-process-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid var(--step-color, #2563eb);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--step-color, #2563eb) 17%, transparent),
    0 8px 18px rgba(15, 23, 42, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.stage-process-note {
  position: absolute;
  width: clamp(112px, 14vw, 172px);
  padding: 8px 10px;
  border: 2px solid color-mix(in srgb, var(--step-color, #2563eb) 68%, white);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  color: #0f172a;
  line-height: 1.22;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(6px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.stage-process-note span {
  display: block;
  color: var(--step-color, #2563eb);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.stage-process-note strong {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  font-weight: 950;
}

.agent-process-overlay :is(.agent-line-sense, .agent-pin-sense, .agent-note-sense),
.v2x-process-overlay :is(.v2x-line-sense, .v2x-pin-sense, .v2x-note-sense),
.airground-process-overlay :is(.airground-line-order, .airground-pin-order, .airground-note-order),
.trusttrack-process-overlay :is(.trusttrack-line-register, .trusttrack-pin-register, .trusttrack-note-register),
.selfheal-process-overlay :is(.selfheal-line-listen, .selfheal-pin-listen, .selfheal-note-listen) {
  --step-color: #2563eb;
}

.agent-process-overlay :is(.agent-line-team, .agent-pin-team, .agent-note-team),
.v2x-process-overlay :is(.v2x-line-connect, .v2x-pin-connect, .v2x-note-connect),
.airground-process-overlay :is(.airground-line-dispatch, .airground-pin-dispatch, .airground-note-dispatch),
.trusttrack-process-overlay :is(.trusttrack-line-collect, .trusttrack-pin-collect, .trusttrack-note-collect),
.selfheal-process-overlay :is(.selfheal-line-diagnose, .selfheal-pin-diagnose, .selfheal-note-diagnose) {
  --step-color: #0ea5e9;
}

.agent-process-overlay :is(.agent-line-assign, .agent-pin-assign, .agent-note-assign),
.v2x-process-overlay :is(.v2x-line-negotiate, .v2x-pin-negotiate, .v2x-note-negotiate),
.airground-process-overlay :is(.airground-line-handoff, .airground-pin-handoff, .airground-note-handoff),
.trusttrack-process-overlay :is(.trusttrack-line-verify, .trusttrack-pin-verify, .trusttrack-note-verify),
.selfheal-process-overlay :is(.selfheal-line-isolate, .selfheal-pin-isolate, .selfheal-note-isolate) {
  --step-color: #f97316;
}

.agent-process-overlay :is(.agent-line-negotiate, .agent-pin-negotiate, .agent-note-negotiate),
.v2x-process-overlay :is(.v2x-line-release, .v2x-pin-release, .v2x-note-release),
.airground-process-overlay :is(.airground-line-takeoff, .airground-pin-takeoff, .airground-note-takeoff),
.trusttrack-process-overlay :is(.trusttrack-line-transport, .trusttrack-pin-transport, .trusttrack-note-transport),
.selfheal-process-overlay :is(.selfheal-line-reroute, .selfheal-pin-reroute, .selfheal-note-reroute) {
  --step-color: #10b981;
}

.agent-process-overlay :is(.agent-line-execute, .agent-pin-execute, .agent-note-execute),
.v2x-process-overlay :is(.v2x-line-drive, .v2x-pin-drive, .v2x-note-drive),
.airground-process-overlay :is(.airground-line-deliver, .airground-pin-deliver, .airground-note-deliver),
.trusttrack-process-overlay :is(.trusttrack-line-sign, .trusttrack-pin-sign, .trusttrack-note-sign),
.selfheal-process-overlay :is(.selfheal-line-verify, .selfheal-pin-verify, .selfheal-note-verify) {
  --step-color: #16a34a;
}

.agent-process-overlay :is(.agent-line-review, .agent-pin-review, .agent-note-review),
.v2x-process-overlay :is(.v2x-line-review, .v2x-pin-review, .v2x-note-review),
.airground-process-overlay :is(.airground-line-review, .airground-pin-review, .airground-note-review),
.trusttrack-process-overlay :is(.trusttrack-line-review, .trusttrack-pin-review, .trusttrack-note-review),
.selfheal-process-overlay :is(.selfheal-line-learn, .selfheal-pin-learn, .selfheal-note-learn) {
  --step-color: #7c3aed;
}

.agent-process-overlay :is(.agent-line-blocked, .agent-pin-blocked, .agent-note-blocked, .agent-zone-conflict),
.v2x-process-overlay :is(.v2x-line-blocked, .v2x-pin-blocked, .v2x-note-blocked, .v2x-zone-risk),
.airground-process-overlay :is(.airground-line-blocked, .airground-pin-blocked, .airground-note-blocked, .airground-zone-sky),
.trusttrack-process-overlay :is(.trusttrack-line-blocked, .trusttrack-pin-blocked, .trusttrack-note-blocked, .trusttrack-zone-alert),
.selfheal-process-overlay :is(.selfheal-line-blocked, .selfheal-pin-blocked, .selfheal-note-blocked, .selfheal-zone-fault) {
  --step-color: #ef4444;
}

.agent-pin-sense { left: 26%; top: 25%; }
.agent-pin-team { left: 50%; top: 20%; }
.agent-pin-assign { left: 48%; top: 64%; }
.agent-pin-negotiate { left: 62%; top: 31%; }
.agent-pin-execute { left: 76%; top: 43%; }
.agent-pin-review { left: 54%; top: 84%; }
.agent-pin-blocked { left: 61%; top: 45%; }
.agent-note-sense { left: 24%; top: 37%; }
.agent-note-team { left: 50%; top: 31%; }
.agent-note-assign { left: 43%; top: 76%; }
.agent-note-negotiate { left: 67%; top: 24%; }
.agent-note-execute { left: 79%; top: 56%; }
.agent-note-review { left: 61%; top: 77%; }
.agent-note-blocked { left: 64%; top: 55%; }
.agent-zone-conflict {
  left: 61%;
  top: 44%;
  width: 16%;
  height: 14%;
  border-radius: 999px;
}

.v2x-pin-sense { left: 41%; top: 58%; }
.v2x-pin-connect { left: 55%; top: 28%; }
.v2x-pin-negotiate { left: 62%; top: 42%; }
.v2x-pin-release { left: 71%; top: 36%; }
.v2x-pin-drive { left: 34%; top: 69%; }
.v2x-pin-review { left: 83%; top: 88%; }
.v2x-pin-blocked { left: 63%; top: 38%; }
.v2x-note-sense { left: 38%; top: 47%; }
.v2x-note-connect { left: 49%; top: 18%; }
.v2x-note-negotiate { left: 62%; top: 29%; }
.v2x-note-release { left: 75%; top: 31%; }
.v2x-note-drive { left: 35%; top: 78%; }
.v2x-note-review { left: 76%; top: 78%; }
.v2x-note-blocked { left: 67%; top: 48%; }
.v2x-zone-risk {
  left: 64%;
  top: 37%;
  width: 20%;
  height: 16%;
  border-radius: 999px;
}

.airground-pin-order { left: 25%; top: 45%; }
.airground-pin-dispatch { left: 50%; top: 51%; }
.airground-pin-handoff { left: 41%; top: 56%; }
.airground-pin-takeoff { left: 69%; top: 24%; }
.airground-pin-deliver { left: 80%; top: 50%; }
.airground-pin-review { left: 65%; top: 88%; }
.airground-pin-blocked { left: 73%; top: 22%; }
.airground-note-order { left: 26%; top: 32%; }
.airground-note-dispatch { left: 50%; top: 39%; }
.airground-note-handoff { left: 38%; top: 67%; }
.airground-note-takeoff { left: 67%; top: 35%; }
.airground-note-deliver { left: 79%; top: 62%; }
.airground-note-review { left: 68%; top: 78%; }
.airground-note-blocked { left: 74%; top: 33%; }
.airground-zone-sky {
  left: 73%;
  top: 24%;
  width: 22%;
  height: 16%;
  border-radius: 999px;
}

.trusttrack-pin-register { left: 15%; top: 28%; }
.trusttrack-pin-collect { left: 32%; top: 31%; }
.trusttrack-pin-verify { left: 46%; top: 60%; }
.trusttrack-pin-transport { left: 56%; top: 35%; }
.trusttrack-pin-sign { left: 76%; top: 36%; }
.trusttrack-pin-review { left: 58%; top: 89%; }
.trusttrack-pin-blocked { left: 63%; top: 38%; }
.trusttrack-note-register { left: 19%; top: 42%; }
.trusttrack-note-collect { left: 33%; top: 45%; }
.trusttrack-note-verify { left: 46%; top: 72%; }
.trusttrack-note-transport { left: 55%; top: 24%; }
.trusttrack-note-sign { left: 76%; top: 49%; }
.trusttrack-note-review { left: 61%; top: 78%; }
.trusttrack-note-blocked { left: 65%; top: 50%; }
.trusttrack-zone-alert {
  left: 63%;
  top: 37%;
  width: 15%;
  height: 15%;
  border-radius: 12px;
}

.selfheal-pin-listen { left: 34%; top: 12%; }
.selfheal-pin-diagnose { left: 52%; top: 48%; }
.selfheal-pin-isolate { left: 50%; top: 49%; }
.selfheal-pin-reroute { left: 50%; top: 72%; }
.selfheal-pin-verify { left: 74%; top: 68%; }
.selfheal-pin-learn { left: 78%; top: 13%; }
.selfheal-pin-blocked { left: 51%; top: 47%; }
.selfheal-note-listen { left: 31%; top: 23%; }
.selfheal-note-diagnose { left: 59%; top: 42%; }
.selfheal-note-isolate { left: 50%; top: 61%; }
.selfheal-note-reroute { left: 44%; top: 79%; }
.selfheal-note-verify { left: 73%; top: 80%; }
.selfheal-note-learn { left: 75%; top: 24%; }
.selfheal-note-blocked { left: 56%; top: 58%; }
.selfheal-zone-fault {
  left: 50%;
  top: 47%;
  width: 20%;
  height: 18%;
  border-radius: 12px;
}

.agentdispatch-scene:not(.waiting) .agent-process-overlay .stage-process-pin,
.v2x-scene:not(.waiting) .v2x-process-overlay .stage-process-pin,
.airground-scene:not(.waiting) .airground-process-overlay .stage-process-pin,
.trusttrack-scene:not(.waiting) .trusttrack-process-overlay .stage-process-pin,
.selfheal-scene:not(.waiting) .selfheal-process-overlay .stage-process-pin {
  opacity: 0.36;
  transform: translate(-50%, -50%) scale(0.9);
}

.agentdispatch-scene:is(.agentdispatch-sense) .agent-line-sense,
.agentdispatch-scene:is(.agentdispatch-team) .agent-line-team,
.agentdispatch-scene:is(.agentdispatch-assign) .agent-line-assign,
.agentdispatch-scene:is(.agentdispatch-negotiate) .agent-line-negotiate,
.agentdispatch-scene:is(.agentdispatch-execute) .agent-line-execute,
.agentdispatch-scene:is(.agentdispatch-review) .agent-line-review,
.agentdispatch-scene:is(.agentdispatch-blocked) .agent-line-blocked,
.v2x-scene:is(.v2x-sense) .v2x-line-sense,
.v2x-scene:is(.v2x-connect) .v2x-line-connect,
.v2x-scene:is(.v2x-negotiate) .v2x-line-negotiate,
.v2x-scene:is(.v2x-release) .v2x-line-release,
.v2x-scene:is(.v2x-drive) .v2x-line-drive,
.v2x-scene:is(.v2x-review) .v2x-line-review,
.v2x-scene:is(.v2x-blocked) .v2x-line-blocked,
.airground-scene:is(.airground-order) .airground-line-order,
.airground-scene:is(.airground-dispatch) .airground-line-dispatch,
.airground-scene:is(.airground-handoff) .airground-line-handoff,
.airground-scene:is(.airground-takeoff) .airground-line-takeoff,
.airground-scene:is(.airground-deliver) .airground-line-deliver,
.airground-scene:is(.airground-review) .airground-line-review,
.airground-scene:is(.airground-blocked) .airground-line-blocked,
.trusttrack-scene:is(.trusttrack-register) .trusttrack-line-register,
.trusttrack-scene:is(.trusttrack-collect) .trusttrack-line-collect,
.trusttrack-scene:is(.trusttrack-verify) .trusttrack-line-verify,
.trusttrack-scene:is(.trusttrack-transport) .trusttrack-line-transport,
.trusttrack-scene:is(.trusttrack-sign) .trusttrack-line-sign,
.trusttrack-scene:is(.trusttrack-review) .trusttrack-line-review,
.trusttrack-scene:is(.trusttrack-blocked) .trusttrack-line-blocked,
.selfheal-scene:is(.selfheal-listen) .selfheal-line-listen,
.selfheal-scene:is(.selfheal-diagnose) .selfheal-line-diagnose,
.selfheal-scene:is(.selfheal-isolate) .selfheal-line-isolate,
.selfheal-scene:is(.selfheal-reroute) .selfheal-line-reroute,
.selfheal-scene:is(.selfheal-verify) .selfheal-line-verify,
.selfheal-scene:is(.selfheal-learn) .selfheal-line-learn,
.selfheal-scene:is(.selfheal-blocked) .selfheal-line-blocked {
  stroke-width: 6;
  opacity: 1;
  animation: stageProcessDash 1.05s linear infinite;
}

.agentdispatch-scene:is(.agentdispatch-sense) .agent-pin-sense,
.agentdispatch-scene:is(.agentdispatch-team) .agent-pin-team,
.agentdispatch-scene:is(.agentdispatch-assign) .agent-pin-assign,
.agentdispatch-scene:is(.agentdispatch-negotiate) .agent-pin-negotiate,
.agentdispatch-scene:is(.agentdispatch-execute) .agent-pin-execute,
.agentdispatch-scene:is(.agentdispatch-review) .agent-pin-review,
.agentdispatch-scene:is(.agentdispatch-blocked) .agent-pin-blocked,
.v2x-scene:is(.v2x-sense) .v2x-pin-sense,
.v2x-scene:is(.v2x-connect) .v2x-pin-connect,
.v2x-scene:is(.v2x-negotiate) .v2x-pin-negotiate,
.v2x-scene:is(.v2x-release) .v2x-pin-release,
.v2x-scene:is(.v2x-drive) .v2x-pin-drive,
.v2x-scene:is(.v2x-review) .v2x-pin-review,
.v2x-scene:is(.v2x-blocked) .v2x-pin-blocked,
.airground-scene:is(.airground-order) .airground-pin-order,
.airground-scene:is(.airground-dispatch) .airground-pin-dispatch,
.airground-scene:is(.airground-handoff) .airground-pin-handoff,
.airground-scene:is(.airground-takeoff) .airground-pin-takeoff,
.airground-scene:is(.airground-deliver) .airground-pin-deliver,
.airground-scene:is(.airground-review) .airground-pin-review,
.airground-scene:is(.airground-blocked) .airground-pin-blocked,
.trusttrack-scene:is(.trusttrack-register) .trusttrack-pin-register,
.trusttrack-scene:is(.trusttrack-collect) .trusttrack-pin-collect,
.trusttrack-scene:is(.trusttrack-verify) .trusttrack-pin-verify,
.trusttrack-scene:is(.trusttrack-transport) .trusttrack-pin-transport,
.trusttrack-scene:is(.trusttrack-sign) .trusttrack-pin-sign,
.trusttrack-scene:is(.trusttrack-review) .trusttrack-pin-review,
.trusttrack-scene:is(.trusttrack-blocked) .trusttrack-pin-blocked,
.selfheal-scene:is(.selfheal-listen) .selfheal-pin-listen,
.selfheal-scene:is(.selfheal-diagnose) .selfheal-pin-diagnose,
.selfheal-scene:is(.selfheal-isolate) .selfheal-pin-isolate,
.selfheal-scene:is(.selfheal-reroute) .selfheal-pin-reroute,
.selfheal-scene:is(.selfheal-verify) .selfheal-pin-verify,
.selfheal-scene:is(.selfheal-learn) .selfheal-pin-learn,
.selfheal-scene:is(.selfheal-blocked) .selfheal-pin-blocked {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: stageProcessPulse 1.35s ease-in-out infinite;
}

.agentdispatch-scene:is(.agentdispatch-sense) .agent-note-sense,
.agentdispatch-scene:is(.agentdispatch-team) .agent-note-team,
.agentdispatch-scene:is(.agentdispatch-assign) .agent-note-assign,
.agentdispatch-scene:is(.agentdispatch-negotiate) .agent-note-negotiate,
.agentdispatch-scene:is(.agentdispatch-execute) .agent-note-execute,
.agentdispatch-scene:is(.agentdispatch-review) .agent-note-review,
.agentdispatch-scene:is(.agentdispatch-blocked) .agent-note-blocked,
.v2x-scene:is(.v2x-sense) .v2x-note-sense,
.v2x-scene:is(.v2x-connect) .v2x-note-connect,
.v2x-scene:is(.v2x-negotiate) .v2x-note-negotiate,
.v2x-scene:is(.v2x-release) .v2x-note-release,
.v2x-scene:is(.v2x-drive) .v2x-note-drive,
.v2x-scene:is(.v2x-review) .v2x-note-review,
.v2x-scene:is(.v2x-blocked) .v2x-note-blocked,
.airground-scene:is(.airground-order) .airground-note-order,
.airground-scene:is(.airground-dispatch) .airground-note-dispatch,
.airground-scene:is(.airground-handoff) .airground-note-handoff,
.airground-scene:is(.airground-takeoff) .airground-note-takeoff,
.airground-scene:is(.airground-deliver) .airground-note-deliver,
.airground-scene:is(.airground-review) .airground-note-review,
.airground-scene:is(.airground-blocked) .airground-note-blocked,
.trusttrack-scene:is(.trusttrack-register) .trusttrack-note-register,
.trusttrack-scene:is(.trusttrack-collect) .trusttrack-note-collect,
.trusttrack-scene:is(.trusttrack-verify) .trusttrack-note-verify,
.trusttrack-scene:is(.trusttrack-transport) .trusttrack-note-transport,
.trusttrack-scene:is(.trusttrack-sign) .trusttrack-note-sign,
.trusttrack-scene:is(.trusttrack-review) .trusttrack-note-review,
.trusttrack-scene:is(.trusttrack-blocked) .trusttrack-note-blocked,
.selfheal-scene:is(.selfheal-listen) .selfheal-note-listen,
.selfheal-scene:is(.selfheal-diagnose) .selfheal-note-diagnose,
.selfheal-scene:is(.selfheal-isolate) .selfheal-note-isolate,
.selfheal-scene:is(.selfheal-reroute) .selfheal-note-reroute,
.selfheal-scene:is(.selfheal-verify) .selfheal-note-verify,
.selfheal-scene:is(.selfheal-learn) .selfheal-note-learn,
.selfheal-scene:is(.selfheal-blocked) .selfheal-note-blocked {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.agentdispatch-scene:is(.agentdispatch-negotiate, .agentdispatch-blocked) .agent-zone-conflict,
.v2x-scene:is(.v2x-negotiate, .v2x-blocked) .v2x-zone-risk,
.airground-scene:is(.airground-takeoff, .airground-blocked) .airground-zone-sky,
.trusttrack-scene:is(.trusttrack-verify, .trusttrack-blocked) .trusttrack-zone-alert,
.selfheal-scene:is(.selfheal-isolate, .selfheal-blocked) .selfheal-zone-fault {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: stageProcessZone 1.45s ease-in-out infinite;
}

@keyframes stageProcessDash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -34;
  }
}

@keyframes stageProcessPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--step-color, #2563eb) 16%, transparent),
      0 8px 18px rgba(15, 23, 42, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 13px color-mix(in srgb, var(--step-color, #2563eb) 26%, transparent),
      0 10px 24px rgba(15, 23, 42, 0.24);
  }
}

@keyframes stageProcessZone {
  0%,
  100% {
    box-shadow: 0 0 18px color-mix(in srgb, var(--step-color, #ef4444) 24%, transparent);
  }
  50% {
    box-shadow: 0 0 34px color-mix(in srgb, var(--step-color, #ef4444) 42%, transparent);
  }
}

@keyframes packMeasureGate {
  0%,
  100% {
    opacity: 0.38;
    background-position: 18% 0, 0 0;
  }
  50% {
    opacity: 0.7;
    background-position: 86% 0, 0 0;
  }
}

@keyframes packConveyorFeed {
  from {
    opacity: 0.35;
    background-position: 0 0, 0 0, 0 0, 0 78%;
  }
  to {
    opacity: 0.62;
    background-position: 0 0, 0 0, 0 0, 116px 78%;
  }
}

@keyframes packProcessDash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -27;
  }
}

@keyframes packProcessPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--step-color) 16%, transparent),
      0 8px 18px rgba(15, 23, 42, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 13px color-mix(in srgb, var(--step-color) 26%, transparent),
      0 10px 24px rgba(15, 23, 42, 0.24);
  }
}

@keyframes routeNodeReasoning {
  0%,
  100% {
    opacity: 0.34;
    filter: saturate(0.9);
  }
  50% {
    opacity: 0.68;
    filter: saturate(1.25);
  }
}

@keyframes routeRoadFlow {
  from {
    opacity: 0.36;
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    opacity: 0.58;
    background-position: 72% 72%, 82px 82px, 0 0;
  }
}

@keyframes routeOptProcessDash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -30;
  }
}

@keyframes routeOptProcessPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--route-step-color, #2563eb) 16%, transparent),
      0 8px 18px rgba(15, 23, 42, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 13px color-mix(in srgb, var(--route-step-color, #2563eb) 26%, transparent),
      0 10px 24px rgba(15, 23, 42, 0.24);
  }
}

@keyframes agentHubHeartbeat {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(1);
  }
  55% {
    opacity: 0.64;
    transform: scale(1.015);
  }
}

@keyframes agentNegotiationLinks {
  0%,
  100% {
    opacity: 0.34;
    background-position: 0 0, 100% 100%, 50% 0;
  }
  50% {
    opacity: 0.62;
    background-position: 80% 80%, 20% 20%, 30% 0;
  }
}

@keyframes v2xRoadsideBroadcast {
  0%,
  100% {
    opacity: 0.28;
    background-size: 100% 100%, 100% 100%, 100% 100%;
  }
  60% {
    opacity: 0.62;
    background-size: 118% 118%, 100% 100%, 100% 100%;
  }
}

@keyframes v2xGreenWave {
  from {
    opacity: 0.36;
    background-position: 0 0, 100% 0, 0 0;
  }
  to {
    opacity: 0.6;
    background-position: 82% 82%, 0 80%, 0 0;
  }
}

@keyframes airgroundGroundRelay {
  from {
    opacity: 0.36;
    background-position: 0 0, 0 0;
  }
  to {
    opacity: 0.58;
    background-position: 82% 82%, 0 0;
  }
}

@keyframes airgroundDroneCorridor {
  from {
    opacity: 0.34;
    background-position: 100% 0, 100% 0, 0 0;
  }
  to {
    opacity: 0.6;
    background-position: 18% 82%, 34px 82px, 0 0;
  }
}

@keyframes trustLedgerCommit {
  0% {
    opacity: 0.26;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    opacity: 0.58;
    background-position: 184px 0, 0 0, 0 0, 0 0, 0 0;
  }
}

@keyframes trustEvidenceVerify {
  from {
    opacity: 0.34;
    background-position: 0 0, 0 0, 0 0, -90% 62%;
  }
  to {
    opacity: 0.58;
    background-position: 0 0, 0 0, 0 0, 90% 62%;
  }
}

@keyframes selfhealFaultIsolate {
  0%,
  100% {
    opacity: 0.22;
    filter: saturate(0.9);
  }
  50% {
    opacity: 0.62;
    filter: saturate(1.35);
  }
}

@keyframes selfhealRecoverySwitch {
  0%,
  30% {
    opacity: 0.22;
    background-position: 0 0, 0 0, -60% 0;
  }
  55% {
    opacity: 0.64;
    background-position: 76% 76%, 0 0, 20% 0;
  }
  100% {
    opacity: 0.4;
    background-position: 100% 100%, 0 0, 80% 0;
  }
}

@media (max-width: 1180px) {
  .pack-layout,
  .routeopt-layout,
  .agentdispatch-layout,
  .v2x-layout,
  .airground-layout,
  .trusttrack-layout,
  .selfheal-layout {
    grid-template-columns: 1fr;
  }

  .pack-scene,
  .routeopt-scene,
  .agentdispatch-scene,
  .v2x-scene,
  .airground-scene,
  .trusttrack-scene,
  .selfheal-scene {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 760px) {
  .stage-process-note {
    width: clamp(98px, 25vw, 132px);
    padding: 6px 8px;
  }

  .stage-process-note span {
    font-size: 0.64rem;
  }

  .stage-process-note strong {
    font-size: 0.76rem;
  }

  .stage-process-pin {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }

  .stage-process-line {
    stroke-width: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-scene::before,
  .pack-scene::after,
  .routeopt-scene::before,
  .routeopt-scene::after,
  .agentdispatch-scene::before,
  .agentdispatch-scene::after,
  .v2x-scene::before,
  .v2x-scene::after,
  .airground-scene::before,
  .airground-scene::after,
  .trusttrack-scene::before,
  .trusttrack-scene::after,
  .selfheal-scene::before,
  .selfheal-scene::after,
  .stage-process-line,
  .stage-process-pin,
  .stage-process-zone {
    animation: none;
  }
}