/* ============================================================
   AKAMENA — 04 platform flow diagram
   Port of uploads/Platform.tsx + PlatformEmbed.tsx + styles.css
   (user-authored responsive component; Tailwind → tokens,
   lucide → inline SVG, React → akamena-flow.js).
   Desktop ≥1024px: UnifiedFlow. Below: MobileFlow (vertical).
   ============================================================ */

/* ---------- the night band that hosts the diagram ---------- */
.flowband {
  position: relative;
  /* no external top margin — the ivory story block meets the dark band edge-to-edge
     (its own top padding below gives the heading its breathing room). */
  margin-top: 0;
  background: var(--night);
  padding: clamp(60px, 9vh, 104px) 0 clamp(36px, 5vh, 56px);
}
/* subtle grain over the dark ground (from the embed's `grain` utility) */
.flowband::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+);
}
.fb-inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 84px); }
/* diagram heading — introduces the dark data-flow diagram at in-section block-title level
   (not a big section title); on the dark band it uses the light text tokens. */
.fb-head { margin-bottom: clamp(30px, 5vh, 52px); }
/* desktop: a step more air between the subline and the diagram (mobile keeps the above) */
@media (min-width: 981px) { .fb-head { margin-bottom: clamp(72px, 7vh, 84px); } }
/* one-line rule: title + subline each stay on a single line on desktop/tablet, wrapping
   only when the viewport is too narrow to fit them (smartphones). */
.fb-title { font-family: var(--serif); font-size: clamp(1.6rem, 2.9vw, 2.4rem); line-height: 1.12; color: var(--ivory); white-space: nowrap; }
.fb-title em { font-style: italic; color: var(--gold-bright); }
.fb-sub { margin-top: 12px; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.5; color: rgba(251, 250, 246, 0.72); white-space: nowrap; }
@media (max-width: 720px) { .fb-title, .fb-sub { white-space: normal; } }

.fd { position: relative; width: 100%; }

/* ---------- type voices inside the diagram ---------- */
.fd-idx { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.fd-title { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.05; color: var(--ivory); white-space: nowrap; }
.fd-titleline { display: flex; align-items: baseline; gap: 12px; }
.fd-srclabel { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(251,250,246,0.7); line-height: 1.5; }

/* desktop legends: solid gold tick anchored on the flow centerline,
   mono caption positioned independently below */
.fd-ltick { position: absolute; display: block; width: 1px; height: 24px; background: rgba(201,152,47,0.6); transform: translateX(-50%); }
.fd-lcap { position: absolute; display: block; text-align: center; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; color: rgba(251,250,246,0.85); }

/* ---------- desktop / mobile switch ---------- */
.fd-desktop { position: relative; display: none; }
.fd-mobile { display: none; }
@media (min-width: 1024px) {
  .fd-desktop { display: block; }
}
@media (max-width: 1023.98px) {
  .fd-mobile { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
}

.fd-abs { position: absolute; }

/* incoming rails (raw-data lanes) */
.fd-rail { position: absolute; height: 1px; pointer-events: none; background: linear-gradient(to right, transparent, rgba(251,250,246,0.3), rgba(251,250,246,0.5)); }

/* platform blocs */
.fd-bloc {
  position: absolute; border-radius: 6px;
  border: 1px solid rgba(201,152,47,0.3);
  background: linear-gradient(to right, rgba(201,152,47,0.03), rgba(201,152,47,0.14), rgba(201,152,47,0.03));
}
.fd-bloc.intel {
  border-color: rgba(201,152,47,0.45);
  background: linear-gradient(to right, rgba(201,152,47,0.05), rgba(201,152,47,0.18), rgba(201,152,47,0.05));
}
.fd-quad { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; pointer-events: none; }
.fd-quad > div { display: flex; align-items: center; justify-content: center; }

/* category node (AI agents / Humans / Applications / Data) */
.fd-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.fd-cat .box { display: flex; flex-shrink: 0; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid rgba(201,152,47,0.4); background: var(--night); color: var(--gold); }
.fd-cat .box svg { width: 16px; height: 16px; animation: iconBurst 3.6s ease-in-out infinite; }
.fd-cat .lbl { font-family: var(--mono); font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(251,250,246,0.7); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center; }

/* hue-driven connectors + gem rails (backgrounds inlined by JS) */
.fd-line { position: absolute; height: 1px; pointer-events: none; }

/* client nodes */
.fd-client { position: absolute; }
.fd-client .disc { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid; }
.fd-client .disc svg { width: 16px; height: 16px; }
/* label under each client disc (centered on the 36px disc; desktop matches the mobile gem label) */
.fd-client .lbl { position: absolute; top: 44px; left: 18px; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(251, 250, 246, 0.7); }

/* ---------- particles ---------- */
.fd-overlay { position: absolute; inset: 0; pointer-events: none; }
.fd-p { position: absolute; pointer-events: none; }
.fd-praw { display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; transform: translate(-50%, -50%); }
.fd-pref { display: block; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); }
.fd-pgem { display: block; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); }
/* finished AKAMENA client diamonds (SVG, colours baked in) — upright already (no rotate), centred.
   NOTE: unique class — do NOT reuse .fd-dia (that is the raw-data diamond particle shape above,
   8px + rotate(45deg) + white fill). Sized up so the faceted stone + sparkles read clearly. */
