/* Original homepage infrastructure motif. Never used as a service-page illustration. */
.iso-scene--home { --iso-accent: var(--defense-300); }
.iso-scene--home svg { overflow: visible; }
.iso-frame path {
  stroke: rgba(190, 214, 232, 0.16);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.iso-grid {
  fill: none;
  stroke: rgba(190, 214, 232, 0.07);
  stroke-width: 1;
}

.iso-rim {
  fill: none;
  stroke: rgba(235, 245, 252, 0.2);
  stroke-width: 1;
}

.iso-edge-front {
  fill: none;
  stroke: rgba(220, 235, 245, 0.55);
  stroke-width: 1.25;
}

.iso-layer.is-focus .iso-rim,
.iso-layer.is-focus .iso-edge-front {
  stroke: var(--iso-accent);
}

.iso-layer.is-focus .iso-edge-front {
  stroke-width: 2;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--iso-accent) 65%, transparent));
}

.iso-wall {
  stroke-width: 0.75;
}

.iso-wall--back {
  fill: rgba(95, 227, 232, 0.08);
  stroke: rgba(95, 227, 232, 0.28);
}

.iso-wall--front {
  fill: rgba(95, 227, 232, 0.16);
  stroke: rgba(95, 227, 232, 0.6);
}

.iso-port {
  fill: var(--offense-300);
  filter: drop-shadow(0 0 6px rgba(255, 181, 71, 0.85));
}

.iso-net {
  fill: none;
  stroke: rgba(95, 227, 232, 0.32);
  stroke-width: 1;
}

.iso-node {
  fill: #e1f4fa;
}

.iso-node-halo {
  fill: rgba(95, 227, 232, 0.08);
  stroke: rgba(95, 227, 232, 0.35);
  stroke-width: 0.75;
}

.iso-box-slots {
  fill: none;
  stroke: rgba(190, 214, 232, 0.28);
  stroke-width: 1;
}

.iso-led {
  fill: var(--defense-300);
  animation: iso-breathe 2.6s ease-in-out infinite;
}

.iso-led--late {
  animation-delay: -1.3s;
}

