/* ============================================================================
   diagrams.css — states for the inlined architecture SVGs and the panel
   cross-fade. Owner: fullstack. Tokens only.

   The colour of the SVG interior is NOT set here: diagrams.js swaps the
   asset's embedded <style> for a token-driven one at inline time, so the
   drawing follows --dg-* in both themes. This file owns geometry and motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panels. `hidden` must win over any display the layout gives a panel —
   without this an active `display: grid` would keep both panels on screen
   during a switch.
   -------------------------------------------------------------------------- */
.arch__panel[hidden] {
  display: none !important;
}

.js .arch__panel {
  transition:
    opacity var(--dur-base) var(--ease-in-out-quint),
    transform var(--dur-base) var(--ease-in-out-quint);
}

.js .arch__panel.is-enter {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: none;
}

.js .arch__panel.is-leaving {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   The stage.
   -------------------------------------------------------------------------- */
.arch__diagram {
  position: relative;
  overflow: hidden;
  background: var(--dg-stage);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-3);
}

.arch__diagram[data-state="loading"],
.arch__diagram:empty {
  min-height: 220px;
}

.arch__diagram > svg,
.arch__diagram-img {
  display: block;
  width: 100%;
  height: auto;
}

.arch__diagram-img {
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   15 — node cascade. --dg-delay is written per element by diagrams.js, left to
   right, compressed so the whole cascade fits the --dur-slower budget. Labels
   inherit the delay of the box they sit in, so a node and its text arrive
   together.
   -------------------------------------------------------------------------- */
.dg.dg-anim rect,
.dg.dg-anim text {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo) var(--dg-delay, 0ms),
    transform var(--dur-slow) var(--ease-out-expo) var(--dg-delay, 0ms);
}

.dg.dg-anim.is-in rect,
.dg.dg-anim.is-in text {
  opacity: 1;
  transform: none;
}

/* 16 — line draw-in. The dash values and the transition are written inline by
   diagrams.js because they depend on each path's measured length. */

/* --------------------------------------------------------------------------
   17 + 18 — travelling packets. Created only when reduced motion is off and
   the browser supports offset-path; paused while the document is hidden.
   -------------------------------------------------------------------------- */
@keyframes mdc-packet {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

.dg-packet {
  fill: var(--dg-packet);
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: mdc-packet var(--dur-packet) var(--ease-linear) infinite;
}

.arch.is-paused .dg-packet,
#arch.is-paused .dg-packet {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Reduced motion: nodes at their final state, no packet ever rendered.
   diagrams.js already refuses to create them; this covers a mid-session flip.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dg.dg-anim rect,
  .dg.dg-anim text {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dg-packet {
    display: none !important;
    animation: none !important;
  }

  .js .arch__panel,
  .js .arch__panel.is-enter,
  .js .arch__panel.is-leaving {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Inlined-SVG theming.

   These rules used to be built as a string in diagrams.js and injected into
   each SVG as a <style> element. The site serves `style-src 'self'`, which
   blocks every inline stylesheet — including one created from script — so the
   injected sheet never parsed (`style.sheet === null`) and all six diagrams
   rendered at the SVG initial values: fill black, stroke none, black labels
   on a black stage. Movement kept working because the packet and cascade
   rules were already in this file.

   An external sheet styles inlined SVG identically and needs no CSP
   allowance, so the rules live here now. Do not move them back into JS, and
   do not add `'unsafe-inline'` to the policy to make the old approach work.
   ========================================================================== */
.arch__diagram svg .dg-box {
  fill: var(--dg-node-fill);
  stroke: var(--dg-node-stroke);
  stroke-width: 1.5;
}
.arch__diagram svg .dg-box--accent { stroke: var(--dg-node-stroke-hi); }
.arch__diagram svg .dg-box--green  { stroke: var(--c-ok); }
.arch__diagram svg .dg-box--cloud,
.arch__diagram svg .dg-box--aws,
.arch__diagram svg .dg-box--indra,
.arch__diagram svg .dg-box--rhel,
.arch__diagram svg .dg-box--cisco,
.arch__diagram svg .dg-box--data { stroke: var(--c-accent-2); }

.arch__diagram svg .dg-label {
  fill: var(--dg-label-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.arch__diagram svg .dg-sublabel {
  fill: var(--dg-label);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
}
.arch__diagram svg .dg-title {
  fill: var(--c-accent-2-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arch__diagram svg .dg-section {
  fill: var(--dg-label);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.arch__diagram svg .dg-line {
  fill: none;
  stroke: var(--dg-line-active);
  stroke-width: 2;
  stroke-linecap: round;
}
.arch__diagram svg .dg-line--accent { stroke: var(--dg-line-active); }
.arch__diagram svg .dg-line--aws,
.arch__diagram svg .dg-line--rhel,
.arch__diagram svg .dg-line--cisco { stroke: var(--c-accent-2); }
.arch__diagram svg .dg-packet { fill: var(--dg-packet); stroke: none; }

/* Reduced motion: the cascade never runs, so the nodes must already be at
   their final state. Without this the whole stage stayed empty — worse than
   the bug it was avoiding. */
@media (prefers-reduced-motion: reduce) {
  .arch__diagram svg .dg-box,
  .arch__diagram svg .dg-label,
  .arch__diagram svg .dg-sublabel,
  .arch__diagram svg .dg-title,
  .arch__diagram svg .dg-section,
  .arch__diagram svg .dg-line {
    opacity: 1 !important;
    transform: none !important;
  }
}