/* Product artwork assignments. Update an image here to change the homepage
   tour, product pages, and related-product cards together. */
:root {
  --backdrop-router: url("../art/backdrops/router-textured.webp");
  --backdrop-router-position: 38% 52%;
  --backdrop-studio: url("../art/backdrops/connect-cloud.webp");
  --backdrop-studio-position: 52% 42%;
  --backdrop-runtime: url("../art/backdrops/studio-textured.webp");
  --backdrop-runtime-position: 64% 46%;
  --backdrop-hero: var(--backdrop-studio);
}

body.product-page-router,
body :is(.product-router, .product-theme-router) {
  --product-backdrop: var(--backdrop-router);
  --product-backdrop-position: var(--backdrop-router-position);
}

body.product-page-studio,
body :is(.product-studio, .product-theme-studio) {
  --product-backdrop: var(--backdrop-studio);
  --product-backdrop-position: var(--backdrop-studio-position);
}

body.product-page-runtime,
body :is(.product-runtime, .product-theme-runtime) {
  --product-backdrop: var(--backdrop-runtime);
  --product-backdrop-position: var(--backdrop-runtime-position);
}

body #how .product-chapter .mk-plate {
  background-image: var(--product-backdrop);
  background-position: var(--product-backdrop-position);
}

/* The homepage artwork belongs to the whole hero, including its chrome.
   The bottom mask fades the actual texture into either theme's canvas. */
body .hero-v2 {
  --hero-chrome-height: calc(var(--nav-h) + 40px);
  --hero-texture-opacity: .86;
  --hero-texture-filter: none;
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding-bottom: var(--sp7);
}
body .hero-v2::before,
body .hero-backdrop {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hero-chrome-height)) 0 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--hero-texture-opacity);
  filter: var(--hero-texture-filter);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgb(0 0 0 / .65) 80%, transparent 100%);
}
body .hero-v2::before {
  background: var(--backdrop-hero) center / cover no-repeat;
}
body .hero-v2:has(.hero-backdrop.is-animated)::before { opacity: 0 }
body .hero-backdrop-canvas { display: none; width: 100%; height: 100% }
body .hero-backdrop.is-animated .hero-backdrop-canvas { display: block }
[data-theme="dark"] body .hero-v2 {
  --hero-texture-opacity: .6;
  --hero-texture-filter: brightness(.22) saturate(.5);
}
body .hero-v2 .hero-stage { max-width: 1328px }
body .hero-v2 .mk-plate.stage-hero {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* Float beyond the app window while keeping a page gutter at every width. */
body .hero-v2 .mk-stack {
  --hero-float-inset: max(calc(-1 * var(--sp7)), calc((100% - 100vw) / 2 + var(--sp5)));
}
body .hero-v2 .stack-chart { left: var(--hero-float-inset) }
body .hero-v2 .stack-term { right: var(--hero-float-inset) }
body:has(.hero-v2) .announce,
body:has(.hero-v2) .nav {
  background: transparent;
  box-shadow: none;
}
body:has(.hero-v2) .announce { border-bottom-color: var(--line) }
body:has(.hero-v2) .nav {
  border-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}
[data-hero-scrolled] body:has(.hero-v2) :is(.announce, .nav) {
  background: var(--marketing-bg);
  border-color: var(--line);
}
@media (prefers-reduced-motion: reduce) {
  body:has(.hero-v2) .nav { transition: none }
}

body .connect-stage {
  background-image: var(--backdrop-studio);
  background-position: var(--backdrop-studio-position);
}

@media (max-width: 620px) {
  :root {
    --backdrop-router-position: 28% 52%;
    --backdrop-studio-position: 60% 40%;
    --backdrop-runtime-position: 74% 44%;
  }
}