/* Centre on the STONE, not the img box: the diamond stone sits at (68,78) in the -6..126
   viewBox → fractions (0.56, 0.636), so the line runs through the stone on both the desktop
   (horizontal) and mobile (vertical) rails. Desktop 40px; mobile keeps its inline 20px. */
.fd-gem-dia { display: block; width: 40px; height: 40px; transform: translate(-56%, -63.6%); pointer-events: none; }
.particle-glow { filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor); }

/* raw material shapes */
.fd-sq  { display: block; width: 8px;  height: 8px;  background: rgba(251,250,246,0.5); }
.fd-tri { display: block; width: 0;    height: 0;    border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(251,250,246,0.55); }
.fd-bar { display: block; width: 16px; height: 3px;  background: rgba(251,250,246,0.45); }
.fd-hex { display: block; width: 10px; height: 10px; background: rgba(251,250,246,0.45); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.fd-cir { display: block; width: 6px;  height: 6px;  border-radius: 50%; background: rgba(251,250,246,0.55); }
.fd-dia { display: block; width: 8px;  height: 8px;  transform: rotate(45deg); background: rgba(251,250,246,0.5); }

/* ---------- MobileFlow (<1024px) ---------- */
/* centered mono label with flanking gold hairlines */
.fdm-label { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; }
.fdm-label::before, .fdm-label::after { content: ""; height: 1px; flex: 1 1 0%; max-width: 40px; background: rgba(201,152,47,0.4); }
.fdm-label span { text-align: center; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.01em; line-height: 1.2; color: rgba(251,250,246,0.8); }
.fdm-label.mt { margin-top: 12px; }

.fdm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-width: 0; }
.fdm-col { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }

/* raw-data rails coming in from above */
.fdm-rawzone { position: relative; }
.fdm-vrail { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(251,250,246,0.25), rgba(251,250,246,0.5)); }

/* title — fixed height so all 3 blocs start at the same y */
.fdm-title { height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; overflow: hidden; text-align: center; }
.fdm-title .fd-idx { font-size: 8px; letter-spacing: 0.18em; }
.fdm-title .t { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.01em; line-height: 1.12; color: var(--ivory); }

/* compact source / banker blocs */
.fdm-bloc { position: relative; height: 104px; border-radius: 6px; border: 1px solid rgba(201,152,47,0.3); background: linear-gradient(to bottom, rgba(201,152,47,0.05), rgba(201,152,47,0.14), rgba(201,152,47,0.05)); }
.fdm-bloc .fdm-quad { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; padding: 6px; pointer-events: none; }
.fdm-bloc.banker { border-color: rgba(201,152,47,0.45); background: linear-gradient(to bottom, rgba(201,152,47,0.05), rgba(201,152,47,0.18), rgba(201,152,47,0.05)); }
.fdm-bloc.banker .fdm-quad { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; align-items: center; gap: 4px; padding: 0 8px; }
.fdm-quad > div { display: flex; align-items: center; justify-content: center; min-width: 0; }

