/* Giant Entity: the drawing system's states and gestures (look-v3 sections 8, 9 and 11), Part B.
   src/interlock.mjs and src/templates/drawings.mjs draw; this file owns every state and every move;
   assets/js/drawings.js only sets data-state, data-stage and classes. Three gestures, one per
   pillar: Brand and websites fills, Workflow and automation runs, 3D and games rises. Transform,
   opacity and clip-path only. Without JavaScript, or with reduced motion, every drawing shows its
   finished composition. */

/* ---------- The cut's numbers, per piece (src/data/interlock.json) ----------
   --h is the height in cells, which a rise travels; --ex and --ey the half-cell step away from the
   body's centre that the exploded drawing takes. */
[data-piece="a"] { --h: 1.8; --ex: -0.39; --ey: -0.32; }
[data-piece="b"] { --h: 2.2; --ex: -0.33; --ey: -0.37; }
[data-piece="c"] { --h: 0.5; --ex: -0.47; --ey: 0.16; }
[data-piece="d"] { --h: 1.4; --ex: -0.5; --ey: -0.04; }
[data-piece="e"] { --h: 1.4; --ex: 0.24; --ey: -0.44; }
[data-piece="f"] { --h: 1.2; --ex: 0.5; --ey: 0.02; }
[data-piece="g"] { --h: 1.6; --ex: 0.47; --ey: -0.18; }
[data-piece="h"] { --h: 0.8; --ex: 0.5; --ey: 0.03; }
[data-piece="i"] { --h: 0.9; --ex: -0.46; --ey: 0.2; }
[data-piece="j"] { --h: 1.1; --ex: -0.21; --ey: 0.46; }
[data-piece="k"] { --h: 0.7; --ex: 0.35; --ey: 0.36; }
[data-piece="l"] { --h: 1.5; --ex: 0.45; --ey: 0.22; }
[data-piece="m"] { --h: 0.6; --ex: 0.24; --ey: 0.44; }

/* the order a stepped arrival or a route walks in */
[data-k="1"] { --k: 1; } [data-k="2"] { --k: 2; } [data-k="3"] { --k: 3; } [data-k="4"] { --k: 4; }
[data-k="5"] { --k: 5; } [data-k="6"] { --k: 6; } [data-k="7"] { --k: 7; } [data-k="8"] { --k: 8; }
[data-k="9"] { --k: 9; } [data-k="10"] { --k: 10; } [data-k="11"] { --k: 11; }

.dw, .rc { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Body drawings: states ---------- */

.dw .pc__top,
.dw .fc { transition: opacity 140ms var(--ease-out), fill var(--dur-hover) var(--ease-out); }
.dw .pc__plan { transition: opacity 140ms var(--ease-out); }
.dw .body__lattice,
.dw .body__shadow { transition: opacity 320ms var(--ease-out); }
.dw .pc,
.dw .fc,
.dw .pc__plan { transition-property: opacity, fill, transform; transition-duration: 140ms, var(--dur-hover), 480ms; transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-in-out); }

