/* ==========================================================================
   Vonimate live automation map — visual + the engine-hero layout.
   All map rules are scoped under .amap-wrap / .amap so generic class names
   (.node, .arc, etc.) can't leak into the rest of the site.
   Config + behavior live in /js/automation-map.js.
   ========================================================================== */

/* ---- The engine hero (full-width map as the homepage centerpiece) ---- */
.hero-engine {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-cream);
  padding: clamp(4rem, 3rem + 5vw, 7rem) clamp(1.25rem, 0.5rem + 3vw, 3rem) var(--space-xl);
}
.hero-engine__intro { max-width: 62rem; }
.hero-engine__title {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
  margin: var(--space-sm) auto var(--space-md);
}
.hero-engine__sub {
  font-size: var(--text-lg);
  color: var(--color-muted);
  line-height: var(--leading-snug);
  max-width: 60ch;
  margin: 0 auto var(--space-lg);
}
.hero-engine__intro .hero__cta-row { justify-content: center; }

.hero-engine__map { width: 100%; max-width: 84rem; margin: var(--space-md) auto 0; }

.hero-engine__readout {
  display: flex; flex-direction: column; align-items: center;
  margin-top: var(--space-sm);
}
.amap-counter {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1; letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.amap-counter-label { font-size: var(--text-sm); color: var(--color-muted); }
.hero-engine__creds {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.4rem; margin: var(--space-md) 0 0; padding: 0; list-style: none;
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-muted);
}
.hero-engine__foot {
  font-size: var(--text-xs); color: var(--color-muted); opacity: 0.75;
  max-width: 62ch; margin: var(--space-sm) auto 0;
}
.hero-engine__works {
  font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-normal);
  max-width: 64ch; margin: var(--space-md) auto 0;
}
.hero-engine__works b { color: var(--color-ink); font-weight: 600; }

/* ---- The map itself (scoped) ---- */
.amap-wrap { position: relative; width: 100%; }
.amap { display: block; width: 100%; height: auto; }

.amap .arc { fill: none; stroke-width: 1; }
.amap .pulse-line { fill: none; stroke-linecap: round; stroke-opacity: 0.5; }
.amap .pulse-head { stroke: none; }

.amap .cat-label {
  fill: var(--color-muted); font-family: var(--font-body); font-size: 13px; font-weight: 600;
  /* text-anchor is set per-label in JS (start on the left edge, end on the right,
     middle for top/bottom) so long titles don't spill past the viewBox and clip.
     Do NOT set text-anchor here — a class rule overrides the inline SVG attribute. */
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65;
}

.amap .node-bg { fill: #ffffff; stroke: var(--color-line); stroke-width: 1.25; }
.amap .node { transition: transform var(--duration-fast) var(--ease-out-expo); transform-box: fill-box; transform-origin: center; }
.amap .node:hover { transform: scale(1.08); }
.amap .node:hover .node-bg { stroke: var(--color-ink); }
.amap .node-label {
  fill: var(--color-ink); font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em; text-anchor: middle; opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out-expo);
}
.amap .node-label-bg { fill: var(--color-cream); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out-expo); }
.amap .node:hover .node-label, .amap .node:hover .node-label-bg { opacity: 1; }

.amap .hub-halo { fill: var(--color-ink); opacity: 0.05; transform-box: fill-box; transform-origin: center; animation: amap-breathe 4.5s var(--ease-in-out) infinite; }
@keyframes amap-breathe { 0%, 100% { transform: scale(1); opacity: 0.05; } 50% { transform: scale(1.1); opacity: 0.09; } }
.amap .hub-bg { fill: var(--color-ink); }
.amap .hub-mark {
  fill: var(--color-cream); font-family: var(--font-display); font-weight: 700; font-size: 50px;
  text-anchor: middle; dominant-baseline: central; transform-box: fill-box; transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.amap .hub-g:hover .hub-mark { transform: translateY(-7px); }
.amap .hub-word {
  fill: #ffffff; font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; text-anchor: middle; opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out-expo);
}
.amap .hub-g:hover .hub-word { opacity: 1; }

/* ---- Mobile: portrait frame, full-bleed width, no cramped labels ---- */
@media (max-width: 720px) {
  .amap .cat-label { display: none; }
  .hero-engine__map .amap-wrap { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
  .hero-engine__title { font-size: clamp(2rem, 1.2rem + 5vw, 2.75rem); }
}