/* compact category nodes inside the mobile blocs */
.fd-mobile .fd-cat .box { width: 32px; height: 32px; }
.fd-mobile .fd-cat .box svg { width: 14px; height: 14px; }
.fd-mobile .fd-cat .lbl { font-size: 7px; letter-spacing: 0.12em; }

/* vertical connectors (refined + gem rails) */
.fdm-connwrap { display: flex; justify-content: center; min-width: 0; }
.fdm-conn { position: relative; width: 16px; }
.fdm-vline { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); pointer-events: none; }

/* Banker platform */
.fdm-banker { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fdm-btitle { display: flex; align-items: baseline; justify-content: center; gap: 12px; text-align: center; }
.fdm-btitle .fd-idx { font-size: 9px; letter-spacing: 0.2em; }
.fdm-btitle .t { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.01em; line-height: 1.25; color: var(--ivory); }

/* gem exit -> clients */
.fdm-gems { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 8px; }
.fdm-gemcol { display: flex; flex-direction: column; align-items: center; }
.fdm-gemcol .disc { margin-top: 8px; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid; }
.fdm-gemcol .disc svg { width: 16px; height: 16px; }
.fdm-gemcol .lbl { margin-top: 4px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(251,250,246,0.7); }

/* ---------- foot: output formats + deep-dive link ---------- */
.fb-foot { margin-top: clamp(38px, 6vh, 60px); padding-top: clamp(26px, 4vh, 38px); border-top: 1px solid var(--hairline-dark); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.flowband .out-formats { margin-top: 0; }
.flowband .of-cap { color: rgba(251,250,246,0.5); white-space: nowrap; }
.flowband .of-item { background: transparent; border-color: var(--hairline-dark); color: var(--ivory); white-space: nowrap; }
/* real link to /product: persistent underline (strengthens on hover), trailing arrow that
   nudges right on hover, visible focus ring, and a ≥44×24px hit area via padding. */
.fb-link { font-family: var(--mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); display: inline-flex; align-items: center; gap: 12px; padding: 14px 10px; border-radius: 2px; }
.fb-link > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(226, 163, 60, 0.55); transition: text-decoration-color .15s var(--ease); }
.fb-link::after { content: "\2192"; font-size: 1.4em; line-height: 1; transition: transform .15s var(--ease); }
.fb-link:hover > span { text-decoration-color: var(--gold-bright); }
.fb-link:hover::after { transform: translateX(3px); }
.fb-link:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .fb-link::after { transition: none; } }

/* ============================================================
   Keyframes — verbatim from uploads/styles.css (Rail variants:
   the centering transform is static on the element, so the
   animation moves left/top + opacity only)
   ============================================================ */

@keyframes flowRawRail {
  0%   { left: -3%; opacity: 0; }
  10%  { opacity: 0.9; }
  70%  { opacity: 0.9; }
  100% { left: 20%; opacity: 0; }
}
@keyframes flowRefinedRail {
  0%   { left: 46%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 58%; opacity: 0; }
}
@keyframes gemToClientRail {
  0%   { left: 80%; opacity: 0; }
  15%  { left: 81%; opacity: 1; }
  85%  { left: 94%; opacity: 1; }
  100% { left: 96%; opacity: 0; }
}

/* Vertical (small-screen) variants — particles flow top -> down */
@keyframes flowDownRail {
  0%   { top: -6%; opacity: 0; }
  15%  { opacity: 0.9; }
  100% { top: 108%; opacity: 0; }
}
@keyframes flowRefinedDownRail {
  0%   { top: -10%; opacity: 0; }
  20%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}
@keyframes gemDownRail {
  0%   { top: -10%; opacity: 0; }
  20%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Category icon burst: one bright flash per 3.6s cycle. Delays staggered
   per instance so at least one icon is always mid-burst. */
@keyframes iconBurst {
  0%, 80%, 100% { opacity: 0.6; transform: scale(1);    filter: drop-shadow(0 0 0 rgba(201,152,47,0)); }
  88%           { opacity: 1;   transform: scale(1.35); filter: drop-shadow(0 0 6px rgba(201,152,47,0.9)); }
}

/* ---------- reduced motion / print: particles depend on animation for
   position — hide them; structure stays legible and static ---------- */
@media (prefers-reduced-motion: reduce), print {
  .fd-p { display: none !important; }
  .fd-cat .box svg { animation: none !important; }
}