/*
  The Yield Engine — landing-page animation styles.

  Ported 2026-07-03 from the standalone piece at the operator's
  desktop\xrp\yield-flow\machine-accurate.html ("space edition": the
  FAssets patent-schematic drawn in luminous linework on a starfield).

  Container adaptation (vs the standalone file): everything that was
  position:fixed against the viewport is position:absolute inside
  #engine-root, which the view renders full-bleed under the navbar and
  yield-engine.js sizes to the space between navbar and footer. All
  selectors are scoped under #engine-root so nothing leaks into the
  Bootstrap dark theme (and .hero/.stats stay clear of site.css names).
*/
#engine-root {
  --paper: #04050e;   /* the void the sheet is drawn on */
  --ink:   #dae4f8;   /* luminous structural linework */
  --faded: #8fa0c8;
  --gilt-text: #ffd166;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
}
#engine-root canvas { position: absolute; inset: 0; display: block; }

#engine-root .engine-overlay { position: absolute; inset: 0; pointer-events: none; }

/* The hero, stats plate and footnote are POSITIONED AND SCALED BY JS into
   reserved empty zones of the 1400x800 sheet (translate(-50%,-50%) scale(S)),
   so they can never collide with the drawing at any container size. Base
   sizes below are the S=1 design; the transform does the rest. */
#engine-root .engine-hero,
#engine-root .engine-stats,
#engine-root .engine-footnote { position: absolute; left: 0; top: 0; will-change: transform; }

#engine-root .engine-hero { text-align: center; width: 900px; }
#engine-root .engine-hero h1 {
  font-size: 36px; font-weight: 400; letter-spacing: 1px; margin: 0;
  /* Variant A's aurora, at full brightness on the night sheet. */
  background: linear-gradient(90deg, #4fd4ff 0%, #cfe9ff 35%, #ffc9a8 65%, #ff7a3c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Stats as an instrument plate / ledger row: ruled box, tabular figures. */
#engine-root .engine-stats {
  display: flex; gap: 24px; align-items: stretch;
  padding: 8px 18px 10px;
  background: rgba(8, 12, 28, 0.82);
  border: 1.5px solid rgba(160, 185, 235, 0.55);
  outline: 1px solid rgba(160, 185, 235, 0.28); outline-offset: 3px;
}
#engine-root .engine-stat { text-align: center; min-width: 78px; }
#engine-root .engine-stat + .engine-stat { border-left: 1px solid rgba(160, 185, 235, 0.25); padding-left: 24px; }
#engine-root .engine-stat .k { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: #6d7ba0; font-family: Georgia, serif; }
#engine-root .engine-stat .v { font-size: 22px; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Value colors carry the story: cyan principal, gold yield, Flare-orange rate. */
#engine-root .v.cyan { color: #4fd4ff; }
#engine-root .v.gilt { color: var(--gilt-text); }
#engine-root .v.verm { color: #ff8a5c; }
#engine-root .v.faded { color: var(--faded); }

#engine-root .engine-footnote { font-size: 12px; color: #66739a; white-space: nowrap; font-style: italic; text-align: center; }

/* Display-range guard: outside a comfortable scale band the sheet hides and
   this plate asks the viewer to resize. Deliberately NOT scaled — it must be
   readable precisely when the container is at a hostile size. */
#engine-root #engine-guard {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; text-align: center;
  background: var(--paper); z-index: 10; padding: 24px;
}
#engine-root #engine-guard .plate {
  border: 1.5px solid rgba(160,185,235,0.55); outline: 1px solid rgba(160,185,235,0.28); outline-offset: 4px;
  padding: 28px 36px; max-width: 520px; background: rgba(8,12,28,0.9);
}
#engine-root #engine-guard h2 { font-weight: 400; letter-spacing: 1px; font-size: 20px; color: var(--ink); margin: 0; }
#engine-root #engine-guard p { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--faded); }

/* Mobile welcome (shown by JS instead of the resize plea when the viewport
   is phone-narrow): same plate idiom, but it must WORK, not apologize —
   story, CTA into the dashboard, done. Sized up from the plea's 13px:
   this is primary content on the device reading it. */
#engine-root .engine-guard-story { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ink); }
#engine-root .engine-guard-cta {
  display: inline-block; margin-top: 18px; padding: 10px 22px;
  border: 1.5px solid rgba(160, 185, 235, 0.55); outline: 1px solid rgba(160, 185, 235, 0.28); outline-offset: 3px;
  color: var(--gilt-text); text-decoration: none; font-size: 15px; letter-spacing: 0.5px;
}
#engine-root .engine-guard-cta:hover,
#engine-root .engine-guard-cta:focus-visible { color: #ffe4a3; border-color: rgba(200, 220, 255, 0.8); }
#engine-root .engine-guard-sub { font-size: 12px; }

/* CTA strip below the drawing (operator feedback 2026-07-09: the earlier
   corner-overlay CTA covered the plate — the action lives OUTSIDE the
   framed animation now). The strip continues the night background so the
   page still reads as one dark sheet; the link keeps the ruled-plate
   idiom, gilt like the yield figures. yield-engine.js subtracts the
   strip's height when sizing #engine-root. */
.engine-cta-bar {
  background: #04050e; /* matches #engine-root --paper */
  text-align: center;
  padding: 12px 16px 16px;
  font-family: Georgia, 'Times New Roman', serif;
}

.engine-cta-bar .engine-cta {
  display: inline-block;
  padding: 10px 22px;
  background: rgba(8, 12, 28, 0.82);
  border: 1.5px solid rgba(160, 185, 235, 0.55);
  outline: 1px solid rgba(160, 185, 235, 0.28);
  outline-offset: 3px;
  color: #ffd166; /* --gilt-text, literal: the strip sits outside #engine-root's scope */
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.engine-cta-bar .engine-cta:hover,
.engine-cta-bar .engine-cta:focus-visible {
  color: #ffe4a3;
  border-color: rgba(200, 220, 255, 0.8);
}