/* liquid-hero-v2.css — GENERATED by tools/build-scene-variants.js
 *
 * Three changes to the liquid hero, loaded after liquid.css, liquid-motion.css
 * and the scene stylesheet.
 */

/* --------------------------------------------------------------------------
   1. The nav locks to the top as a full-width bar.
      liquid.css already had `position: sticky; top: 0` — what changes here is
      the shape: the floating centred pill becomes an edge-to-edge glass bar
      flush against the top of the viewport, so it reads as chrome rather than
      as an element sitting on the page.
   -------------------------------------------------------------------------- */
.nav { padding: 0; }
.nav-inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-radius: 0;
  padding: 13px clamp(18px, 3vw, 44px);
}
/* The masked edge ring draws a rounded outline; on a full-bleed bar that would
   be a box drawn around the whole viewport. Replaced with a single hairline
   along the bottom, which is the only edge a locked bar actually has. */
.nav-inner::after { display: none; }
/* ::before is .glass-deep's refraction band — a rounded inset ring. On a pill it
   IS the edge; on a full-bleed bar it draws a second box inside the first, which
   is the doubled outline. The bar keeps its hairline instead. */
.nav-inner::before { display: none; }

/* Over the dark bands the bar picks up a dark backdrop but the brand and links
   were still painting in ink — near-invisible. Force the night tokens. */
.nav.nav-on-dark .brand-word,
.nav.nav-on-dark .nav-links a,
.nav.nav-on-dark .btn-subtle { color: #fff; }
.nav.nav-on-dark .nav-links a { opacity: .82; }
.nav.nav-on-dark .nav-links a:hover { opacity: 1; }
.nav.nav-on-dark .nav-inner {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .14),
    0 14px 34px -28px rgba(0, 0, 0, .8);
}
.nav-inner {
  box-shadow:
    inset 0 -1px 0 rgba(11, 18, 32, .07),
    0 14px 34px -28px rgba(20, 40, 90, .45);
}

/* --------------------------------------------------------------------------
   2. The query card, further back.
      Same material, less fill. `--glass-fill` and `--glass-blur` are read by
      .glass on this very element, so re-declaring them here is enough — no
      need to restate the background or the filter.
   -------------------------------------------------------------------------- */
.searchbox {
  --glass-fill: linear-gradient(157deg,
                  rgba(255, 255, 255, .24) 0%,
                  rgba(255, 255, 255, .085) 38%,
                  rgba(255, 255, 255, .065) 62%,
                  rgba(255, 255, 255, .19) 100%);
  --glass-blur: blur(1.3px) saturate(118%) brightness(1.02);
}
/* the top gloss was tuned against the denser fill; at this transparency it
   reads as a white smear rather than as light on a surface */
.sb-gloss { opacity: .58; }

/* --------------------------------------------------------------------------
   3. Hero shapes: slabs, not spheres.
      The spheres carried a radial "lit from 34% 22%" gradient and a contact
      shadow underneath, both of which only make sense on a ball. A slab is a
      flat pane catching light along one edge, so the gradient goes linear and
      the contact shadow goes away.
   -------------------------------------------------------------------------- */
.hero-orbs .orb {
  border-radius: clamp(28px, 3.4vw, 58px);
  background: linear-gradient(152deg,
                rgba(255, 255, 255, .95) 0%,
                rgba(255, 255, 255, .72) 42%,
                rgba(255, 255, 255, .52) 72%,
                rgba(255, 255, 255, .68) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -18px 34px -30px rgba(20, 40, 90, .22),
    0 44px 74px -50px rgba(20, 40, 90, .30);
}
.hero-orbs .orb::after { display: none; }   /* the sphere's ground contact */

/* portrait slabs left and right, a couple of smaller ones to break the rhythm.
   orb-1 is deliberately hidden: it sat mid-right at the card's eye level and
   competed with it. The remaining two lower shapes are pushed out to the page
   edges so nothing crowds the query card. */
.orb-1 { display: none; }
.orb-2 { width: clamp(115px, 12vw, 205px); aspect-ratio: .80; right: 1%;  bottom: 3%; top: auto;   left: auto; }
.orb-3 { width: clamp(115px, 12vw, 195px); aspect-ratio: .50; left: 6%;   top: 15%;   bottom: auto; right: auto;
         border-radius: clamp(28px, 3.4vw, 58px); }
.orb-4 { width: clamp(78px, 9vw, 140px);   aspect-ratio: 1.15; left: 3%;  bottom: 7%; top: auto;   right: auto; }
.orb-5 { width: clamp(66px, 7.5vw, 118px); aspect-ratio: 1;    right: 9%; top: 19%;   bottom: auto; left: auto; }