/* Threshold visual layer only.
   The official Threshold remains the source of truth for content, layout, responsive geometry and motion. */
body[data-view="threshold"] .threshold::before {
  inset: 0;
  z-index: -4;
  background: url("/img/VII-threshold-hall.png") center center / cover no-repeat;
  background-image: image-set(
    url("/img/VII-threshold-hall.webp") type("image/webp"),
    url("/img/VII-threshold-hall.png") type("image/png")
  );
}

body[data-view="threshold"] .threshold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: rgba(6, 7, 26, 0.47);
}

body[data-view="threshold"] .threshold__architecture .plane {
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(247, 244, 238, 0.11);
  background: rgba(247, 244, 238, 0.006);
  -webkit-backdrop-filter: saturate(1.03) contrast(1.02) brightness(1.01);
  backdrop-filter: saturate(1.03) contrast(1.02) brightness(1.01);
  filter: none;
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.22),
    0 24px 44px rgba(0, 0, 0, 0.28),
    0 62px 118px rgba(0, 0, 0, 0.40),
    0 126px 176px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -2px 0 rgba(0, 0, 0, 0.20);
}

body[data-view="threshold"] .threshold__architecture .plane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(247, 244, 238, 0.036) 0,
      rgba(247, 244, 238, 0.008) 9%,
      rgba(6, 7, 26, 0) 56%,
      rgba(3, 3, 12, 0.12) 100%
    ),
    radial-gradient(
      125% 110% at 50% 47%,
      rgba(6, 7, 26, 0) 48%,
      rgba(6, 7, 26, 0.07) 77%,
      rgba(2, 3, 12, 0.22) 100%
    );
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(247, 244, 238, 0.10),
    inset 1px 0 0 rgba(247, 244, 238, 0.035),
    inset -1px 0 0 rgba(0, 0, 0, 0.12);
}

body[data-view="threshold"] .threshold__architecture .plane.is-near {
  border-color: rgba(247, 244, 238, 0.16);
  filter: brightness(1.01);
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.24),
    0 28px 50px rgba(0, 0, 0, 0.31),
    0 72px 132px rgba(0, 0, 0, 0.45),
    0 140px 190px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -2px 0 rgba(0, 0, 0, 0.23);
}

body[data-view="threshold"] .threshold__architecture .plane.plane--three {
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.24),
    0 32px 58px rgba(0, 0, 0, 0.34),
    0 86px 150px rgba(0, 0, 0, 0.50),
    0 154px 210px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

body[data-view="threshold"] .threshold__architecture .plane.plane--three.is-near {
  box-shadow:
    0 9px 16px rgba(0, 0, 0, 0.26),
    0 36px 64px rgba(0, 0, 0, 0.37),
    0 96px 164px rgba(0, 0, 0, 0.54),
    0 168px 228px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(0, 0, 0, 0.26);
}

@supports not ((backdrop-filter: saturate(1.03)) or (-webkit-backdrop-filter: saturate(1.03))) {
  body[data-view="threshold"] .threshold__architecture .plane {
    background: rgba(247, 244, 238, 0.012);
  }
}