/*
 * Liquid glass surfaces (see yana-glass.js). Every browser gets frosted glass with a lit rim;
 * Chromium also gets edge refraction through html.lg-refract and --lg-filter.
 * Glass only reads when something with detail sits behind it, so each group of glass cards
 * gets a backdrop: soft brand-colour light and a faint ruled grid that the glass edges bend.
 * The backdrop drifts with scroll (compositor transform), and is still when the page is.
 */
:root {
  --lg-tint: rgba(255, 255, 255, .58);
  --lg-tint-strong: rgba(255, 255, 255, .76);
  --lg-ink-tint: rgba(38, 78, 122, .72);
  --lg-rim: rgba(255, 255, 255, .95);
  --lg-rim-soft: rgba(255, 255, 255, .45);
  --lg-shade: rgba(28, 58, 102, .14);
  --lg-blue: #4f80ff;
  --lg-sky: #38bdf8;
  --lg-indigo: #6366f1;
  --lg-grid: rgba(79, 128, 255, .13);
}

.home-page .lg {
  /* No backdrop-filter (owner 19/10: scrolling hit 100% GPU). Measured on this page: the
     refraction filters took scrolling from about 13% to 100% GPU, and even one plain blurred
     sticky bar cost about 50%, because everything behind it is re-blurred every frame. The
     glass look is kept with a see-through tint, a lit rim and a soft shadow, which cost
     nothing while scrolling; the ruled grid still shows through. */
  background: var(--lg-tint) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 0 0 1px var(--lg-rim-soft),
    inset 0 -10px 22px -16px var(--lg-rim),
    inset 10px 0 24px -22px var(--lg-rim),
    0 18px 40px -18px var(--lg-shade) !important;
}

/* Reading surfaces keep more white so body text stays at WCAG AA over the colour behind. */
.home-page .discovery-stage.lg,
.home-page .home-cap.lg,
.home-page .route-card.lg,
.home-page .home-use-list > a.lg { background: var(--lg-tint-strong) !important }
.home-page .site-nav.lg { background: rgba(255, 255, 255, .55) !important }

/* Primary actions: tinted glass, white label. */
.home-page .discovery-entry.lg,
.home-page .home-final-primary.lg {
  background: var(--lg-ink-tint) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 -8px 16px -12px rgba(255, 255, 255, .55),
    0 14px 30px -14px rgba(28, 62, 110, .45) !important;
}
.home-page .lg:is(a, button) { transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), box-shadow .35s ease }
.home-page .lg:is(a, button):active { transform: scale(.97) }

/* Backdrops behind each group of glass surfaces. */
.home-page :is(.execution-lab, .ecosystem-prologue .prologue-sticky, .home-cap-grid, .home-architecture-grid, .home-use-list, .route-grid, .home-final-actions) {
  position: relative;
  isolation: isolate;
}
.home-page :is(.execution-lab, .ecosystem-prologue .prologue-sticky, .home-cap-grid, .home-architecture-grid, .home-use-list, .route-grid, .home-final-actions)::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--lg-blue) 55%, transparent), transparent) 8% 22% / 38% 70% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--lg-sky) 50%, transparent), transparent) 62% 78% / 42% 72% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--lg-indigo) 42%, transparent), transparent) 92% 18% / 30% 60% no-repeat;
  -webkit-mask: radial-gradient(ellipse at center, #000 45%, transparent 78%);
  mask: radial-gradient(ellipse at center, #000 45%, transparent 78%);
}
.home-page .home-final-actions::before { inset: -60% -10% }
.home-page .execution-lab::before { inset: 14% -4% -4% }

/* The colour fields stay still: moving masked layers cost GPU on every scroll frame. */
@keyframes lg-drift {
  from { transform: translate3d(-3%, 6%, 0) }
  to { transform: translate3d(3%, -6%, 0) }
}

@media (prefers-reduced-transparency: reduce) {
  .home-page .lg { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important }
  .home-page .discovery-entry.lg, .home-page .home-final-primary.lg { background: #2e5c86 !important }
}