/* ============================================================
   ATLAS — calm advanced product system, mono-forward
   ============================================================ */

[data-direction="atlas"] {
  --temp-cold: #2A303B;
  --temp-cool: #5C6573;
  --temp-mid: #EEF0F2;
  --temp-warm: #C4612E;
  --temp-hot: #6B2E15;
}

[data-direction="atlas"] .dir-header {
  border-top: 1px solid var(--ref-n-300);
  border-top-width: 1px;
}
[data-direction="atlas"] .dir-header__title {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -.04em;
  font-size: clamp(48px, 7vw, 96px);
}
[data-direction="atlas"] .s__title {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -.03em;
}
[data-direction="atlas"] .s__title::before {
  content: "// ";
  color: var(--accent);
  font-weight: 400;
}

[data-direction="atlas"] .dir__shell {
  background-image:
    linear-gradient(to right, rgba(94,123,232,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,123,232,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

[data-direction="atlas"] .atlas-hero {
  padding: var(--sp-7) 0 var(--sp-8);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
[data-direction="atlas"] .atlas-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
[data-direction="atlas"] .atlas-hero__readout {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  border: 1px solid var(--rule-strong);
  background: var(--bg-raised);
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
[data-direction="atlas"] .atlas-hero__readout span.k { color: var(--accent); }
[data-direction="atlas"] .atlas-hero__readout span.v { color: var(--text); }
[data-direction="atlas"] .atlas-hero__readout span.h { color: var(--human); }

[data-direction="atlas"] .swatch__chip { border-radius: 4px; border: 1px solid var(--ref-n-200); }
[data-direction="atlas"] .product-card { border-radius: var(--radius-md); }

[data-direction="atlas"] .icon-cell__svg { stroke: var(--text); stroke-width: 1.4; }

/* Atlas command-row chrome */
[data-direction="atlas"] .cmd-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: 12px;
}
[data-direction="atlas"] .cmd-row .key {
  color: var(--accent);
  letter-spacing: .04em;
}
[data-direction="atlas"] .cmd-row .val { color: var(--text); }
[data-direction="atlas"] .cmd-row .meta { color: var(--text-muted); font-size: 11px; }

/* ---------- Atlas motion ---------- */
@keyframes a-graph-trace {
  0%   { stroke-dashoffset: 320; }
  100% { stroke-dashoffset: 0; }
}
@keyframes a-cursor-step {
  0%, 12% { transform: translate(0, 0); }
  25%, 37% { transform: translate(60px, 0); }
  50%, 62% { transform: translate(60px, 30px); }
  75%, 87% { transform: translate(120px, 30px); }
  100% { transform: translate(0,0); }
}
@keyframes a-status-tick {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
@keyframes a-row-reveal {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes a-grid-pan {
  0%   { background-position: 0 0; }
  100% { background-position: 32px 32px; }
}

[data-direction="atlas"] .motion-stage--graph svg .edge {
  stroke-dasharray: 320;
  animation: a-graph-trace 2800ms var(--ease-standard) infinite;
}
[data-direction="atlas"] .motion-stage--graph svg .node {
  animation: a-status-tick 1800ms ease-in-out infinite;
}
[data-direction="atlas"] .motion-stage--cursor {
  background-image:
    linear-gradient(to right, rgba(94,123,232,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,123,232,.06) 1px, transparent 1px);
  background-size: 30px 30px;
  position: relative;
}
[data-direction="atlas"] .motion-stage--cursor .pin {
  width: 8px; height: 8px;
  background: var(--accent);
  position: absolute; top: 30px; left: 30px;
  animation: a-cursor-step 4000ms steps(1) infinite;
}
[data-direction="atlas"] .motion-stage--status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: a-status-tick 1400ms ease-in-out infinite;
  margin-right: 8px;
}
[data-direction="atlas"] .motion-stage--rows .row {
  display: block;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule);
  animation: a-row-reveal 600ms var(--ease-standard) backwards;
}
[data-direction="atlas"] .motion-stage--rows .row:nth-child(1) { animation-delay: .2s; }
[data-direction="atlas"] .motion-stage--rows .row:nth-child(2) { animation-delay: .55s; }
[data-direction="atlas"] .motion-stage--rows .row:nth-child(3) { animation-delay: .9s; }
[data-direction="atlas"] .motion-stage--rows .row:nth-child(4) { animation-delay: 1.25s; }
[data-direction="atlas"] .motion-stage--pan {
  background-image:
    linear-gradient(to right, rgba(94,123,232,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,123,232,.10) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: a-grid-pan 6s linear infinite;
}

[data-direction="atlas"] .product-card .data-row {
  display: grid;
  grid-template-columns: 1fr auto;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
[data-direction="atlas"] .product-card .data-row:last-child { border-bottom: none; }
[data-direction="atlas"] .product-card .data-row .k { color: var(--text-muted); }
[data-direction="atlas"] .product-card .data-row .v { color: var(--text); }
[data-direction="atlas"] .product-card .data-row .v--accent { color: var(--accent); }
[data-direction="atlas"] .product-card .data-row .v--human  { color: var(--human); }

[data-direction="atlas"] .signal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-sunken);
  color: var(--text-muted);
}
[data-direction="atlas"] .signal-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
[data-direction="atlas"] .signal-pill--human::before { background: var(--human); }