/* ============================================================================
MOKI - fx-surfaces.css (W2-T2)
Owns: the SURFACE property family only. Radius application, plate/card
surface treatments, hairline rules, the ledger-paper repeating-linear-
gradient texture (introduced on Exhibit 04, echoed in #archive's ledger
card and #receipts, per SITE-BUILD-SPEC §5.4/§5.10/§5.11), and the
perforation/notch decoration.
Property family in this file: background*, border*, border-radius,
box-shadow, static clip-path, plus the minimal padding a plate needs for
its inset to read as a plate. NOTHING here animates: zero `transition`,
zero `animation`, zero `@keyframes` - every animated property on the site
lives in fx-motion.css, which is what keeps the §11 grep-audit meaningful.
Static clip-path discipline: fx-motion.css animates clip-path for the
print-wipe (.reveal[data-reveal="wipe"], .curtain__stamp, .stand__stamp)
and the plate-turn hairline. So this file applies clip-path notches ONLY
to elements outside every reveal family (.kit__bench, .toy) - a static
clip on a wiped element would fight the reveal and lose.
Deleting this file's must leave the page fully usable, only less
finished (W2 acceptance) - everything below is refinement, never load-
bearing layout.
========================================================================= */
/* ----------------------------------------------------------------------------
1. THE LEDGER-PAPER TEXTURE - defined once, consumed three times.
A ruled-paper texture: one hairline every --ledger-gap. Consumers override
--ledger-ink (and ground) per register; the formula never varies, so the
site has exactly one "paper" texture, introduced in #stand's Exhibit 04
and echoed later (§5.4), never invented twice.
--------------------------------------------------------------------------- */
:root {
--ledger-gap: 2rem; /* = --space-6; a calm ruling pitch, deliberately NOT
matched to any line-height - this is texture on a
plate, not ruling to write on */
--ledger-ink: color-mix(in srgb, var(--moki-rule) 45%, transparent);
--surface-ledger: repeating-linear-gradient(
to bottom,
transparent 0 calc(var(--ledger-gap) - 1px),
var(--ledger-ink) calc(var(--ledger-gap) - 1px) var(--ledger-gap)
);
}
/* Consumer 1: Exhibit 04's far-plane backdrop, dark register (§5.4).
Ground and ink swap to the void tokens; the formula stays identical. */
.stand__plane--far[data-exhibit="4"] {
--ledger-ink: var(--moki-line-void);
background-color: var(--moki-void-raised);
background-image: var(--surface-ledger);
}
/* Consumer 2: the archive's ledger card (§5.10) - full treatment: ruling,
a punched-hole perforation strip down the left edge (dots of --moki-paper,
reading as holes showing the page beneath), and a single vertical margin
line, the classic ledger red, muted into the ground so it stays texture
(--moki-ember is capped at two uses per screen; the lead card's top rule
below is the other one). Layer order: first listed paints on top. */
.archive__card--ledger {
--margin-x: 2.75rem;
background-color: var(--moki-blaze);
background-image:
radial-gradient(circle, var(--moki-paper) 3px, transparent 3.5px),
linear-gradient(
to right,
transparent var(--margin-x),
color-mix(in srgb, var(--moki-ember) 40%, var(--moki-blaze)) var(--margin-x)
calc(var(--margin-x) + 1px),
transparent calc(var(--margin-x) + 1px)
),
var(--surface-ledger);
background-size: 24px 24px, auto, auto;
background-position: 10px 12px, 0 0, 0 0;
background-repeat: repeat-y, no-repeat, repeat;
/* prose clears the margin line: line sits at 2.75rem, text starts past it */
padding-inline-start: calc(var(--margin-x) + 1rem);
}
/* Consumer 3: #receipts (§5.11). Fainter ink than the archive card - the
REAL rules here are the row hairlines styles.css already draws, so the
ruling must read as paper grain behind them, never compete. */
.receipts__list {
--ledger-ink: color-mix(in srgb, var(--moki-rule) 28%, transparent);
background-image: var(--surface-ledger);
}
/* ----------------------------------------------------------------------------
2. STANDING FRAME BACKDROP WASHES - §5.4's exact sequence, keyed off the
data-exhibit attribute JS flips: dusk warm-charcoal, perimeter cooler-
grey, night void, ledger (above), dawn lifting to paper at low opacity
over the void. Attribute-keyed backgrounds are static surface state; the
crossfade between exhibits, if any, is fx-motion's business. Accent mixes
at these percentages are washes, not accent usage - the ember/witness
adjacency rule governs marks at component scale, not backdrop tinting,
and no two of these are ever on screen at once.
--------------------------------------------------------------------------- */
.stand__plane--far[data-exhibit="1"] {
background-color: color-mix(in srgb, var(--moki-void) 82%, var(--moki-ember));
}
.stand__plane--far[data-exhibit="2"] {
background-color: color-mix(in srgb, var(--moki-void) 84%, var(--moki-witness));
}
.stand__plane--far[data-exhibit="3"] {
background-color: var(--moki-void); /* deepest point of the arc: flat void */
}
.stand__plane--far[data-exhibit="5"] {
background-image: linear-gradient(
to top,
transparent 45%,
color-mix(in srgb, var(--moki-paper) 26%, transparent)
);
}
/* Near plane: the §5.4 radial vignette, CSS only. Its parallax transform is
fx-motion's; only the paint lives here. */
.stand__plane--near {
background-image: radial-gradient(
ellipse at center,
transparent 55%,
color-mix(in srgb, var(--moki-void) 65%, transparent) 100%
);
}
/* ----------------------------------------------------------------------------
3. PLATES AND CARDS
One radius scale sitewide (§2): lg for the big photo plates, md for cards
and the canvas, sm for controls and chips, full for the meter. The mono
stamps (.curtain__stamp, .stand__stamp) stay square on purpose - a rubber
stamp plate has corners - and they are print-wiped by fx-motion, so they
get no clip-path notch either.
--------------------------------------------------------------------------- */
/* Archive cards: radius + a dealt-stack shadow that deepens with --i (set
inline by W1-T1). Later cards land on top of earlier ones, so a higher
index throws a longer shadow. Static per-index values - the fan/recede
motion on the same --i is fx-motion's. */
.archive__card {
border-radius: var(--radius-md);
box-shadow:
0 calc(6px + var(--i, 0) * 4px)
calc(18px + var(--i, 0) * 10px)
calc(-8px - var(--i, 0) * 2px)
rgba(21, 19, 15, 0.28); /* --moki-ink at low alpha */
}
/* The lead card's differentiator accent (§5.10 markup note): one ember rule,
top edge only. This plus the ledger margin line above are the two ember
uses in #archive - at the §2 cap, add no third. */
.archive__card--lead {
border-top: 3px solid var(--moki-ember);
}
/* Card labels: a hairline under each figcaption so every card opens like a
tab in the file. */
.archive__label {
padding-block-end: var(--space-2);
border-block-end: 1px solid var(--moki-rule);
margin-block-end: var(--space-4);
}
/* The witness crop rides over the copy column's edge (§5.5), so it needs to
read as a physical plate: blaze ground behind the transparent cutout,
hairline, lifted shadow. The plate-turn animates this img's opacity and
scale (fx-motion) - border and shadow ride along untouched. */
.witness__crop img {
background-color: var(--moki-blaze);
border: 1px solid var(--moki-rule);
border-radius: var(--radius-md);
box-shadow: 0 24px 48px -32px rgba(21, 19, 15, 0.35);
}
/* Field Kit bench and the toy plate: blaze plates with a clipped file-folder
notch, top-right corner. Static clip-path is safe here and only here -
neither element carries a reveal class (see header note). The notch costs
them outer shadows (clip-path clips shadows), which is fine: these plates
sit flush on the page, they are not dealt cards. */
.kit__bench,
.toy {
background-color: var(--moki-blaze);
border: 1px solid var(--moki-rule);
padding: var(--space-6);
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
/* The preview canvas (and its crossfade twin) as a plate of their own inside
the bench. The fade canvas's positioning belongs to the crossfade mechanic
(fx-motion/pfp.js); only its paint is here. */
.kit__canvas {
background-color: var(--moki-paper);
border: 1px solid var(--moki-rule);
border-radius: var(--radius-md);
}
/* Trait rows are