/* lifted: the whole piece rises 0.4 cells along the projection, leaving its shadow on the ground */
.dw [data-state="lifted"]:not(.pc__plan) { transform: translate(-0.136px, -0.08px); }
/* the hatched top of a piece that is kept */
.pc__hatch { fill: none; stroke: var(--m-right); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.pc[data-state="plan"] .pc__hatch { opacity: 0; }

/* exploded: every piece half a cell off its seat; seating closes the gaps (480 ms) */
.dw.is-exploded [data-piece] { transform: translate(calc(var(--ex) * 1px), calc(var(--ey) * 1px)); }
.dw--handoffs .pc__plan { stroke-dasharray: 5 4; }
.dw--handoffs .body__plan { opacity: 1; }

/* ---------- Body drawings: the three gestures ----------
   drawings.js marks a piece data-go while it changes from plan to built; the gesture is its
   pillar's. A sweeping drawing (its entrance) staggers pieces by their footprint's order. */
@media (prefers-reduced-motion: no-preference) {
  .dw .pc[data-go].m-ultra { animation: dw-fill 420ms steps(4, jump-none) both; }
  .dw .pc[data-go].m-rose { animation: dw-run 480ms steps(6, jump-none) both; }
  .dw .pc[data-go].m-citron { animation: dw-rise 500ms var(--ease-out) both; }
  /* the side faces come in under the top, whatever the gesture; under a rise they grow from the
     footprint with the top, on its clock, so no ground ever shows between a rising top and its seat
     (a cut of a face parallel to its footprint edge is the face at that height) */
  .dw .fc[data-go] { animation: dw-faces 360ms var(--ease-out) both; }
  .dw .fc--b[data-go].m-citron { animation: dw-grow-b 500ms var(--ease-out) both; }
  .dw .fc--r[data-go].m-citron { animation: dw-grow-r 500ms var(--ease-out) both; }
  .dw.is-sweep [data-go] { animation-delay: calc(var(--o, 0) * 70ms); }
}
@keyframes dw-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dw-run { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dw-rise {
  from { transform: translate(calc(var(--h) * 0.34px), calc(var(--h) * 0.2px)); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
@keyframes dw-faces { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-grow-b { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dw-grow-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Recipes (section 11.3) ---------- */

.rc__lattice { fill: none; stroke: var(--fg); stroke-opacity: 0.18; stroke-width: 0.12; stroke-linecap: round; stroke-dasharray: 0 1; transition: opacity 480ms var(--ease-out); }
.rc__plan { fill: none; stroke: color-mix(in srgb, var(--fg) 55%, var(--ground)); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rc__shadow { fill: var(--surface); }
.rc__context { fill: none; stroke: var(--m-right); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rc__joint { fill: none; stroke: var(--porcelain); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rc__section { fill: none; stroke: var(--fg); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.rc__frame { fill: none; stroke: color-mix(in srgb, var(--fg) 55%, var(--ground)); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rc__slice { fill: none; stroke: var(--m-bottom); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rc__hole { fill: var(--ground); stroke: var(--m-bottom); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* a route runs on a quiet bed of its piece: solid cubes run themselves, outlined cells are a person's */
.rc__bed .pc__top { fill: color-mix(in srgb, var(--m-top) 34%, var(--ground)); }
.rc__bed .fc--r { fill: color-mix(in srgb, var(--m-right) 50%, var(--ground)); }
.rc__bed .fc--b { fill: color-mix(in srgb, var(--m-bottom) 50%, var(--ground)); }
.rc__hand { fill: var(--ground); stroke: var(--m-bottom); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rc__line { fill: none; stroke: var(--m-bottom); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rc__line--hand { stroke-dasharray: 4 4; }
/* one model, three lights: the faces trade tones as the light moves round */
.rc__lit--1 .fc--r { fill: var(--m-bottom); }
.rc__lit--1 .fc--b { fill: var(--m-right); }
.rc__lit--2 .pc__top { fill: color-mix(in srgb, var(--m-top) 70%, var(--m-right)); }
.rc__lit--2 .fc--r,
.rc__lit--2 .fc--b { fill: var(--m-bottom); }

/* staged: drawings.js sets data-stage and marks the steps reached; without it every step shows */
.rc[data-stage] .rc__step:not(.is-on) > :not(.rc__plan):not(.rc__frame) { opacity: 0; }
.rc[data-stage] .rc__step > * { transition: opacity 200ms var(--ease-out); }
.rc[data-stage]:not(.is-done) .rc__lattice { opacity: 1; }
.rc.is-done .rc__lattice { opacity: 0; }
.rc__lines { transition: opacity 320ms var(--ease-out); }
.rc[data-stage="0"] .rc__lines { opacity: 0.35; }
/* the audit's far side sits off its seat until the last step closes it */
.rc__far { transition: transform var(--dur-seat) var(--ease-out); }
.rc--cut[data-stage]:not(:has([data-i="3"].is-on)) .rc__far { transform: translate(0.5px, 0.3px); }

@media (prefers-reduced-motion: no-preference) {
  .rc.is-live.rc--fill .rc__step.is-on > .rc__solid { animation: dw-fill 420ms steps(4, jump-none) both; }
  .rc.is-live.rc--run .rc__step.is-on > [data-k] { animation: dw-cell 240ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 40ms); }
  .rc.is-live.rc--rise .rc__step.is-on .rc__rise > .pc__top { animation: rc-rise 500ms var(--ease-out) both; }
  .rc.is-live.rc--rise .rc__step.is-on .rc__rise > .fc { animation: dw-faces 500ms var(--ease-out) both; }
}
@keyframes dw-cell { from { opacity: 0; transform: translate(-0.12px, -0.08px); } to { opacity: 1; transform: none; } }
@keyframes rc-rise { from { transform: translate(0.68px, 0.4px); } to { transform: none; } }

/* ---------- Glyphs that perform: cards, accordions ---------- */

.glyph { transition: opacity var(--dur-hover) var(--ease-out); }
/* closed, the glyph is the piece in plan: the plan line's ink, as in every drawing, never the material */
.qa .glyph__fill { fill: transparent; stroke: color-mix(in srgb, var(--fg) 55%, var(--ground)); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill 240ms var(--ease-out); }
.qa[open] .glyph__fill { fill: var(--m-top); stroke: transparent; }

@media (forced-colors: active) {
  .rc__shadow, .rc__lattice, .rc .fc, .rc__bed { display: none; }
  .rc .pc__top, .rc__hand { fill: Canvas; stroke: CanvasText; }
  .rc__plan, .rc__line, .rc__slice, .rc__frame, .rc__context, .rc__section, .rc__joint { stroke: CanvasText; }
  .pc__hatch { stroke: CanvasText; }
}

/* the seam between two pieces closing step by step (how we work): drawings.js sets --seat from 1 to 0 */
.dw--seam [data-piece="g"] { transform: translate(calc(var(--seat, 0) * 0.6px), calc(var(--seat, 0) * -0.25px)); transition: transform var(--dur-seat) var(--ease-out); }

/* ---------- Slots for drawings fetched after the page ----------
   Each slot keeps its height before its drawing arrives, so nothing moves; without a script the
   slot is not shown at all. */
html:not(.js) .dslot { display: none; }
.dslot { display: flex; align-items: flex-end; }
.dslot > .dw { height: 100%; width: auto; max-width: 100%; margin: 0; }
.dslot--pillar { height: clamp(9rem, 5rem + 10vw, 28rem); justify-content: flex-end; }
.dslot--sector { height: clamp(5rem, 3.5rem + 4vw, 11rem); }
.dslot--twice { height: clamp(8rem, 5rem + 8vw, 22rem); justify-content: center; }
.dslot--people { height: clamp(4.5rem, 3rem + 3vw, 9rem); }
.dslot--menu { height: 7rem; margin-bottom: var(--sp-xs); }
.dslot--assembly { height: 7rem; }
@media (max-width: 1099px) {
  .dslot--pillar { justify-content: flex-start; }
  .site-nav .dslot { display: none; }
}

/* the shelves' drawings: plan outlines that fill per link under the hand */
.site-nav__columns--sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-nav__how { display: flex; align-items: flex-end; gap: var(--sp-l); }
.site-nav__how .site-nav__links { flex: 1; }
/* the kept piece is hatched only once the assembly is seated */
[data-assembly]:not([data-stage="4"]) .pc__hatch { opacity: 0; }