/* ═══════════════════════════════════════════════════════════════════
print-craft.css — the print-craft micro-interaction idioms
Shared by any page that wants them. Pair with /assets/js/print-craft.js
(deferred). Markup contract per idiom:
1. TRIM-MARK IMAGE REVEAL — add .trim-reveal to any element that
wraps an ![]()
/. JS injects the waste strips + corner
crop marks; on scroll-into-view the marks draw, then the waste
"trims" away. Override --tr-bg to match the section background
(defaults to white).
2. REGISTRATION MARK — add data-reg to an .eyebrow (or any
inline element). JS appends a four-layer CMYK registration cross
that slides into perfect register on reveal.
3. PROOF-CORRECTION MARK — beside a heading. JS injects a hand-drawn
mark that inks itself on reveal.
4. RIBBON PROGRESS — on long guide pages.
JS pins a bookmark ribbon down the right edge whose length tracks
reading progress. position:fixed (JS pin pattern — sticky is dead
site-wide, see 04_DECISIONS 10 Jun); rAF-throttled, write-on-change.
All idioms respect prefers-reduced-motion (final state, no animation).
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Trim-mark image reveal ─────────────────────────────────── */
.trim-reveal{position:relative;overflow:hidden;--tr-bg:#fff;--tr-w:16px}
/* dark sections: waste strips match the ink background, marks go light */
.page-hero .trim-reveal,.bg-ink .trim-reveal{--tr-bg:#111}
.page-hero .trim-reveal .tr-marks path,.bg-ink .trim-reveal .tr-marks path{stroke:rgba(255,255,255,.65)}
.page-hero .trim-reveal .tr-n::after,.page-hero .trim-reveal .tr-s::after,
.page-hero .trim-reveal .tr-e::after,.page-hero .trim-reveal .tr-w::after{background:rgba(255,255,255,.3)}
/* waste strips — the bleed that falls away under the guillotine */
.trim-reveal .tr-waste{position:absolute;background:var(--tr-bg);z-index:3;pointer-events:none;transition:transform .55s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .55s}
.trim-reveal .tr-n{top:0;left:0;right:0;height:var(--tr-w)}
.trim-reveal .tr-s{bottom:0;left:0;right:0;height:var(--tr-w)}
.trim-reveal .tr-e{top:0;bottom:0;right:0;width:var(--tr-w)}
.trim-reveal .tr-w{top:0;bottom:0;left:0;width:var(--tr-w)}
/* the cut line on each strip's inner edge */
.trim-reveal .tr-n::after,.trim-reveal .tr-s::after,
.trim-reveal .tr-e::after,.trim-reveal .tr-w::after{content:"";position:absolute;background:rgba(17,17,17,.35)}
.trim-reveal .tr-n::after{left:0;right:0;bottom:0;height:1px}
.trim-reveal .tr-s::after{left:0;right:0;top:0;height:1px}
.trim-reveal .tr-e::after{top:0;bottom:0;left:0;width:1px}
.trim-reveal .tr-w::after{top:0;bottom:0;right:0;width:1px}
/* corner crop marks — draw first, then the cut happens */
.trim-reveal .tr-marks{position:absolute;inset:0;z-index:4;pointer-events:none}
.trim-reveal .tr-marks path{stroke:#1a1512;stroke-width:1.2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease .05s,opacity .3s .75s}
/* the cut: marks finish drawing, waste departs outward, marks fade */
.trim-reveal.pc-on .tr-marks path{stroke-dashoffset:0;opacity:0}
.trim-reveal.pc-on .tr-n{transform:translateY(-101%);transition-delay:.55s}
.trim-reveal.pc-on .tr-s{transform:translateY(101%);transition-delay:.62s}
.trim-reveal.pc-on .tr-e{transform:translateX(101%);transition-delay:.69s}
.trim-reveal.pc-on .tr-w{transform:translateX(-101%);transition-delay:.76s}
/* the image settles as the waste falls */
.trim-reveal img{transform:scale(1.025);transition:transform .8s var(--ease,cubic-bezier(.16,1,.3,1)) .55s}
.trim-reveal.pc-on img{transform:none}
/* ── 2. CMYK registration mark ─────────────────────────────────── */
.pc-reg{position:relative;display:inline-block;width:13px;height:13px;margin-left:9px;vertical-align:-2px}
.pc-reg svg{position:absolute;inset:0;width:13px;height:13px;mix-blend-mode:multiply;transition:transform .9s var(--ease,cubic-bezier(.16,1,.3,1))}
.pc-reg svg circle,.pc-reg svg path{fill:none;stroke-width:1.1}
.pc-reg .rg-c{stroke:#0096d6;transform:translate(2.6px,-1.6px)}
.pc-reg .rg-m{stroke:#d6006e;transform:translate(-2.2px,1.8px);transition-delay:.08s}
.pc-reg .rg-y{stroke:#e8b400;transform:translate(1.6px,2.2px);transition-delay:.16s}
.pc-reg .rg-k{stroke:#111;transform:none}
.pc-on .pc-reg svg,.pc-reg.pc-on svg{transform:none}
/* ── 3. Proof-correction marginalia ────────────────────────────── */
.proof-mark{display:inline-block;vertical-align:baseline;margin:0 2px;pointer-events:none}
.proof-mark svg{display:inline-block;overflow:visible}
.proof-mark svg path{stroke:rgba(167,1,42,.65);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease .25s}
.proof-mark svg text{font-family:var(--fd,Georgia,serif);font-style:italic;font-size:11px;fill:rgba(167,1,42,.65);opacity:0;transition:opacity .5s .6s}
.proof-mark.pc-on svg path,.pc-on .proof-mark svg path{stroke-dashoffset:0}
.proof-mark.pc-on svg text,.pc-on .proof-mark svg text{opacity:1}
/* ── 4. Ribbon-marker reading progress ─────────────────────────── */
.pc-ribbon{position:fixed;top:68px;right:28px;width:9px;height:0;z-index:400;pointer-events:none;background:linear-gradient(180deg,var(--red-dk,#820020),var(--red,#A7012A));clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),50% calc(100% - 2px),0 calc(100% - 7px));box-shadow:-1px 1px 3px rgba(0,0,0,.18)}
@media(max-width:1024px){.pc-ribbon{display:none}}
/* ── Reduced motion: land everything in its final state ────────── */
@media(prefers-reduced-motion:reduce){
.trim-reveal .tr-waste,.trim-reveal .tr-marks{display:none}
.trim-reveal img{transform:none;transition:none}
.pc-reg svg{transform:none!important;transition:none}
.proof-mark svg path{stroke-dashoffset:0;transition:none}
.proof-mark svg text{opacity:1;transition:none}
}