.iso-db-body { fill: url(#iso-db); stroke: rgba(190, 214, 232, 0.2); stroke-width: 0.75; }
.iso-db-band { fill: none; stroke: rgba(95, 227, 232, 0.45); stroke-width: 1; }
.iso-db-top { fill: #35556f; stroke: rgba(220, 235, 245, 0.45); stroke-width: 0.75; }

.iso-packet {
  fill: none;
  stroke: var(--defense-300);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 100;
  animation: art-trace 7s linear infinite;
}

.iso-packet--late {
  animation-delay: -3.5s;
}

.iso-box-left { fill: #14263a; stroke: rgba(190, 214, 232, 0.16); stroke-width: 0.75; }
.iso-box-right { fill: #1c3248; stroke: rgba(190, 214, 232, 0.16); stroke-width: 0.75; }
.iso-box-top { fill: #2c4560; stroke: rgba(190, 214, 232, 0.3); stroke-width: 0.75; }

.iso-cell {
  fill: rgba(190, 214, 232, 0.05);
  stroke: rgba(190, 214, 232, 0.14);
  stroke-width: 0.75;
}

.iso-cell--lit {
  fill: rgba(95, 227, 232, 0.14);
  stroke: rgba(95, 227, 232, 0.45);
  animation: iso-breathe 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
}

@keyframes iso-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.iso-field-rim {
  fill: none;
  stroke: rgba(95, 227, 232, 0.7);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 5px rgba(95, 227, 232, 0.6));
  animation: iso-breathe 4.5s ease-in-out infinite;
}

.iso-field--soft {
  opacity: 0.6;
}

.iso-probe-line {
  stroke: rgba(255, 181, 71, 0.2);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.iso-probe {
  fill: none;
  stroke: var(--offense-300);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 100;
  animation: iso-probe 4.5s linear infinite;
  animation-delay: calc(var(--i, 0) * 1.5s);
}

@keyframes iso-probe {
  0% { stroke-dashoffset: 100; opacity: 0; }
  6% { opacity: 1; }
  55% { stroke-dashoffset: 8; opacity: 1; }
  62%, 100% { stroke-dashoffset: 8; opacity: 0; }
}

.iso-block {
  fill: none;
  stroke: var(--defense-300);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: iso-block 4.5s var(--ease-out) infinite;
  animation-delay: calc(var(--i, 0) * 1.5s);
}

@keyframes iso-block {
  0%, 52% { opacity: 0; transform: scale(0.5); }
  56% { opacity: 1; transform: scale(1); }
  82%, 100% { opacity: 0; transform: scale(1.9); }
}

.iso-scan {
  opacity: 0;
  animation: iso-scan 11s var(--ease-standard) infinite;
}

.iso-scan-edge {
  fill: none;
  stroke: var(--defense-300);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 6px rgba(95, 227, 232, 0.8));
}

@keyframes iso-scan {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50% { transform: translateY(330px); opacity: .9; }
}

.iso-route {
  fill: none;
  stroke: rgba(255, 181, 71, 0.32);
  stroke-width: 1.25;
  stroke-dasharray: 3 5;
}

.iso-trace,
.iso-trace-head {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iso-trace {
  stroke: var(--offense-300);
  stroke-width: 2.25;
  stroke-dasharray: 100 100;
  filter: drop-shadow(0 0 5px rgba(255, 181, 71, 0.55));
}

.iso-trace-head {
  stroke: #fff1d6;
  stroke-width: 4;
  stroke-dasharray: 2 98;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 210, 140, 0.95));
}

.iso-hop {
  fill: var(--offense-300);
}

.iso-reticle-ring {
  fill: none;
  stroke: var(--offense-300);
  stroke-width: 1.25;
}

.iso-reticle-ring--inner {
  stroke-dasharray: 5 5;
  animation: iso-dash 3s linear infinite;
}

@keyframes iso-dash {
  to { stroke-dashoffset: -40; }
}

.iso-target-pulse {
  fill: none;
  stroke: var(--offense-300);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: art-pulse 2.6s var(--ease-out) infinite;
}

.iso-target-dot,
.iso-target-fill {
  fill: var(--offense-300);
}

.iso-target-fill {
  filter: drop-shadow(0 0 8px rgba(255, 181, 71, 0.6));
}

.iso-fix-ring {
  fill: none;
  stroke: var(--defense-300);
  stroke-width: 1.75;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.iso-chip rect {
  fill: rgba(20, 34, 49, 0.94);
  stroke: rgba(255, 181, 71, 0.45);
}

.iso-chip text {
  fill: #ffe6c2;
  font-family: var(--font-mono);
  font-size: 15px;
}

.iso-chip-lead {
  fill: none;
  stroke: rgba(255, 181, 71, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.iso-chip--fixed rect { stroke: rgba(95, 227, 232, 0.55); }
.iso-chip--fixed text { fill: #d2f8f9; }
.iso-chip--fixed .iso-chip-lead { stroke: rgba(95, 227, 232, 0.55); }

.iso-label-lead {
  fill: none;
  stroke: rgba(190, 214, 232, 0.35);
}

.iso-label-badge {
  fill: rgba(20, 34, 49, 0.9);
  stroke: rgba(190, 214, 232, 0.38);
  stroke-width: 1;
}

.iso-label-num {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}

.iso-label-title {
  fill: var(--ink-text);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.iso-label-sub {
  fill: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 16px;
}

.iso-label.is-focus .iso-label-badge {
  fill: color-mix(in srgb, var(--iso-accent) 18%, #142231);
  stroke: var(--iso-accent);
}

.iso-label.is-focus .iso-label-num,
.iso-label.is-focus .iso-label-title {
  fill: var(--iso-accent);
}

/* Legend and small-screen layer list (HTML, crisp at any size). */
.iso-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.iso-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.iso-legend__mark {
  flex: none;
  width: 1.25rem;
  height: 0.75rem;
  border-radius: 3px;
}

.iso-legend__item--attack .iso-legend__mark { height: 2px; background: repeating-linear-gradient(90deg, var(--offense-300) 0 6px, transparent 6px 9px); }
.iso-legend__item--found .iso-legend__mark { width: 0.75rem; border-radius: 3px; background: var(--offense-300); box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.2); }
.iso-legend__item--fixed .iso-legend__mark { width: 0.75rem; border-radius: 3px; background: var(--defense-300); box-shadow: 0 0 0 3px rgba(95, 227, 232, 0.2); }
.iso-legend__item--target .iso-legend__mark { width: 0.85rem; height: 0.85rem; border: 1.5px solid var(--offense-300); border-radius: 50%; background: radial-gradient(circle, var(--offense-300) 0 2px, transparent 2.5px); }
.iso-legend__item--code .iso-legend__mark { width: 1.5rem; height: 0.85rem; border: 1px solid rgba(255, 181, 71, 0.55); border-radius: 4px; background: rgba(20, 34, 49, 0.9); }
.iso-legend__item--shield .iso-legend__mark { background: linear-gradient(0deg, rgba(95, 227, 232, 0.4), rgba(95, 227, 232, 0)); border-bottom: 2px solid var(--defense-300); border-radius: 2px; }
.iso-legend__item--probe .iso-legend__mark { height: 2px; background: linear-gradient(90deg, var(--offense-300) 70%, var(--defense-300) 70% 100%); }
.iso-legend__item--focus .iso-legend__mark,
.iso-legend__item--step .iso-legend__mark { height: 0.6rem; border: 1.5px solid var(--defense-300); border-radius: 2px; transform: skewX(-30deg); }

.iso-list {
  display: none;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.iso-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.iso-list strong {
  color: var(--ink-text);
  font-family: var(--font-display);
  font-weight: 600;
}

.iso-list__num {
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.iso-list li.is-focus strong,
.iso-list li.is-focus .iso-list__num { color: var(--defense-300); }

/* Home: probe finds a weak spot, then it is fixed and verified (12 s cycle, starts in the "found" state). */
.iso-scene--home .iso-trace { animation: iso-home-trace 12s linear infinite; }
.iso-scene--home .iso-trace-head { animation: iso-home-head 12s linear infinite; }
.iso-scene--home .iso-target-fill { animation: iso-home-target 12s linear infinite; fill: var(--defense-300); filter: drop-shadow(0 0 8px rgba(95, 227, 232, 0.55)); }
.iso-scene--home .iso-target-dot { animation: iso-home-dot 12s linear infinite; fill: var(--defense-300); }
.iso-scene--home .iso-reticle,
.iso-scene--home .iso-chip--found { opacity: 0; animation: iso-home-found 12s linear infinite; }
.iso-scene--home .iso-target-pulse { animation: art-pulse 2.6s var(--ease-out) infinite, iso-home-found 12s linear infinite; }
.iso-scene--home .iso-chip--fixed { animation: iso-home-fixed 12s linear infinite; }
.iso-scene--home .iso-fix-ring { animation: iso-home-fix 12s var(--ease-out) infinite; }

@keyframes iso-home-trace {
  0%, 56% { stroke-dashoffset: 0; opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 0; }
  61% { stroke-dashoffset: 100; opacity: 0; }
  64% { stroke-dashoffset: 100; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes iso-home-head {
  0%, 63% { stroke-dashoffset: 100; opacity: 0; }
  64% { stroke-dashoffset: 100; opacity: 1; }
  96% { stroke-dashoffset: 2; opacity: 1; }
  98%, 100% { stroke-dashoffset: 2; opacity: 0; }
}

@keyframes iso-home-target {
  0%, 25% { fill: var(--offense-300); filter: drop-shadow(0 0 8px rgba(255, 181, 71, 0.6)); }
  30%, 58% { fill: var(--defense-300); filter: drop-shadow(0 0 8px rgba(95, 227, 232, 0.55)); }
  62%, 96% { fill: #2c4560; filter: none; }
  100% { fill: var(--offense-300); filter: drop-shadow(0 0 8px rgba(255, 181, 71, 0.6)); }
}

@keyframes iso-home-dot {
  0%, 25% { fill: var(--offense-300); opacity: 1; }
  30%, 58% { fill: var(--defense-300); opacity: 1; }
  62%, 96% { opacity: 0; }
  100% { fill: var(--offense-300); opacity: 1; }
}

@keyframes iso-home-found {
  0%, 24% { opacity: 1; }
  28%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes iso-home-fixed {
  0%, 28% { opacity: 0; }
  32%, 56% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes iso-home-fix {
  0%, 25% { opacity: 0; transform: scale(0.6); }
  27% { opacity: 0.9; transform: scale(1); }
  42%, 100% { opacity: 0; transform: scale(2.6); }
}

@media (max-width: 40rem) {
  .iso-labels,
  .iso-chips {
    display: none;
  }

  .iso-list {
    display: grid;
  }

  .iso-legend {
    justify-content: flex-start;
  }
}


/* A full, still scene is available without JS and with system reduced motion. */
html:not(.motion-enabled) .iso-chip--found, html.motion-static .iso-chip--found { opacity: 0; }
html:not(.motion-enabled) .iso-chip--fixed, html.motion-static .iso-chip--fixed { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .iso-chip--found { opacity: 0 !important; }
  .iso-chip--fixed { opacity: 1 !important; }
}