/*
  FloData Motion tokens
  Load once, site wide. Every element reads these at runtime, so changing a value here
  restyles all elements with no JS edits.

  --fd-pop is the new "spunk" colour. It is used sparingly inside the animations only
  (the moment something is found, flagged or selected). Amber stays reserved for the
  decision and the primary button, exactly as in the current build.
*/
:root {
  --fd-ground: #0b1a3a;   /* dark section ground */
  --fd-navy:   #2d509a;   /* brand primary navy */
  --fd-blue:   #5495fc;   /* brand bright blue */
  --fd-sky:    #84cafd;   /* brand light blue */
  --fd-ice:    #cef3fa;   /* brand pale cyan */
  --fd-paper:  #f7fafd;   /* light section ground */
  --fd-ink:    #0f1b33;   /* body text */
  --fd-amber:  #f2a33a;   /* the decision */
  --fd-pop:    #ff4f8b;   /* signal pink (alternatives: #c4f53d volt lime, #ff6a4d signal coral) */

  --fd-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fd-display: "Futura PT", Futura, "Jost", sans-serif;
}

/* Every element is a block that fills its column. Height comes from aspect-ratio,
   which each element sets for itself and you can override per instance. */
fd-convergence, fd-method-morph, fd-order-scan, fd-product-orbit, fd-lens-stack,
fd-automation-flow, fd-grounded-ai, fd-terrain-scan, fd-forecast, fd-migration,
fd-heartbeat, fd-signal-intake, fd-clarity-field {
  display: block;
  position: relative;
  width: 100%;
  contain: layout paint;
}

/* Default proportions, set in CSS so the space is reserved before the script loads (no layout shift).
   Override per instance with style="aspect-ratio: …" or the aspect attribute. */
fd-convergence { aspect-ratio: 5 / 4; }
fd-method-morph { aspect-ratio: 4 / 3; }
fd-order-scan { aspect-ratio: 16 / 8; }
fd-product-orbit { aspect-ratio: 1 / 1; }
fd-lens-stack { aspect-ratio: 1 / 1; }
fd-automation-flow { aspect-ratio: 16 / 9; }
fd-grounded-ai { aspect-ratio: 4 / 3; }
fd-terrain-scan { aspect-ratio: 4 / 3; }
fd-forecast { aspect-ratio: 16 / 10; }
fd-migration { aspect-ratio: 16 / 9; }
fd-heartbeat { aspect-ratio: 4 / 3; }
fd-signal-intake { aspect-ratio: 1 / 1; }
fd-clarity-field { aspect-ratio: 4 / 3; }

/* Wide elements get taller on phones so labels stay readable */
@media (max-width: 560px) {
  fd-order-scan, fd-automation-flow, fd-migration, fd-forecast { aspect-ratio: 4 / 3; }
}

/* Optional no-JS fallback: show the still poster until the element upgrades.
   Uncomment and adjust the path if you serve the posters folder. */
/*
fd-convergence:not(:defined) { background: url(/flodata-motion/posters/fd-convergence.webp) center / contain no-repeat; }
*/