/* scene-final.css — "Final"
 *
 * GENERATED by tools/build-scene-variants.js — edit the scene definition there,
 * not this file. Loaded AFTER liquid.css and liquid-motion.css, overrides only.
 *
 * The page being assembled from signed-off decisions, one section at a time.
 * Everything here is a choice Sergio has made against a screenshot, not a
 * proposal: the mist hero with rounded light slabs, a locked full-width nav
 * and a markedly more transparent query card; bg-band-ribbon behind the API
 * rows; the isometric mesh on the dark engine band; and the mountain closing
 * band handing off to the night footer, both as built. Sections not yet
 * decided still carry their Mist assignment and are marked UNDECIDED below.
 */

/* The page-wide dot grid is what the art replaces. .lq-base stays: it is the
   near-white gradient every edge fade resolves to, and the gaps between
   sections are made of it. */
.lq-dots { display: none; }

/* Hero — LOCKED composition, RESIZE-FIXED 2026-08-21. Two changes, both about what happens at viewport widths other than the one it was locked against. (1) `cover`, not `120% auto`: a 21:9 plate sized off WIDTH alone renders 0.51x as tall as it is wide, so how much of the hero it covers depends entirely on the window ratio — it overshot on wide screens and left bare paper on narrow ones. `cover` makes coverage a constant. Same reasoning already applied to #api below. (2) `fadeTop: 0`: the shared edge fade resolves the top 13% of the section to solid page-white, and on the hero that 13% is exactly the band the fixed nav floats in — so the menu sat on bare white while the rest of the hero had art behind it, and the height of that white band moved with the viewport. The bottom fade stays: it still hands off to #product. */
#top {
  background-image:
    linear-gradient(rgba(247, 249, 252, 0.1), rgba(247, 249, 252, 0.1)),
    linear-gradient(180deg, rgba(247, 249, 252, 1) 0%, rgba(247, 249, 252, 0) 0%, rgba(247, 249, 252, 0) 87%, rgba(247, 249, 252, 1) 100%),
    url("../img/bg-band-mist.webp");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Product — LOCKED — plain white, no art and no dots; the app screenshot is the subject */
/* #product — no art (deliberate: dense copy) */

/* API — LOCKED — the glass ribbon, full-bleed so the heading sits on it. `cover` rather than the band treatment used elsewhere: at 100% auto the 21:9 plate only reached the lower third and the title sat on bare white. Anchored at 62% so the ribbon's body still falls behind the row list. */
#api {
  background-image:
    linear-gradient(rgba(247, 249, 252, 0.32), rgba(247, 249, 252, 0.32)),
    linear-gradient(180deg, rgba(247, 249, 252, 1) 0%, rgba(247, 249, 252, 0) 13%, rgba(247, 249, 252, 0) 87%, rgba(247, 249, 252, 1) 100%),
    url("../img/bg-band-ribbon.webp");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center 62%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Why teams — NO ART — the platform walkthrough owns #why now and paints its own dark ground. This used to emit pale spheres; because that is an ID selector it beat the section's own .df-scope background no matter what the link order was, and the dark section rendered light. Leave it unpainted. */
/* #why — no art (deliberate: dense copy) */

/* Engine (dark) — LOCKED — the Nodes treatment: one luminous curve, nothing else. Chosen over the mesh because the lattice ran behind the copy across the whole band; the curve leaves the left two-thirds empty, which is exactly where the text sits. Measured safe at 20.8:1 for white ink. */
#engine .night-art { display: none; }
#engine .night-dots {
  background-image: url("../img/bg-dark-curve.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 9%, #000 88%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 9%, #000 88%, rgba(0,0,0,0) 100%);
}

/* Coverage — LOCKED — plain white with the dot grid */
#data {
  background-image:
    radial-gradient(rgba(11, 18, 32, .16) 1.2px, rgba(0, 0, 0, 0) 1.25px);
  background-size: 26px 26px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* FAQ — LOCKED — plain white, no art (longest copy on the page) */
/* #faq — no art (deliberate: dense copy) */

/* Closing (dark) — LOCKED — mountain closing band, as built */
/* .closing — closing art left as built */

/* Footer (dark) — LOCKED — night footer, as built */
/* .footer-night — footer left as built */

/* no variant label: this scene is the production homepage */