/* 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 — the 21:9 mist blown up so only the band shows under the card */
#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) 13%, rgba(247, 249, 252, 0) 87%, rgba(247, 249, 252, 1) 100%),
    url("../img/bg-band-mist.webp");
  background-size: 100% 100%, 100% 100%, 120% auto;
  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 — LOCKED — plain white with pale spheres */
#why {
  background-image:
    radial-gradient(circle closest-side at 50% 50%, rgba(255,255,255,1) 0%, rgba(251,253,255,1) 34%, rgba(240,244,250,1) 62%, rgba(228,234,244,1) 84%, rgba(224,231,241,0.55) 95%, rgba(224,231,241,0) 100%),
    radial-gradient(circle closest-side at 50% 50%, rgba(255,255,255,0.82) 0%, rgba(251,253,255,0.82) 34%, rgba(240,244,250,0.82) 62%, rgba(228,234,244,0.82) 84%, rgba(224,231,241,0.451) 95%, rgba(224,231,241,0) 100%),
    radial-gradient(circle closest-side at 50% 50%, rgba(255,255,255,0.7) 0%, rgba(251,253,255,0.7) 34%, rgba(240,244,250,0.7) 62%, rgba(228,234,244,0.7) 84%, rgba(224,231,241,0.385) 95%, rgba(224,231,241,0) 100%),
    radial-gradient(circle closest-side at 50% 50%, rgba(255,255,255,0.76) 0%, rgba(251,253,255,0.76) 34%, rgba(240,244,250,0.76) 62%, rgba(228,234,244,0.76) 84%, rgba(224,231,241,0.41800000000000004) 95%, rgba(224,231,241,0) 100%);
  background-size: 520px 520px, 300px 300px, 190px 190px, 240px 240px;
  background-position: -6% 22%, 98% 78%, 86% 10%, 26% 98%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* 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 */