/* Balance Figure Backgrounds 1.0
   Purpose: decorative SVG objects behind Balance Vision Glass pages.
   These are not flat gradients: assets include orbital objects, glass prisms,
   isometric cubes, product constellations, login shield and mesh objects.
*/

:root {
  --balance-figure-opacity: 0.74;
  --balance-figure-soft-opacity: 0.46;
}

body.balance-figures-enabled {
  position: relative;
  overflow-x: hidden;
}

.balance-figure-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  isolation: isolate;
}

.balance-figure-layer::before,
.balance-figure-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  transform: translateZ(0);
}

/* Default internal pages: cabinet/admin overview */
.balance-figure-layer--default::before {
  opacity: var(--balance-figure-opacity);
  background-image:
    url("./figure-orbital-core.svg"),
    url("./figure-glass-prisms.svg");
  background-size:
    min(980px, 62vw) auto,
    min(900px, 58vw) auto;
  background-position:
    right -260px top 34px,
    left -190px bottom -180px;
}

.balance-figure-layer--default::after {
  opacity: var(--balance-figure-soft-opacity);
  background-image:
    url("./figure-data-ribbons.svg"),
    url("./figure-side-circuit-tower.svg");
  background-size:
    100vw auto,
    min(640px, 42vw) auto;
  background-position:
    center 46%,
    left -150px top 80px;
}

/* Portal / My products: visible objects, still behind cards */
.balance-figure-layer--products::before {
  opacity: 0.78;
  background-image:
    url("./figure-product-constellation.svg"),
    url("./figure-isometric-cubes.svg");
  background-size:
    min(1100px, 72vw) auto,
    min(980px, 58vw) auto;
  background-position:
    center top 40px,
    right -300px bottom -120px;
}

.balance-figure-layer--products::after {
  opacity: 0.42;
  background-image: url("./figure-glass-prisms.svg");
  background-size: min(820px, 54vw) auto;
  background-position: left -170px bottom -180px;
}

/* Login: security-like abstract object, calmer and centered */
.balance-figure-layer--login::before {
  opacity: 0.82;
  background-image: url("./figure-login-lock-abstract.svg");
  background-size: min(920px, 76vw) auto;
  background-position: center center;
}

.balance-figure-layer--login::after {
  opacity: 0.30;
  background-image: url("./figure-data-ribbons.svg");
  background-size: 120vw auto;
  background-position: center 52%;
}

/* Landing/static site: larger hero object, not dashboard-like */
.balance-figure-layer--site::before {
  opacity: 0.80;
  background-image:
    url("./figure-hero-mesh-object.svg"),
    url("./figure-glass-prisms.svg");
  background-size:
    min(1160px, 70vw) auto,
    min(760px, 45vw) auto;
  background-position:
    right -260px top 0,
    left -200px bottom -200px;
}

.balance-figure-layer--site::after {
  opacity: 0.42;
  background-image: url("./figure-data-ribbons.svg");
  background-size: 110vw auto;
  background-position: center 40%;
}

/* Dense work pages: planner, logs, large tables. Use fewer/lighter objects. */
.balance-figure-layer--dense::before {
  opacity: 0.38;
  background-image:
    url("./figure-isometric-cubes.svg"),
    url("./figure-side-circuit-tower.svg");
  background-size:
    min(820px, 50vw) auto,
    min(540px, 34vw) auto;
  background-position:
    right -260px bottom -140px,
    left -190px top 120px;
}

.balance-figure-layer--dense::after {
  opacity: 0.22;
  background-image: url("./figure-data-ribbons.svg");
  background-size: 100vw auto;
  background-position: center 48%;
}

/* Put the real content above the decorative layer without heavy global overrides. */
body.balance-figures-enabled .page,
body.balance-figures-enabled .shell,
body.balance-figures-enabled .balance-shell,
body.balance-figures-enabled .app-shell,
body.balance-figures-enabled .cabinet-shell,
body.balance-figures-enabled .admin-shell,
body.balance-figures-enabled .planner-shell,
body.balance-figures-enabled .vault-shell,
body.balance-figures-enabled main,
body.balance-figures-enabled header,
body.balance-figures-enabled footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  :root {
    --balance-figure-opacity: 0.46;
    --balance-figure-soft-opacity: 0.28;
  }

  .balance-figure-layer--default::before,
  .balance-figure-layer--products::before,
  .balance-figure-layer--site::before {
    background-size: 920px auto, 660px auto;
    background-position: right -520px top 70px, left -420px bottom -160px;
  }

  .balance-figure-layer--login::before {
    background-size: 820px auto;
  }
}

@media (max-width: 560px) {
  .balance-figure-layer::after {
    display: none;
  }

  .balance-figure-layer--default::before,
  .balance-figure-layer--products::before,
  .balance-figure-layer--site::before,
  .balance-figure-layer--dense::before {
    opacity: 0.30;
    background-size: 720px auto, 520px auto;
    background-position: right -470px top 120px, left -360px bottom -120px;
  }

  .balance-figure-layer--login::before {
    opacity: 0.38;
    background-size: 700px auto;
  }
}

/* Keep exported Tilda records above the decorative background layer. */
body.balance-figures-enabled #allrecords,
body.balance-figures-enabled .t-records {
  position: relative;
  z-index: 1;
}