/* THE DISCIPLINE CUBES — shared by the services page and the /lab/cubes bench.
   Every cube AT REST is the homepage block (camera rotateX 58 / rotateZ -45,
   orange lid at z=h, burnt-orange walls, paper hairline insets); each
   discipline tells its story ON INTERACTION (:hover, or .is-active toggled by
   static/js/cubes.js for touch + keyboard).

   GEOMETRY: from this camera the walls FACING the viewer are south and WEST;
   east/north close the box as interior walls. Face recipe: top translated to
   z=h, walls hinged up on their footprint edges. */

.lab-cubes-page, .cube-scene {
  --s: 96px;                  /* cube footprint */
  --h: calc(var(--s) * 0.92); /* block height — same ratio as the homepage model */
  --bar: 4px;                 /* structural member thickness */
  --side1: #b34630;           /* south wall (homepage .hn-face--front) */
  --side2: #93381f;           /* east wall  (homepage .hn-face--right) */
}

/* the card is the focusable control */
.lc-card { cursor: pointer; user-select: none; }
.lc-card:focus-visible { outline: 2px solid var(--light-orange); outline-offset: 3px; }

/* ---- stage + camera ---------------------------------------------------- */
.lc-stage { width: 100%; height: 235px; display: grid; place-items: center; overflow: hidden; }
.lc-iso {
  position: relative; width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  /* leading translate (screen space) centres the projected block in the stage */
  transform: translateY(30px) rotateX(58deg) rotateZ(-45deg);
}
/* setting-out lines on the ground — every block stands on a marked footprint */
.lc-iso::before {
  content: ""; position: absolute; inset: -16%;
  border: 1px dashed rgba(138, 185, 214, 0.3);
  transform: translateZ(-0.5px);
}
.lc-cuboid { position: absolute; inset: 0; transform-style: preserve-3d; }

/* ---- the block: same face recipe + palette as the homepage hn-cube ----- */
.lc-face { position: absolute; box-sizing: border-box; }
.lc-top {
  left: 0; top: 0; width: var(--s); height: var(--s);
  transform: translateZ(var(--h));
  background: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.14);
}
.lc-south {
  left: 0; top: var(--s); width: var(--s); height: var(--h);
  transform-origin: top; transform: rotateX(90deg);
  background: var(--side1);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.08);
}
.lc-west {
  left: 0; top: 0; width: var(--h); height: var(--s);
  transform-origin: left; transform: rotateY(-90deg);
  background: var(--side2);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.08);
}
.lc-east {
  left: var(--s); top: 0; width: var(--h); height: var(--s);
  transform-origin: left; transform: rotateY(-90deg);
  background: var(--side2);
}
.lc-north {
  left: 0; top: 0; width: var(--s); height: var(--h);
  transform-origin: top; transform: rotateX(90deg);
  background: var(--side2);
}

.lc-svg { width: 100%; height: 100%; display: block; }

/* services page: give the figure real width and don't clip the reveals
   (the stamp flies high, the pipe exits the block, the scan glows wide) */
.svc-cube.cube-scene { width: min(100%, 300px); }
.svc-cube.cube-scene .lc-stage { overflow: visible; }

@media (max-width: 620px) {
  .lab-cubes-page, .cube-scene { --s: 84px; }
  .lc-stage { height: 205px; }
}

