/* Occasi printed text (v197; js/occasi-printed-text.js, docs/new-design-kit.md section 8b).
 * Words that sit ON a rendered object look written on it. Put the class on the box that sits on the object, in the same
 * stacking context as the object's picture (its sibling, or inside the transformed layer that holds it): a blend only
 * sees what is painted before it in its own stacking context. On a 9-slice card mark the card's text, not the card.
 *   .op-ink    ink: multiplied with the object's own pixels (its light falloff, shadow, grain and a layer's swing shading
 *              show through the letters; dark ink on light card only ever gets darker), and a very slight ink spread at
 *              the screen's own density
 *   .op-press  + a faint letterpress bite on thick card (the upper edge of each letter a touch deeper)
 *   .op-foil   gold foil instead of ink: a metallic gradient across the words, turned to the scene's light (--op-light,
 *              the direction the light falls; default from the upper left), still multiplied so it sits in the scene's
 *              light. Its stops stay dark enough for 3:1 on ivory card (display words only)
 *   .op-lit    the design's own fill (its foil gradient, a thread texture, an emboss): only multiplied, nothing else
 *   .op-fine   small words (under 15 px; set by OccasiPrintedText.mark). On a computer screen under 2.5x density (a mouse,
 *              Windows' sub-pixel text) a blend switches thin strokes to grey anti-aliasing and they look lighter, so there
 *              they keep the design's own plain ink (v197, measured on the composited pixels). Phones never use sub-pixel
 *              text: they print small words like the rest
 *   .op-tilt   (set by mark()) a box on a card turned by a degree or two: printed from 2.5x density only
 * Plain web UI (buttons, bands, sheets) never takes these classes. */
:root { --op-spread: .5px; --op-press: .5px; --op-light: 160deg; }
@media (min-resolution: 2dppx) { :root { --op-spread: .38px; --op-press: .42px; } }
@media (min-resolution: 2.75dppx) { :root { --op-spread: .3px; --op-press: .36px; } }
.op-ink, .op-foil { --op-bleed: rgba(36, 26, 12, .3); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .op-ink { --op-bleed: color-mix(in srgb, currentColor 34%, transparent); }
}
.op-foil { --op-bleed: rgba(70, 50, 14, .28); }
:is(.op-ink, .op-foil, .op-lit):not(.op-fine):not(.op-tilt) { mix-blend-mode: multiply; }
:is(.op-ink, .op-foil):not(.op-fine):not(.op-tilt) { text-shadow: 0 0 var(--op-spread) var(--op-bleed); }
:is(.op-ink, .op-foil).op-press:not(.op-fine):not(.op-tilt) { text-shadow: 0 0 var(--op-spread) var(--op-bleed), 0 calc(var(--op-press) * -1) calc(var(--op-press) * .6) rgba(24, 16, 6, .2); }
/* small words print everywhere except a computer screen under 2.5x density (there they keep the design's own ink) */
@media not all and (max-resolution: 2.49dppx) and (hover: hover) and (pointer: fine) {
  :is(.op-ink, .op-foil, .op-lit).op-fine:not(.op-tilt) { mix-blend-mode: multiply; }
  :is(.op-ink, .op-foil).op-fine:not(.op-tilt) { text-shadow: 0 0 var(--op-spread) var(--op-bleed); }
  :is(.op-ink, .op-foil).op-press.op-fine:not(.op-tilt) { text-shadow: 0 0 var(--op-spread) var(--op-bleed), 0 calc(var(--op-press) * -1) calc(var(--op-press) * .6) rgba(24, 16, 6, .2); }
}
/* words on a turned card print from 2.5x density (below it, the browser's resampling of the turned card would soften them) */
@media (min-resolution: 2.5dppx) {
  :is(.op-ink, .op-foil, .op-lit).op-tilt { mix-blend-mode: multiply; }
  :is(.op-ink, .op-foil).op-tilt { text-shadow: 0 0 var(--op-spread) var(--op-bleed); }
  :is(.op-ink, .op-foil).op-press.op-tilt { text-shadow: 0 0 var(--op-spread) var(--op-bleed), 0 calc(var(--op-press) * -1) calc(var(--op-press) * .6) rgba(24, 16, 6, .2); }
}
/* foil: the gradient is the letters' fill (each leaf inside the box takes it; the box's own text too) */
.op-foil, .op-foil :where(*) {
  background-image: linear-gradient(var(--op-light), var(--op-foil-1, #5c4416) 0%, var(--op-foil-2, #8f6e2f) 30%, var(--op-foil-3, #a47f38) 47%, var(--op-foil-2, #8f6e2f) 62%, var(--op-foil-1, #5c4416) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* the film compositor's canvas (OccasiPrintedText.film): over the video, under any HTML on the picture */
.op-filmcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; }
.op-filmcanvas.on { opacity: 1; }
/* Windows high contrast: plain text, no blend */
@media (forced-colors: active) {
  .op-ink, .op-foil, .op-lit, .op-foil :where(*) { mix-blend-mode: normal !important; text-shadow: none !important; background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}