/* ground.css: the wall under every page. 29 Oct 2026, Nadir. One half of a pair with ground.js.
   The studio's own mark combed into black plaster (G2, Anwar PASS WITH NOTE 28 Oct) is the one ground of the site. The home's plate wears it
   as its face (type-a.js reads it as the texture uG); every other page carries it as one fixed layer behind the content, so the dark sections
   that used to wear loom, jamdani and selvedge cloth now open onto the same wall the home has. The cream paper sections are untouched.
   THE MOTION: the wall breathes. Three slow swings, nested so they add: side to side in 52 s, up and down in 73 s, in and out in 61 s,
   each an ease-in-out swing that reverses at its end (alternate), so the three never line up again inside a reading. It reads as light
   crossing plaster, not as a slide, and there is no loop seam because nothing jumps: every leg ends where the next begins.
   The numbers live here as custom properties; ground.js reads them, so the plate's shader and this layer move by one set of figures.
   prefers-reduced-motion: no animation, the wall stands at the middle of its path, the same pixels the drift crosses. */
:root{
  --wall:url(media/ground/plaster-desk.jpg);   /* 2352x1320, cover, anchored right top, as on the home: the mark's tail at the right */
  --wall-black:#12100C;                         /* the plaster's own black, the fill behind the picture while it loads */
  --wall-x:1.4vw;                               /* the side to side swing, each way */
  --wall-y:.9vh;                                /* the up and down swing, each way */
  --wall-s:1.012;                               /* the breath: scale 1 to this and back */
  --wall-tx:52s;--wall-ty:73s;--wall-ts:61s;    /* one swing each way, in seconds */
}
@media (max-width:760px){:root{--wall:url(media/ground/plaster-phone.jpg)}}   /* 660x1428: the tail rises up the phone */

/* the pages that carry the wall as a layer: html.has-wall, set in the markup so the sections open before any script runs */
html.has-wall{background:var(--wall-black)}
html.has-wall body{background:transparent}
.wall{position:fixed;z-index:-1;left:-3vw;top:-3vh;width:106vw;height:114vh;pointer-events:none;overflow:hidden;will-change:transform}   /* 3 percent over on every side for the swing, 8vh more below for the scroll */
.wall-x,.wall-y,.wall-s{position:absolute;inset:0;will-change:transform;transform-box:fill-box;transform-origin:50% 50%}   /* the same three classes ride the SVG sheet on the home, where they are <g> elements: transform-box makes the SVG centre the picture's own */
.wall-s{background:var(--wall-black) var(--wall) right top/cover no-repeat}
.wall-x{animation:wall-x var(--wall-tx) cubic-bezier(.42,0,.58,1) calc(var(--wall-tx) / -2) infinite alternate}   /* a negative delay of half a swing starts each leg at its middle: the wall is at rest on the first frame and moves from there */
.wall-y{animation:wall-y var(--wall-ty) cubic-bezier(.42,0,.58,1) calc(var(--wall-ty) / -2) infinite alternate}
.wall-s{animation:wall-s var(--wall-ts) cubic-bezier(.42,0,.58,1) calc(var(--wall-ts) / -2) infinite alternate}
@keyframes wall-x{from{transform:translate3d(calc(var(--wall-x) * -1),0,0)}to{transform:translate3d(var(--wall-x),0,0)}}
@keyframes wall-y{from{transform:translate3d(0,calc(var(--wall-y) * -1),0)}to{transform:translate3d(0,var(--wall-y),0)}}
@keyframes wall-s{from{transform:scale(1)}to{transform:scale(var(--wall-s))}}
@media (prefers-reduced-motion:reduce){.wall-x,.wall-y,.wall-s{animation:none}}
html.wall-still .wall-x,html.wall-still .wall-y,html.wall-still .wall-s{animation:none}   /* set by ground.js for full-page renders (window.__still) */

/* the site.css pages: the dark grounds open onto the wall. Only the grounds change: the cream paper, the cloth inside the stencil letters,
   the strips and the cards keep their own surfaces. The flame that lay on the cloth goes, because the wall is the mark already. */
html.has-wall .pagehead,html.has-wall #top,html.has-wall main > .sec.dark,html.has-wall #s3.dark,html.has-wall #close.dark,html.has-wall .foot,html.has-wall #audit,html.has-wall #work{background:none}
html.has-wall .sec.dark::before,html.has-wall .foot::before,html.has-wall .pagehead::before{display:none}
html.has-wall.stuck .menu,html.has-wall .menu.open nav{background:var(--wall-black)}   /* the pinned bar and the open phone menu sit on the plaster's black, so the drifting wall never shows through type */
@media (max-width:760px){html.has-wall .two > .dark{background:none}}

/* the glow.css pages (work, what we do): the body was the black; the wall is the body now. The fixed top bar keeps its black once the page has moved. */
html.has-wall .top.back{background:var(--wall-black)}

/* the home, R14 (30 Oct; Nazar's rule, Wolff Olins's pacing): WALL UNDER WORDS, BLACK UNDER PICTURES. The main is open; the work screens (the hero's stage,
   the plate screen, Chhaya, the three strip screens) paint their own flat black so client pictures and the plate are the only light; the text sections
   (what we do, the audit, the AI system, who, team, the close) and the footer stand on the drifting plaster, and the three gradient grounds glow-a.css gave
   the reading blocks go, because a site has one ground now. Measured R13: cream on the wall 13.5 to 15 to 1. */
html.has-wall body.type-a > main{background:none}
html.has-wall body.type-a .screen.chhaya{background:var(--black)}
html.has-wall body.type-a .audit,html.has-wall body.type-a .ai,html.has-wall body.type-a .grow{background:none}
html.has-wall .sec .lab{color:rgba(242,242,240,.7)}   /* Anwar R14 re-look, f4: the 11px eyebrow labels (AUDIT, AI SYSTEM, WHAT WE DO) measured 3.9 to 1 against the brightest plaster at .5. Measured by his method (shown and hidden renders, glyph = pixels at half ink or more, plaster = brightest 5 percent in the text box): .6 gave 4.1 to 4.4 at the 25th percentile, under his 4.5, .66 left AI SYSTEM at 4.2, .7 reads 4.7, 5.6, 4.7 on the three, without changing their register */

/* the audit (Anwar R13, question b): the pattern card with its orange pencil line comes back, as an object laid on the wall, not a ground.
   lighten drops the picture's own near-black into the plaster and keeps the card and the line. */
html.has-wall.pg-audit #s3,html.has-wall .pg-audit #s3{position:relative;background:none}
html.has-wall .pg-audit #s3 > .card{position:absolute;left:0;top:var(--at);width:var(--aw);height:calc(var(--aw) * .5582);background:url(media/textures/final/audit.jpg) left top/100% auto no-repeat;mix-blend-mode:lighten;pointer-events:none;z-index:0}
html.has-wall .pg-audit #s3 > :not(.card){position:relative;z-index:1}
@media (max-width:760px){html.has-wall .pg-audit #s3 > .card{top:auto;bottom:0;width:100vw;height:55.82vw;background-size:100vw auto}}

/* the phone menu stamp (Anwar R13, the round 12 fault on ten more pages): an orange outline, so the orange headline stays the one orange mass */
@media (max-width:760px){html.has-wall .menu .mstamp{background:transparent;color:var(--c);-webkit-text-fill-color:var(--c);box-shadow:inset 0 0 0 1.5px var(--orange)}html.has-wall .menu .mstamp::before{display:none}}