/* ======================================================================= */
/* STRUCTURAL: shell reveal                                                */
/*   walls turn to glass — inside: columns, lattice trusses on the top     */
/*   edges, X-bracing on both back walls; pad foundations surface below   */
/* ======================================================================= */
.lc-structural .lc-shell { transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.lc-frame { position: absolute; inset: 0; transform-style: preserve-3d; }
.lc-col {
  position: absolute; width: var(--bar); height: var(--h); background: var(--orange);
  transform-origin: top; transform: rotateX(90deg) scaleY(0);
  transition: filter .5s var(--ease), transform .5s var(--ease);
}
/* top edge trusses: one plane per edge — the two borders are the chords,
   crossed 45° gradients are the lattice webs */
.lc-trussx, .lc-trussy {
  position: absolute; box-sizing: border-box; opacity: 0;
  background-image:
    repeating-linear-gradient(45deg,  var(--orange) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(-45deg, var(--orange) 0 1.5px, transparent 1.5px 8px);
  transition: filter .5s var(--ease), opacity .4s var(--ease);
}
.lc-trussx {
  left: 0; width: var(--s); height: 14px;
  border-top: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange);
  transform-origin: top;
  transform: translateZ(calc(var(--h) - 14px)) rotateX(90deg);
}
.lc-trussy {
  top: 0; width: 14px; height: var(--s);
  border-left: 2.5px solid var(--orange); border-right: 2.5px solid var(--orange);
  transform-origin: left;
  transform: translateZ(calc(var(--h) - 14px)) rotateY(-90deg);
}
/* back-wall X-bracing: .lc-bracer in an x = const plane, .lc-bracerx in y = const */
.lc-bracer, .lc-bracerx {
  position: absolute; width: calc(var(--s) * 1.359); height: 2.5px;
  background: var(--orange);
  transform-origin: 0 0;
  transition: filter .5s var(--ease), transform .45s var(--ease);
}
.lc-bracer  { transform: rotateY(-90deg) rotate(var(--a)) scaleX(0); }
.lc-bracerx { transform: rotateX(90deg) rotate(var(--a)) scaleX(0); }
/* foundations: cuboid concrete pads below ground — top face + two sides */
.lc-pad {
  position: absolute; width: 24px; height: 24px;
  transform: translateZ(-4px); transform-style: preserve-3d;
  background: #55677f; box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.18);
  opacity: 0; transition: opacity .45s var(--ease);
}
.lc-pad::before {   /* south side */
  content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 8px;
  transform-origin: top; transform: rotateX(-90deg);
  background: #3d4c61;
}
.lc-pad::after {    /* west side */
  content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 100%;
  transform-origin: left; transform: rotateY(90deg);
  background: #354357;
}
.lc-structural:is(:hover, .is-active) .lc-top {
  background: rgba(235, 93, 64, 0.10);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.4);
}
.lc-structural:is(:hover, .is-active) :is(.lc-south, .lc-east, .lc-west, .lc-north) {
  background: rgba(90, 112, 134, 0.08);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.25);
}
.lc-structural:is(:hover, .is-active) :is(.lc-col, .lc-trussx, .lc-trussy, .lc-bracer, .lc-bracerx) {
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(235, 93, 64, 0.6));
}
/* erection sequence, bottom up: the shell dissolves (.5s), then foundations,
   then the columns rise off the pads, then the roof trusses, then the
   bracing draws in. Delays live only in these rules, so letting go
   reverses everything instantly. */
.lc-structural:is(:hover, .is-active) .lc-pad { opacity: 1; transition-delay: .55s; }
.lc-structural:is(:hover, .is-active) .lc-col {
  transform: rotateX(90deg) scaleY(1); transition-delay: 0s, 1s; }
.lc-structural:is(:hover, .is-active) :is(.lc-trussx, .lc-trussy) {
  opacity: 1; transition-delay: 0s, 1.55s; }
.lc-structural:is(:hover, .is-active) .lc-bracer {
  transform: rotateY(-90deg) rotate(var(--a)) scaleX(1); transition-delay: 0s, 2s; }
.lc-structural:is(:hover, .is-active) .lc-bracerx {
  transform: rotateX(90deg) rotate(var(--a)) scaleX(1); transition-delay: 0s, 2s; }

