/* Khatam & gach-bori: carved geometry in 3D.
   A carved plaster wall behind the page. art.js writes one shade per facet orientation (--r12-3, --r8-7 ...)
   as the lamp moves; this file sets the tones per theme and decides where the carving may show.
   Rule of the house: the carving lives in margins, edges and empty bands; where people read it is plain paper. */

/* ── the layer ─────────────────────────────────────────────── */
.ink-paper > .aek { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none;
  /* light: shadows are ink, highlights are white plaster, over a faint grey ground */
  --aek-lo: 20 26 23; --aek-hi: 255 255 255;
  --aek-lk: .36; --aek-hk: 1.7;
  --aek-ground: rgb(20 26 23 / .05);
  --aek-face: rgb(255 255 255 / .66);
  --aek-castc: rgb(20 26 23 / .08);
  --aek-pool: .07;
  --aek-base: #fafaf9;     /* the plaster as it reads on paper: ground + face over #fdfdfc */
}
.ink-paper .aek-svg .aek-grid { stroke-width: .7; stroke-linejoin: round; }
.aek-wall, .aek-stick { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
/* the page's own .ink-paper svg rules (the old brush swoosh) must not touch the carving */
.ink-paper .aek svg.aek-svg { position: absolute; inset: 0; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: hidden; opacity: 1; }
.ink-paper .aek-svg path { opacity: 1; stroke: none; }
.ink-paper .aek-svg .aek-ground { fill: var(--aek-ground); }
.ink-paper .aek-svg .aek-face { fill: var(--aek-face); }
.ink-paper .aek-svg .aek-cast { fill: var(--aek-castc); transform: translate(var(--aek-sx, 1px), var(--aek-sy, 1.4px)); }
/* the lamp's pool of light: the wall darkens gently away from the lamp; it drifts with it (transform only) */
.aek-pool { position: absolute; inset: -60%; opacity: 0; will-change: transform;
  background: radial-gradient(closest-side, transparent 28%, rgb(var(--aek-lo) / var(--aek-pool)) 100%); }

/* dark: the same wall at night. Shadows go true black, highlights are only a breath of grey (never a glow) */
.sp2-root[data-theme="dark"] .aek, .auth-wrap[data-auth-theme="dark"] .aek {
  --aek-lo: 0 0 0; --aek-hi: 236 233 225;
  --aek-lk: .95; --aek-hk: .30;
  --aek-ground: rgb(0 0 0 / .30);
  --aek-face: rgb(236 233 225 / .035);
  --aek-castc: rgb(0 0 0 / .5);
  --aek-pool: .34;
  --aek-base: #141614;
}
@media (prefers-color-scheme: dark) {
  html[data-view="site"] .aek {
    --aek-lo: 0 0 0; --aek-hi: 236 233 225;
    --aek-lk: .95; --aek-hk: .30;
    --aek-ground: rgb(0 0 0 / .30);
    --aek-face: rgb(236 233 225 / .035);
    --aek-castc: rgb(0 0 0 / .5);
    --aek-pool: .34;
    --aek-base: #141614;
  }
}

/* ── login: the hero. A carved wall of 12-fold rosettes, opening to clear paper where the form sits ── */
.aek-login .aek-wall {
  -webkit-mask-image: radial-gradient(ellipse 33% 64% at 50% 47%, transparent 42%, rgba(0,0,0,.2) 70%, #000 100%);
          mask-image: radial-gradient(ellipse 33% 64% at 50% 47%, transparent 42%, rgba(0,0,0,.2) 70%, #000 100%);
}

/* ── portal: quiet. A carved panel in the sidebar's empty middle, and a carved edge on the right ── */
.aek-portal .aek-wall {
  -webkit-mask:
    radial-gradient(closest-side, #000 48%, transparent 100%) -70px 86% / 364px 56% no-repeat,
    linear-gradient(to left, #000 0, rgba(0,0,0,.42) max(22px, 2vw), transparent max(110px, 9vw)) 0 0 / 100% 100% no-repeat;
          mask:
    radial-gradient(closest-side, #000 48%, transparent 100%) -70px 86% / 364px 56% no-repeat,
    linear-gradient(to left, #000 0, rgba(0,0,0,.42) max(22px, 2vw), transparent max(110px, 9vw)) 0 0 / 100% 100% no-repeat;
}
.aek-portal .aek-svg { opacity: .92; }

/* ── website: one carved wall behind the whole page, seen in the bands between sections and along the edges
      (art.js draws that mask from the real section positions). The wall stays still while the paper scrolls. ── */
html[data-view="site"] #rest > .ink-paper-page { z-index: -1; overflow: clip; }
html[data-view="site"] #rest .section,
html[data-view="site"] #rest .final { background: transparent; }
.aek-page .aek-wall {   /* before art.js measures the page: edges only */
  -webkit-mask-image: linear-gradient(to right, #000, transparent 60px, transparent calc(100% - 60px), #000);
          mask-image: linear-gradient(to right, #000, transparent 60px, transparent calc(100% - 60px), #000);
}
.aek-page, .aek-page .aek-wall { overflow: visible; }
@supports (overflow: clip) {
  .aek-page, .aek-page .aek-wall { overflow: clip; }
  .aek-page .aek-stick { position: sticky; top: 0; bottom: auto; height: 100vh; }
  @supports (height: 100lvh) { .aek-page .aek-stick { height: 100lvh; } }
}
.aek-final .aek-wall {
  -webkit-mask-image: radial-gradient(ellipse 58% 100% at 100% 55%, #000 0, rgba(0,0,0,.5) 42%, transparent 88%);
          mask-image: radial-gradient(ellipse 58% 100% at 100% 55%, #000 0, rgba(0,0,0,.5) 42%, transparent 88%);
}
.aek-dialog .aek-wall {
  -webkit-mask-image:
    linear-gradient(to right, #000 0, rgba(0,0,0,.45) max(18px, calc((100% - 1180px) * .22)), transparent max(70px, calc((100% - 1180px) / 2 + 34px))),
    linear-gradient(to left, #000 0, rgba(0,0,0,.45) max(18px, calc((100% - 1180px) * .22)), transparent max(70px, calc((100% - 1180px) / 2 + 34px)));
          mask-image:
    linear-gradient(to right, #000 0, rgba(0,0,0,.45) max(18px, calc((100% - 1180px) * .22)), transparent max(70px, calc((100% - 1180px) / 2 + 34px))),
    linear-gradient(to left, #000 0, rgba(0,0,0,.45) max(18px, calc((100% - 1180px) * .22)), transparent max(70px, calc((100% - 1180px) / 2 + 34px)));
}

/* ── phones ── */
@media (max-width: 700px) {
  /* login: a carved lintel over the logo and a carved floor under the links */
  .aek-login .aek-wall {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.5) 5%, transparent 13%, transparent 84%, rgba(0,0,0,.55) 94%, #000 100%);
            mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.5) 5%, transparent 13%, transparent 84%, rgba(0,0,0,.55) 94%, #000 100%);
  }
  /* portal: the header's empty right side and the thin side gutters */
  .aek-portal .aek-wall {
    -webkit-mask:
      radial-gradient(closest-side, #000 30%, transparent 100%) calc(100% + 140px) -70px / 420px 200px no-repeat,
      linear-gradient(to right, rgba(0,0,0,.7) 0, transparent 14px, transparent calc(100% - 14px), rgba(0,0,0,.7) 100%) 0 0 / 100% 100% no-repeat;
            mask:
      radial-gradient(closest-side, #000 30%, transparent 100%) calc(100% + 140px) -70px / 420px 200px no-repeat,
      linear-gradient(to right, rgba(0,0,0,.7) 0, transparent 14px, transparent calc(100% - 14px), rgba(0,0,0,.7) 100%) 0 0 / 100% 100% no-repeat;
  }
  .aek-final .aek-wall {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.4) 22%, transparent 45%);
            mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.4) 22%, transparent 45%);
  }
}

/* ── the real website: the art layer sits behind every section below the doors ── */
/* its own paper: the sections are see-through so the carving shows, and the 3D world canvas must not */
html[data-view="site"] #rest { position: relative; isolation: isolate; background: var(--paper); }