/* ─────────────────────────────────────────────────────────────────────────────
   Diamond Equity Investments — Chicago · the depth layer

   Ported from apps/landing/src/styles/depth.css and made register-aware, so the
   same z-axis works on the paper ground and the company ground, on screen and
   on paper.

   Design read, inherited verbatim from the family: A CASH OFFER IS A PACKET
   THAT GETS ASSEMBLED, so every document is a stack of sheets that overlap,
   occlude one another and lock into register.

   The metaphor is what makes the depth LEGAL. The Opscend standard bans
   shadow-glows, blurred ambience and gradient blobs; paper does not cast a
   glow, it stacks by overlapping. So there is not one box-shadow, one blur or
   one gradient in this file. Every sense of z comes from:

     1. OCCLUSION  — an object crossing another object's boundary
     2. STRADDLING — a sheet spanning the seam between two grounds
     3. FAN        — backing sheets rotated a fraction of a degree, so a stack
                     reads as sheets rather than as a thick border

   ⚠️ `.de-stack` and `.de-marks` both build themselves from ::before/::after.
   An element carrying BOTH gets one merged pseudo-element with properties from
   each, which renders as a grey block. The failure is silent. Never both.
   ────────────────────────────────────────────────────────────────────────── */

/* ── The stack ───────────────────────────────────────────────────────────────
   A sheet with more sheets behind it. Backing sheets are opaque fills with a
   hairline edge, offset AND rotated in opposite directions so the stack fans.
   Perfectly square stacking reads as a border, not as paper. */
.de-stack {
  position: relative;
  isolation: isolate;
}
.de-stack > * { position: relative; z-index: 2; }

.de-stack::before,
.de-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--t-surface);
  border: 1px solid var(--t-line-soft);
  border-radius: var(--t-rad);
  z-index: 0;
  pointer-events: none;
}
/* Second sheet: down-right, a hair clockwise. */
.de-stack::before { translate: 10px 12px; rotate: 0.5deg; }
/* Third sheet: further out, the other way, so the stack fans rather than skews. */
.de-stack::after  { translate: 20px 23px; rotate: -0.35deg; z-index: -1; opacity: 0.72; }

.de-stack--tight::before { translate: 6px 7px;  rotate: 0.3deg; }
.de-stack--tight::after  { translate: 12px 14px; rotate: -0.2deg; }
.de-stack--single::after { display: none; }

/* On the ink ground the backing sheets must DARKEN, not lighten. A lighter
   sheet behind a darker one is exactly the halo the standard bans. */
.de-block--inverse .de-stack::before,
.de-block--inverse .de-stack::after {
  background: var(--ink-stripe-b);
  border-color: #34343e;
}

/* ── Occlusion ───────────────────────────────────────────────────────────────
   `.de-over` ranks an element and sets NOTHING else.

   It deliberately does not set `position`: this file loads after web.css, and a
   primitive that reset positioned elements to `relative` drops them back into
   flow — which in the parent build inflated a container's height and leaked the
   stack's backing-sheet edges down the page as stray hairlines. One line, three
   visible defects.

   It also never sets `translate`, so nothing fights an animation for the same
   property. Static placement is inset; travel is translate. */
.de-over { z-index: 3; }
.de-over--out { margin-inline: calc(var(--out, 34px) * -1); }

/* ── Straddling the seam ─────────────────────────────────────────────────────
   An object hanging across the boundary between two grounds must be in front of
   both, so both fall behind it. The single most effective depth moment
   available here, and it costs one negative margin. It also converts a section
   divider — the most inert thing in a document — into the proof that the
   composition has layers. */
.de-block--straddle { position: relative; padding-top: clamp(56px, 9cqi, 132px); }
.de-straddler {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--straddle, 88px) * -1);
}

/* ── The register mark ───────────────────────────────────────────────────────
   Crop-mark corners: L-shaped hairlines that give containment without a card,
   so the surface stays flat on the paper and never needs elevation. */
.de-marks { position: relative; }
.de-marks::before,
.de-marks::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--t-line);
  pointer-events: none;
}
.de-marks::before { top: -7px;    left: -7px;   border-right: 0; border-bottom: 0; }
.de-marks::after  { right: -7px;  bottom: -7px; border-left: 0;  border-top: 0; }

/* ── Paper tooth ─────────────────────────────────────────────────────────────
   Texture, not ambience: no colour, no blur radius, no gradient. It is the
   tooth of the stock, and it is most of why the ground reads as paper rather
   than as beige. Absolute rather than fixed, so it also works inside a printed
   sheet and inside a gallery preview stage. */
.de-grain {
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── The seal ────────────────────────────────────────────────────────────────
   One small round-cornered plate carrying a figure or a mark, set to hang off
   the corner of a sheet so it occludes both the sheet and whatever is behind
   it. This is where the single accent moment usually goes. */
.de-seal {
  display: inline-block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--t-accent);
  color: var(--t-on-accent);
  border-radius: var(--t-rad);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3cqi, 1.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.de-seal__cap {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
}