/* Liquid glass, a trial (glass-demo.html only; js/glass.js).
   The nav pill, its dropdowns, the phone menu and a lens that slides
   between the nav links are clear glass: a light tint, a bright rim, a
   sheen that drifts as the page scrolls, and in Chromium browsers a real
   bend at the edges of the pill and its panels from SVG
   displacement maps js/glass.js builds to each shape's size. Elsewhere the
   same glass without the bend. The tint deepens over white sections so the
   white type stays readable. */

/* The pill's glass is a layer of its own (::before), so the pill itself is
   not a backdrop root and the dropdowns inside it see the page behind. */
.glass .nav {
  position: relative;
  isolation: isolate;
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: transparent;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  --glass-tint: 0.69;
}
.glass.glass-on-light .nav { --glass-tint: 0.8; }
/* the pill's bend is sized to the pill: the shapes inside it get their own */
.glass .nav__dropdown-menu,
.glass .nav__lens { --lg-filter: initial; }
.glass .nav::before,
.glass .nav::after {
  content: "";
  position: absolute;
  /* over the pill's 1px (transparent) border too: inset 0 stops inside it,
     which left a 1px ring of whatever is behind between the glass and the
     shadow, a white line over white sections */
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.glass .nav::before,
.glass .nav__dropdown-menu,
.glass .nav__mobile {
  background: rgba(24, 24, 28, var(--glass-tint, 0.3));
  -webkit-backdrop-filter: blur(10px) saturate(1.7) brightness(1.05);
          backdrop-filter: var(--lg-filter, blur(10px) saturate(1.7) brightness(1.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 12px 22px -16px rgba(255, 255, 255, 0.18);
  transition: background-color 0.4s ease;
}
/* the sheen: a soft reflection that slides along as the page scrolls */
.glass .nav::after {
  background: linear-gradient(110deg,
    rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.06) 86%, rgba(255, 255, 255, 0) 100%);
  background-size: 220% 100%;
  background-position: var(--sheen, 40%) 0;
}

/* The dropdowns and the phone menu are the same glass as the pill (the
   dropdowns take its tint, being inside it), lifted off the page by a
   shadow. */
.glass .nav__dropdown-menu,
.glass .nav__mobile {
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 12px 22px -16px rgba(255, 255, 255, 0.18),
    0 18px 44px rgba(0, 0, 0, 0.36);
}
.glass .nav__mobile { --glass-tint: 0.69; }
.glass.glass-on-light .nav__mobile { --glass-tint: 0.8; }

/* The lens: one glass drop that slides between the links you point at,
   stretching as it goes (js/glass.js), in place of each link's own hover. */
.nav__lens {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: saturate(1.4) brightness(1.15);
          backdrop-filter: var(--lg-filter, saturate(1.4) brightness(1.15));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 4px 14px rgba(0, 0, 0, 0.22);
  will-change: transform, width;
}
.nav__lens.is-on { opacity: 1; }
/* over Apply: no shadow outside the drop, so nothing shows past the button's border */
.nav__lens.is-cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
@media (hover: hover) and (pointer: fine) {
  .glass .nav__link:hover,
  .glass .nav__dropdown-menu a:hover { background: transparent; }   /* the lens shows the hover */
}

/* Whiter type on the glass; the page you are on stays blue. */
.glass .nav__link,
.glass .nav__dropdown-menu a,
.glass .nav__mobile a:not(.nav__mobile-cta) { color: rgba(255, 255, 255, 0.92); }
.glass .nav__dropdown-menu a { border-radius: 999px; }   /* pill rows, the shape of the lens */
.glass .nav__link:hover,
.glass .nav__dropdown-menu a:hover,
.glass .nav__mobile a:not(.nav__mobile-cta):hover { color: #fff; }
.glass .nav__link[aria-current="page"],
.glass .nav__dropdown.is-current > .nav__link,
.glass .nav__dropdown-menu a[aria-current="page"],
.glass .nav__mobile a[aria-current="page"] { color: var(--cyan); }

/* Every call to action (Apply in the nav and the menu, and the solid pill
   buttons across the pages, the hero's included): solid in the accent with a soft inner glow (no
   rim line, no shadow outside), white type. Hovering drains the fill to clear
   glass inside an outline in the accent, the type turning to it and what is
   behind softening a little. In the accent of the page (orange on the
   Ventures pages); the nav's own stays blue. */
.glass .btn--nav,
.glass .nav__mobile-cta,
.glass .btn--primary,
.glass .hero__cta {
  position: relative;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 3px 8px 14px -10px rgba(255, 255, 255, 0.4);
  color: #fff;
  /* Share Tech Mono has no bold cut, so this is the browser's synthesized bold. */
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(6px) saturate(1.6);
          backdrop-filter: blur(6px) saturate(1.6);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, text-shadow 0.3s ease;
}
.glass .btn--nav,
.glass .nav__mobile-cta { border: 1.5px solid var(--accent); }
.glass .hero__cta { border: 2px solid var(--accent); padding: 12.4px 23.2px; }   /* the border inside its old size */
.glass .btn--nav:hover,
.glass .nav__mobile-cta:hover,
.glass .btn--primary:hover,
.glass .hero__cta:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: none;
  box-shadow: inset 0 0 14px -4px color-mix(in srgb, var(--accent) 45%, transparent);
}