/* THE WORK WALL, one home for its styles. Read by work-wall.html,
   work-wall-flat.html AND the homepage, which carries its own token block and
   lacks a few of site.css's names, hence the fallbacks on every var. Geometry
   is written by wall.js from _reference/MEASURED-SPEC.md; nothing about the
   layout lives in markup. */

.wall{
  /* A full-bleed scene owns its own height (DESIGN.md section 3). The
     standalone page shortens it by the nav so no panel sits behind the links. */
  position:relative;min-height:var(--wall-h,100svh);background:var(--bg-b,#0C0B0A);
  overflow:hidden;isolation:isolate;
  /* 0.462 x stage width, set by wall.js: a 94.5 degree field of view, measured
     off the reference. The single number both earlier builds got most wrong. */
  perspective:var(--persp,665px);perspective-origin:50% 50%;
  /* the phone drives the wall by scroll, so nothing here may trap a touch */
  touch-action:pan-y;
}
.wall-field{
  position:absolute;inset:0;transform-style:preserve-3d;
  /* The field must not take the pointer itself. Its own box sits at z 0 while
     every panel sits behind it, so without this the field wins every hit test
     and no panel ever sees a hover. */
  pointer-events:none;
  /* The room slides as one rigid piece. Panels at different depths move
     different amounts on screen, which is the parallax; nothing rotates. */
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  will-change:transform;
}
.wall-tile{
  position:absolute;top:50%;left:50%;width:var(--w,640px);pointer-events:auto;
  transform:
    translate(-50%,-50%)
    translate3d(var(--tx,0px),var(--ty,0px),var(--tz,0px))
    rotateY(var(--ry,0deg));
  backface-visibility:hidden;
}
/* Rest brightness .42 (the recording measures .36; Liam asked for about 15%
   more, 2026-09-01) and hovered .86. The reference's resting panels are dim
   but in FULL colour, so no grayscale here even though the notes index runs
   its covers grey. */
.wall-tile img{
  display:block;width:100%;height:auto;border-radius:var(--r,2px);
  filter:brightness(.42);
  transition:filter .3s var(--ease,cubic-bezier(.22,1,.36,1));
}
.wall-tile:hover img,.wall-tile:focus-visible img{filter:brightness(.86)}
.wall-tile:focus-visible{outline:2px solid var(--ink,#EDE9E1);outline-offset:4px}

.wall-lock{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:grid;place-content:center;justify-items:center;
  gap:var(--s-3,16px);text-align:center;padding:0 var(--gutter,24px);
}
.wall-lock h2{
  margin:0;font-family:var(--font-display,'Instrument Serif',Georgia,serif);font-weight:400;
  font-size:var(--t-3,clamp(26px,3.8vw,54px));
  line-height:1.0;letter-spacing:-.02em;color:var(--ink,#EDE9E1);
}

/* The pill is a flat overlay in screen space that follows the pointer, not a
   child of the panel: in the capture it stays square to the viewport while
   its panel is angled away. It fades in over 60ms and out over 110ms, both
   measured off the recording. */
.wall-pill{
  position:absolute;z-index:4;pointer-events:none;
  display:inline-flex;align-items:center;gap:var(--s-2,10px);
  padding:var(--s-2,10px) var(--s-3,16px);
  background:var(--ink,#EDE9E1);color:var(--bg-b,#0C0B0A);border-radius:999px;
  font-family:var(--font,'Schibsted Grotesk',system-ui,sans-serif);
  font-size:var(--t-7,clamp(13px,1.1vw,16px));line-height:1;white-space:nowrap;
  opacity:0;transition:opacity .11s var(--ease,cubic-bezier(.22,1,.36,1));
}
.wall-pill::after{content:"\2197"}
.wall-pill[data-on]{opacity:1;transition-duration:.06s}

/* No pointer, no parallax: the field sits still and every panel stays reachable
   by tab. */
@media(prefers-reduced-motion:reduce){.wall-field{transform:none}}

/* The flat variant. Same panels and same pill, room removed: every panel sits
   at one depth facing forward, and only the field itself drifts. */
.wall--flat .wall-tile{transform:translate(-50%,-50%) translate3d(var(--tx,0px),var(--ty,0px),0)}

/* THE PROOF SECTION on the homepage: Case studies with a toggle between the
   SEO and GEO cases and the websites, which are the wall. One section, two
   views, and the switch is the show: the cards blur back into the ground
   while the room's panels rise out of the dark and take their places, centre
   first, rims last. The way back runs the same film in reverse. */
.proof{--proof-dur:1.1s}
.proof .wall{position:absolute;inset:0;min-height:0;z-index:1}
/* the header floats over the room, so the top of the room sinks into the
   ground just enough for the label and the toggle to read. The reference
   has no falloff anywhere; this is the one concession, and only up top. */
.proof .wall::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg-b,#0C0B0A) 0%,rgba(12,11,10,.55) 14%,rgba(12,11,10,0) 34%)}

/* the toggle: one cream block sliding between two mono labels */
.proof-toggle{position:relative;display:inline-flex;flex:none;align-self:flex-start;padding:3px;border:1px solid var(--line,rgba(237,233,225,.13));border-radius:var(--r,2px)}
.proof-toggle button{
  position:relative;z-index:1;background:none;border:0;margin:0;padding:10px 16px;cursor:pointer;
  font-family:'Geist Mono',monospace;font-size:var(--t-label,11px);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--quiet,#8C8579);white-space:nowrap;
  transition:color .45s var(--ease,cubic-bezier(.22,1,.36,1));
}
.proof-toggle button[aria-pressed="true"]{color:var(--bg-b,#0C0B0A)}
.proof-toggle button:focus-visible{outline:2px solid var(--ink,#EDE9E1);outline-offset:2px}
/* THE ENTRANCE, once, the first time the section reaches the screen: the
   block waits on the far label and then travels to the near one, because the
   only way to say the block has two places to be is to show it in both.
   While it waits over there the labels read the other way round, and the two
   colours cross during the slide. wall.js sets data-enter and clears it. */
.proof[data-enter] .proof-toggle [data-proof-to="seo"]{color:var(--quiet,#8C8579)}
.proof[data-enter] .proof-toggle [data-proof-to="web"]{color:var(--bg-b,#0C0B0A)}
.proof-toggle i{
  position:absolute;top:3px;bottom:3px;left:var(--l,3px);width:var(--w,0px);
  background:var(--ink,#EDE9E1);border-radius:var(--r,2px);
  transition:left .6s var(--ease,cubic-bezier(.22,1,.36,1)),width .6s var(--ease,cubic-bezier(.22,1,.36,1));
}

/* THE FILM. One camera, and it only ever moves forward. Three eases:
   --in starts slow and lands soft, for anything arriving; --out leaves
   fast, for anything dissolving; --pass accelerates through the middle,
   for anything travelling past the lens.
   IN  (cases to websites)  the cards come at the camera and pass it, growing
       and blurring, 0 to .7s; the room arrives from deep: scaled down and
       dark it opens to full size over 1.4s while its panels rise from 1.5
       stage widths back, centre first, the last one starting at .55s.
   OUT (websites to cases)  the room keeps coming. Each panel pushes half a
       stage width toward the camera, rims first, brightening to full as it
       passes the light and dissolving before it reaches the lens, so no
       panel ever goes black and none ends up behind the camera; the room
       swells and is gone by 1s. From .45s, while the last centre panels are
       still passing, the cards arrive from deep, small and soft, and
       sharpen over 1.1s. The overlap is what makes it one move.
   Both films start from a DEEP pose that wall.js parks the arriving view in
   for one frame (data-prime) before it releases the switch; the hidden pose
   each view rests in is the PASSED one. */
.proof{--in:cubic-bezier(.65,0,.15,1);--out:cubic-bezier(.5,0,.75,.2);--pass:cubic-bezier(.7,0,.3,1)}

/* the two headings share one cell and trade places */
.proof-h{display:grid;align-items:end}
.proof-h>h2{grid-area:1/1;transition:opacity .5s var(--in),transform .8s var(--in)}
.proof[data-view="web"] .proof-h>[data-proof-h="seo"]{opacity:0;transform:translateY(-16px);pointer-events:none;transition-timing-function:var(--out)}
.proof[data-view="seo"] .proof-h>[data-proof-h="web"]{opacity:0;transform:translateY(16px);pointer-events:none;transition-timing-function:var(--out)}
.proof[data-view="web"] .proof-h>[data-proof-h="web"]{transition-delay:.35s}
.proof[data-view="seo"] .proof-h>[data-proof-h="seo"]{transition-delay:.55s}
[data-proof-arrows]{transition:opacity .5s var(--in) .6s}
.proof[data-view="web"] [data-proof-arrows]{opacity:0;pointer-events:none;transition-delay:0s}

/* the cards: rest, passed (hidden), deep (the one-frame start) */
[data-proof-cases]{
  transition:opacity 1s var(--in) .45s,transform 1.2s var(--in) .45s,filter 1s var(--in) .45s,visibility 0s .45s;
}
.proof[data-view="web"] [data-proof-cases]{
  opacity:0;transform:scale(1.06) translateY(-12px);filter:blur(14px);pointer-events:none;visibility:hidden;
  transition:opacity .55s var(--out) .1s,transform .75s var(--pass),filter .6s var(--out),visibility 0s .75s;
}
.proof[data-prime="seo"] [data-proof-cases]{
  opacity:0;transform:scale(.94) translateY(28px);filter:blur(14px);visibility:hidden;transition:none;
}

/* the room as a whole: rest, passed, deep */
.proof .wall{transition:transform 1.4s var(--in),opacity 1s var(--in),visibility 0s}
.proof[data-view="seo"] .wall{
  transform:scale(1.1);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform 1.1s var(--pass),opacity .7s var(--out) .3s,visibility 0s 1s;
}
.proof[data-prime="web"] .wall{transform:scale(.88);opacity:0;visibility:hidden;transition:none}

/* the panels. --d is the stagger, written per panel by wall.js from its
   distance to the middle of the stage: centre first on the way in, rims
   first on the way out. --push and --deep are half and one and a half stage
   widths, also from wall.js, so the travel scales with the room. */
.proof .wall-tile{transition:transform 1.4s var(--in) var(--d,0ms)}
.proof .wall-tile img{transition:filter 1.1s var(--in) calc(var(--d,0ms) + .15s),opacity .7s var(--in) var(--d,0ms)}
.proof[data-view="seo"] .wall-tile{
  transform:translate(-50%,-50%) translate3d(var(--tx,0px),var(--ty,0px),calc(var(--tz,0px) + var(--push,700px))) rotateY(var(--ry,0deg));
  transition:transform 1.1s var(--pass) var(--d,0ms);
}
/* full light as it passes, then gone: never a black slab on the ground */
.proof[data-view="seo"] .wall-tile img{
  filter:brightness(1);opacity:0;
  transition:filter .45s var(--out) var(--d,0ms),opacity .55s var(--out) calc(var(--d,0ms) + .25s);
}
.proof[data-prime="web"] .wall-tile{
  transform:translate(-50%,-50%) translate3d(var(--tx,0px),var(--ty,0px),calc(var(--tz,0px) - var(--deep,2200px))) rotateY(var(--ry,0deg));
  transition:none;
}
.proof[data-prime="web"] .wall-tile img{filter:brightness(0);opacity:0;transition:none}
/* once the room has settled, hover answers at its normal speed again */
.proof[data-settled] .wall-tile img{transition:filter .3s var(--ease,cubic-bezier(.22,1,.36,1)) 0s}
@media(prefers-reduced-motion:reduce){
  .proof .wall,.proof .wall-tile,.proof .wall-tile img,.proof-h>h2,[data-proof-cases],[data-proof-arrows],.proof-toggle i{transition-duration:0s;transition-delay:0s}
}