/* ======================================================================= */
/* CIVIL: road over drainage                                               */
/*   the ground opens — existing ground first, then the pipe (circular,    */
/*   exiting the block), the manhole shaft, and the road built over it     */
/*   layer by layer; the cover lands flush in the finished surface         */
/* ======================================================================= */
.cv-layers .rl-shell { transition: opacity .4s var(--ease); }
.cv-layers:is(:hover, .is-active) .rl-shell { opacity: 0; }
/* everything drops in with its own delay (--dl) */
.rl-pipe, .rl-shaft, .rl-slab, .rl-cover {
  opacity: 0; transform: translateZ(18px);
  transition: opacity .35s var(--ease) var(--dl, 0s), transform .45s var(--ease) var(--dl, 0s);
}
.cv-layers:is(:hover, .is-active) :is(.rl-pipe, .rl-shaft, .rl-slab, .rl-cover) {
  opacity: 1; transform: translateZ(0);
}
/* the pipe: a round barrel — a half-octagon of tangent facets around the
   axis (y at x=32, z=17), shaded for curvature — laid in the open on the
   ground bed, then buried; the round end stays proud of the south face */
.rl-pipe {
  --dl: .85s;
  position: absolute; left: 32px; top: 0; width: 0; height: calc(100% + 10px);
  transform-style: preserve-3d;
}
.rl-pipe i, .rl-shaft i, .rl-slab i { position: absolute; display: block; }
.pf {
  left: -3.4px; top: 0; width: 6.8px; height: 100%;
  transform-origin: center;
  transform: translateZ(17px) rotateY(var(--pa)) translateZ(8px);
}
.pf:nth-of-type(1), .pf:nth-of-type(5) { background: #57646f; }   /* sides  */
.pf:nth-of-type(2), .pf:nth-of-type(4) { background: #6f7d8c; }   /* haunch */
.pf:nth-of-type(3)                     { background: #8b98a6; }   /* crown  */
.pp-end {
  left: -8px; top: 100%; width: 16px; height: 16px; border-radius: 50%;
  transform-origin: top; transform: translateY(0.75px) translateZ(9px) rotateX(90deg);
  background: #0d1826; border: 2.5px solid var(--orange); box-sizing: border-box;
}
/* the manhole: a circular shaft (octagonal prism) sitting ON the pipe run —
   the barrel enters and leaves the chamber — rising to a circular rim */
.rl-shaft {
  --dl: 1.05s;
  position: absolute; left: 32px; top: 48px; width: 0; height: 0;
  transform-style: preserve-3d;
}
.sh-f {
  left: -4.2px; top: 0; width: 8.4px; height: 86px;
  transform-origin: top;
  transform: rotate(var(--r)) translateY(10px) rotateX(90deg);
  background: #1a2d42; box-shadow: inset 0 0 0 0.5px rgba(250, 249, 247, 0.18);
}
.sh-top {
  left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  transform: translateZ(86px);
  background: #1a2d42; box-shadow: inset 0 0 0 1.5px rgba(250, 249, 247, 0.4);
}
/* the slabs: full-footprint 3D layers, each with top + two cut faces */
.rl-slab { position: absolute; inset: 0; transform-style: preserve-3d; }
.sl-top { inset: 0; transform: translateZ(var(--zt)); }
.sl-s {
  left: 0; top: var(--s); width: 100%; height: calc(var(--zt) - var(--zb));
  transform-origin: top; transform: translateZ(var(--zb)) rotateX(90deg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}
.sl-w {
  left: 0; top: 0; width: calc(var(--zt) - var(--zb)); height: 100%;
  transform-origin: left; transform: translateZ(var(--zb)) rotateY(-90deg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
}
.rl-s1 i { background-color: #6b4f3a; }                     /* existing ground */
.rl-s2 i { background-color: #a97e4f; }                     /* sub-base */
.rl-s2 .sl-s, .rl-s2 .sl-w {
  background-image:
    repeating-linear-gradient(45deg, rgba(250, 249, 247, 0.3) 0 1.5px, transparent 1.5px 9px),
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}
.rl-s3 i { background-color: #5c5f66; }                     /* base   */
.rl-s4 i { background-color: #3c3f47; }                     /* binder */
.rl-s5 i { background-color: #23262d; }                     /* surface */
.rl-s5 .sl-top {                                            /* centre-line */
  background-image: repeating-linear-gradient(0deg, var(--paper) 0 7px, transparent 7px 16px);
  background-size: 3px 100%; background-position: center top; background-repeat: no-repeat;
}
/* the circular cover lands flush over the shaft, last */
.rl-cover {
  --dl: 2.8s;
  position: absolute; left: 22px; top: 38px; width: 20px; height: 20px;
  border-radius: 50%;
  background: #243a55;
  background-image:
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.35) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(250, 249, 247, 0.35) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 0 2px rgba(250, 249, 247, 0.75);
  transform: translateZ(106px);                             /* drops onto the road */
}
.cv-layers:is(:hover, .is-active) .rl-cover { transform: translateZ(88.6px); }

/* ======================================================================= */
/* DESIGN & PLANNING: the city                                             */
/*   the block drops in areas — a 3×3 grid of tiles collapses to mixed     */
/*   heights and open space; trees emerge from the open ground             */
/* ======================================================================= */
.lc-city { position: absolute; inset: 0; transform-style: preserve-3d; }
.ct-tile {
  position: absolute; width: 33.34%; height: 33.34%;
  transform-style: preserve-3d;
}
.ct-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: scaleZ(1);
  transition: transform .65s var(--ease) var(--d, 0s);
}
.ct-top {
  position: absolute; inset: 0; background: var(--orange);
  box-shadow: inset 0 0 0 0.5px rgba(250, 249, 247, 0.12);
  transform: translateZ(var(--h));
}
.ct-s {
  position: absolute; left: 0; top: 100%; width: 100%; height: var(--h);
  transform-origin: top; transform: rotateX(90deg); background: var(--side1);
}
.ct-w {
  position: absolute; left: 0; top: 0; width: var(--h); height: 100%;
  transform-origin: left; transform: rotateY(-90deg); background: var(--side2);
}
.lc-design:is(:hover, .is-active) .ct-inner { transform: scaleZ(var(--tz)); }
/* dusk: windows come on across the scheme once it settles — a lit grid on
   both visible faces of every building, staggered per tile via --wd */
/* floor height is constant in WORLD space: the face is compressed by
   scaleZ(--tz), so the row pattern is divided by --tz to compensate —
   a half-height building gets half the rows, not squashed ones */
.ct-lit .ct-s::after {
  content: ""; position: absolute; inset: 6px 18% 10px;
  background: repeating-linear-gradient(90deg,
    rgba(250, 249, 247, 0.85) 0 3px, transparent 3px 9px);
  -webkit-mask-image: repeating-linear-gradient(0deg,
    #000 0 calc(4px / var(--tz, 1)), transparent calc(4px / var(--tz, 1)) calc(10px / var(--tz, 1)));
  mask-image: repeating-linear-gradient(0deg,
    #000 0 calc(4px / var(--tz, 1)), transparent calc(4px / var(--tz, 1)) calc(10px / var(--tz, 1)));
  opacity: 0; transition: opacity .5s var(--ease) var(--wd, 1.15s);
}
.ct-lit .ct-w::after {
  /* this face's width runs up the z axis: floors mask across, columns along y */
  content: ""; position: absolute; inset: 14% 10px 12% 6px;
  background: repeating-linear-gradient(0deg,
    rgba(250, 249, 247, 0.72) 0 3px, transparent 3px 9px);
  -webkit-mask-image: repeating-linear-gradient(90deg,
    #000 0 calc(4px / var(--tz, 1)), transparent calc(4px / var(--tz, 1)) calc(10px / var(--tz, 1)));
  mask-image: repeating-linear-gradient(90deg,
    #000 0 calc(4px / var(--tz, 1)), transparent calc(4px / var(--tz, 1)) calc(10px / var(--tz, 1)));
  opacity: 0; transition: opacity .5s var(--ease) calc(var(--wd, 1.15s) + 0.12s);
}
.lc-design:is(:hover, .is-active) .ct-lit :is(.ct-s, .ct-w)::after { opacity: 1; }

/* ======================================================================= */
/* CERTIFICATION: the stack                                                */
/*   the block decomposes into its own paperwork — full-size orange pages, */
/*   each flashing its content before the next lands, back to the block's  */
/*   full height; a pen signs the top sheet                                */
/* ======================================================================= */
.lc-cert .pw-shell { transition: opacity .4s var(--ease); }
.lc-cert:is(:hover, .is-active) .pw-shell { opacity: 0; }
/* each page is a full-footprint slab slapping down from above */
.pw-sheet {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(22px); opacity: 0;
  transition: transform .28s var(--ease) var(--dl), opacity .18s var(--ease) var(--dl);
}
.lc-cert:is(:hover, .is-active) .pw-sheet { transform: translateZ(0); opacity: 1; }
.pw-sheet i { position: absolute; display: block; }
.pw-sheet .sl-top {
  inset: 0; transform: translateZ(var(--zt));
  background-color: var(--orange);
  box-shadow: inset 0 0 0 0.75px rgba(250, 249, 247, 0.2);
  background-repeat: no-repeat;
}
.pw-sheet .sl-s {
  left: 0; top: 100%; width: 100%; height: calc(var(--zt) - var(--zb));
  transform-origin: top; transform: translateZ(var(--zb)) rotateX(90deg);
  background: var(--side1); box-shadow: inset 0 0.75px 0 rgba(250, 249, 247, 0.28);
}
.pw-sheet .sl-w {
  left: 0; top: 0; width: calc(var(--zt) - var(--zb)); height: 100%;
  transform-origin: left; transform: translateZ(var(--zb)) rotateY(-90deg);
  background: var(--side2); box-shadow: inset 0.75px 0 0 rgba(250, 249, 247, 0.22);
}
/* page contents — writing, checklists, tables; a lot of random */
.pw-v1 .sl-top {   /* text document: header bar + ragged paragraph lines */
  background-image:
    linear-gradient(rgba(250, 249, 247, 0.8) 0 5px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.55) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.45) 0 2px, transparent 2px 8px);
  background-size: 44% 100%, 74% 40%, 56% 26%;
  background-position: 12% 10px, 13% 26px, 13% 74%;
}
.pw-v2 .sl-top {   /* checklist: box column + entry lines */
  background-image:
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.85) 0 6px, transparent 6px 15px),
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.5) 0 2.5px, transparent 2.5px 15px);
  background-size: 6px 68%, 52% 66%;
  background-position: 14px 16px, 28px 18px;
}
.pw-v3 .sl-top {   /* table: fine grid + title band */
  background-image:
    linear-gradient(rgba(250, 249, 247, 0.7) 0 4px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.35) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(250, 249, 247, 0.35) 0 1px, transparent 1px 17px);
  background-size: 70% 100%, 70% 62%, 70% 62%;
  background-position: 15% 12px, 15% 26px, 15% 26px;
}
.pw-v4 .sl-top {   /* mixed: two paragraph blocks + a stamp mark */
  background-image:
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.5) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.5) 0 2px, transparent 2px 7px),
    linear-gradient(rgba(250, 249, 247, 0.75), rgba(250, 249, 247, 0.75));
  background-size: 60% 22%, 42% 18%, 10px 10px;
  background-position: 14% 14px, 14% 52%, 82% 78%;
}
/* the signing page: light heading lines; the signature rule is in its svg */
.pw-sign .sl-top {
  background-image:
    repeating-linear-gradient(0deg, rgba(250, 249, 247, 0.55) 0 2px, transparent 2px 9px);
  background-size: 62% 26%;
  background-position: 15% 12px;
}
.pw-sig {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translateZ(calc(var(--zt) + 0.5px));
}
/* the signature draws while the pen rides the same path */
.lc-cert:is(:hover, .is-active) .pw-scrawl { animation: pw-signing 1.1s linear forwards 2.1s; }
@keyframes pw-signing { to { stroke-dashoffset: 0; } }
.pw-pen { opacity: 0; offset-path: path("M18 72 c3 -9 8 -7 6 1 c-2 8 6 5 11 -3 c4 -7 9 -5 7 1 c-3 9 7 7 13 3 c5 -3 10 -6 16 -3"); offset-rotate: 0deg; }
.lc-cert:is(:hover, .is-active) .pw-pen { animation: pw-write 1.1s linear forwards 2.1s; }
@keyframes pw-write {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  94% { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ======================================================================= */
/* ASSESSMENTS: the scan                                                   */
/*   a survey plane sweeps the block; behind it the block reads as an      */
/*   x-ray wireframe with the defect found inside                          */
/* ======================================================================= */
.lc-assess .lc-solid .lc-face { transition: opacity .4s var(--ease) .45s; }
.lc-assess .lc-wire .lc-face {
  background: transparent; box-shadow: none;
  border: 1.5px solid var(--light-blue);
  opacity: 0; transition: opacity .4s var(--ease) .45s;
}
/* the ope-reveal faces sit on the viewer-facing wire planes; a whisper of
   glass fill anchors each plane so the linework reads in perspective */
.lc-openface {
  border: none !important;
  background: rgba(138, 185, 214, 0.05) !important;
}
.lc-openface--s {
  left: 0; top: var(--s); width: var(--s); height: var(--h);
  transform-origin: top; transform: translateY(0.4px) rotateX(90deg);
}
.lc-openface--w {
  left: 0; top: 0; width: var(--h); height: var(--s);
  transform-origin: left; transform: translateX(-0.4px) rotateY(-90deg);
}
/* the survey plane matches the building's own profile */
.lc-scan {
  position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--h) * 1.05);
  transform-origin: top; opacity: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(138, 185, 214, 0), rgba(138, 185, 214, 0.55) 55%, rgba(138, 185, 214, 0.15));
  box-shadow: 0 0 20px 5px rgba(138, 185, 214, 0.55);
}
.lc-assess:is(:hover, .is-active) .lc-solid .lc-face { opacity: 0; }
.lc-assess:is(:hover, .is-active) .lc-wire .lc-face  { opacity: 1; }
.lc-assess:is(:hover, .is-active) .lc-scan { animation: scan-sweep 1.2s var(--ease) forwards; }
@keyframes scan-sweep {
  0%   { transform: translateY(calc(var(--s) * -0.25)) rotateX(90deg); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(var(--s)) rotateX(90deg); opacity: 0; }
}

/* ======================================================================= */
/* reduced motion: no transitions/animations — snap to the revealed state  */
/* ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .lc-card *, .lc-card *::before, .lc-card *::after { transition: none !important; animation: none !important; }
  /* civil: everything placed, cover flush */
  .cv-layers:is(:hover, .is-active) .rl-shell { opacity: 0; }
  .cv-layers:is(:hover, .is-active) :is(.rl-pipe, .rl-shaft, .rl-slab) { opacity: 1; transform: translateZ(0); }
  .cv-layers:is(:hover, .is-active) .rl-cover { opacity: 1; transform: translateZ(88.6px); }
  /* design: the collapsed, lit city is the end state */
  .lc-design:is(:hover, .is-active) .ct-inner { transform: scaleZ(var(--tz)); }
  .lc-design:is(:hover, .is-active) .ct-lit :is(.ct-s, .ct-w)::after { opacity: 1; }
  /* cert: the stack stands, signed (pen never appears) */
  .lc-cert:is(:hover, .is-active) .pw-shell { opacity: 0; }
  .lc-cert:is(:hover, .is-active) .pw-sheet { transform: translateZ(0); opacity: 1; }
  .lc-cert:is(:hover, .is-active) .pw-scrawl { stroke-dashoffset: 0; }
  /* assessments: wireframe held, opes + cracks shown */
  .lc-assess:is(:hover, .is-active) .lc-solid .lc-face { opacity: 0; }
  .lc-assess:is(:hover, .is-active) .lc-wire .lc-face  { opacity: 1; }
}