/* ==========================================================================
   dazri.tech v5 : isometric Martech architecture diagram
   Owner: arch.css, arch.js, assets/arch.svg. Mount: <div class="arch_stage" id="arch">
   Every colour comes from styles.css tokens; the fallbacks only matter if the
   diagram is ever shown without styles.css.
   ========================================================================== */

.arch_stage {
  --arch-navy:   var(--admiral-navy, #142853);
  --arch-blue:   var(--admiral-blue, #3360FF);
  --arch-deep:   var(--primary-800, #0C02AD);
  --arch-amber:  var(--admiral-amber, #FEC84B);
  --arch-pale:   var(--primary-50, #EFF4FF);
  --arch-tint:   var(--primary-100, #D6E3FF);
  --arch-slab:   #F7F9FF;
  --arch-edge:   0.5;    /* resting edge strength while pulses run */
  --arch-ease:   var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --arch-dur:    240ms;

  position: relative;
  width: 100%;
  min-width: 320px;
  aspect-ratio: 5 / 4;            /* reserves space before the SVG arrives: no layout shift */
  container-type: inline-size;
  container-name: arch;
}

.arch_stage > .arch_svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

/* crisp 1.2px strokes at every size */
.arch_svg polygon,
.arch_svg path,
.arch_svg ellipse {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- faces */
.arch_svg [class$="-top"]   { fill: #fff; }
.arch_svg .arch_face-left   { fill: var(--arch-tint); }
.arch_svg .arch_face-right  { fill: var(--arch-pale); }
.arch_svg .arch_slab-top    { fill: var(--arch-slab); }
.arch_svg .arch_slab-left,
.arch_svg .arch_slab-side   { fill: var(--arch-blue); }
.arch_svg .arch_slab-right  { fill: var(--arch-tint); }
.arch_svg .arch_disc-side   { fill: var(--arch-pale); }
.arch_svg .arch_disc--accent .arch_disc-side { fill: var(--arch-blue); }
.arch_svg .arch_hub .arch_face-top { fill: var(--arch-amber); }
.arch_svg polygon,
.arch_svg .arch_disc-side,
.arch_svg .arch_slab-side,
.arch_svg [class$="-top"] { stroke: var(--arch-navy); }

.arch_svg .arch_ring { stroke: var(--arch-blue); }
.arch_svg .arch_wh-shadow { fill: var(--arch-navy); }

/* ---------------------------------------------------------------- nodes */
.arch_node {
  cursor: pointer;
  outline: none;
  transition: opacity var(--arch-dur) var(--arch-ease);
}
.arch_body {
  transition: transform var(--arch-dur) var(--arch-ease);
}
.arch_logo { color: var(--arch-navy); }
.arch_logo .arch_mono { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); }
.arch_logo-mark { overflow: visible; }

.arch_svg .arch_focus {
  stroke: var(--arch-blue);
  opacity: 0;
  transition: opacity var(--arch-dur) var(--arch-ease);
}
.arch_node:focus-visible .arch_focus { opacity: 1; }

.arch_node.is-active .arch_body { transform: translateY(-6px); }

.arch_tile-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--arch-navy);
  stroke: #fff;
  stroke-width: 6px;
  paint-order: stroke;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--arch-dur) var(--arch-ease);
}
/* the card already names the tool, so the floating label is for wide stages only */
@container arch (min-width: 720px) {
  .arch_node.is-active .arch_tile-label { opacity: 1; }
}

/* ---------------------------------------------------------------- edges + pulses */
.arch_svg .arch_edge {
  stroke: var(--arch-navy);
  opacity: calc(var(--arch-edge) + var(--flow, 0) * 0.4);
  transition: stroke var(--arch-dur) var(--arch-ease);
}
.arch_svg .arch_edge--tether { stroke-dasharray: 3 5; }

.arch_pulse { pointer-events: none; }
.arch_pulse circle { fill: var(--arch-blue); }
.arch_pulse--amber circle { fill: var(--arch-amber); }
.arch_pulse--amber .arch_pulse-halo { fill: var(--arch-amber); }
.arch_pulse--amber .arch_pulse-head { stroke: var(--arch-navy); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* hover, focus or tap: the active tile's edges turn blue, everything else steps back */
.arch_svg.is-focus .arch_node:not(.is-active) { opacity: 0.35; }
.arch_svg.is-focus .arch_edge { opacity: 0.35; }
.arch_svg.is-focus .arch_edge.is-lit { opacity: 1; stroke: var(--arch-blue); }
.arch_svg.is-focus .arch_pulses .arch_pulse:not(.is-lit) circle { opacity: 0.35; }

/* ---------------------------------------------------------------- labels */
.arch_plane-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: var(--arch-navy);
  pointer-events: none;
}
.arch_plane-num { fill: var(--arch-blue); }

/* Narrow stages: bigger plane labels so they still read; the AI label text goes,
   the AI tiles stay (spec: three readable planes at 360px). */
@container arch (max-width: 719px) {
  .arch_plane-label { font-size: 24px; }
}
@container arch (max-width: 479px) {
  .arch_plane-label { font-size: 34px; letter-spacing: 0.06em; }
  .arch_plane-label[data-plane="ai"] { display: none; }
  .arch_card { max-width: min(14rem, 64%); }
  .arch_card-inner { padding: 0.375rem 0.5rem 0.5rem; }
  .arch_card-name { font-size: 0.8125rem; }
  .arch_card-text { font-size: 0.75rem; line-height: 1.35; }
}

/* ---------------------------------------------------------------- receipt card */
.arch_card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: max-content;
  max-width: min(17rem, 72%);
  pointer-events: none;
}
.arch_card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem 0.625rem;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--neutral-300, #D8DADF);
  border-top: 2px solid var(--arch-blue);
  border-radius: var(--radius-xs, 4px);
  box-shadow: var(--shadow-md, 0 4px 8px -2px rgba(20, 40, 83, 0.08));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--arch-dur) var(--arch-ease), transform var(--arch-dur) var(--arch-ease);
}
.arch_card.is-on .arch_card-inner { opacity: 1; transform: none; }
.arch_card[data-plane="ai"] .arch_card-inner { border-top-color: var(--arch-amber); }
.arch_card_dock { display: none; }
@media (hover: none) {
  .arch_card_dock.is-on { display: block; margin: .25rem auto 0; width: min(100%, 24rem); }
  .arch_card_dock .arch_card { position: relative; inset: auto; width: 100%; max-width: none; }
  .arch_card_dock .arch_card-inner { opacity: 1; transform: none; }
}

.arch_card-plane {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admiral-blue-deep, #0A00CC);
}
.arch_card-name {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--arch-navy);
}
.arch_card-text {
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--neutral-600, #475467);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- reduced motion
   Static diagram: no pulses, every edge at full strength, no transitions. */
.arch_svg.is-static:not(.is-focus) .arch_edge { opacity: 1; }
.arch_svg.is-static .arch_pulses { display: none; }
@media (prefers-reduced-motion: reduce) {
  .arch_svg:not(.is-focus) .arch_edge { opacity: 1; }
  .arch_svg .arch_pulses { display: none; }
  .arch_node,
  .arch_body,
  .arch_svg .arch_focus,
  .arch_tile-label,
  .arch_card-inner { transition: none; }
  .arch_node.is-active .arch_body { transform: none; }
  .arch_card-inner { transform: none; }
}