/* The copy moment: the effect layer, the stamp (the Tiles mark), the ink rings, the print, the slip's tick.
   Everything here is transform and opacity only, pointer-events none, and out of layout.
   The slip's resting look lives in overlay.css (#slip). Tokens: --bg --t1 --t3 (see tokens.css). */

#fx { position: fixed; inset: 0; z-index: 260; pointer-events: none; overflow: hidden; contain: strict; }
#fx * { pointer-events: none; }
.fx-at, .fx-ptr, .fx-ptr2 { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.fx-at { z-index: 0; } .fx-ptr { z-index: 1; } .fx-ptr2 { z-index: 2; }   /* rings under the mark, the print over both */
/* no blanket will-change: animated transforms are promoted while they run, and idle layers cost memory */

/* while the pointer is the stamp the arrow steps aside; cursor.js sets cursor:none inline on the hovered chain only, so no document-wide restyle */

/* ink: rings that bloom from the pointer in the work's own colour. A ground-coloured line on both edges keeps them readable on any image. */
.fx-ring { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 5px solid var(--ink-c); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 2px var(--bg); }
.fx-ring.thin { border-width: 2px; box-shadow: 0 0 0 1px var(--bg), inset 0 0 0 1px var(--bg); }
.fx-ring.dry { border: 2px solid var(--t3); box-shadow: 0 0 0 1px var(--bg), inset 0 0 0 1px var(--bg); left: -24px; top: -24px; width: 48px; height: 48px; }
.fx-ring.still { left: -32px; top: -32px; width: 64px; height: 64px; }   /* reduced motion: no travel, it only fades */

/* the stamp: the Tiles mark, solid text-1, on a small ground-coloured puck so it holds on any image, light or dark; hot spot is its middle */
.fx-stamp { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; transform-origin: 50% 50%; }
.fx-stamp::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: var(--s1); box-shadow: 0 0 0 1px var(--line-2), 0 6px 18px rgba(0, 0, 0, .3); }
.fx-stamp svg { position: relative; display: block; width: 36px; height: 36px; overflow: visible; }
.fx-stamp .tile path { fill: var(--t1); }
.fx-stamp[data-state="dry"] .tile path { fill: var(--t3); }

/* the print: a thumbnail in a thin border, drawn at its own ratio */
.fx-px, .fx-py { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.fx-print { position: absolute; box-sizing: border-box; padding: 3px; background: var(--t1); border-radius: 6px; box-shadow: 0 0 0 1px var(--bg), 0 8px 20px -6px rgba(0, 0, 0, .55); }
.fx-print img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 3px; background: var(--ink-c); }

/* the slip's tick draws itself (the slip is built in js/copy.js, styled in overlay.css) */
.slip .tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.slip.inking .tick path { animation: tick-draw var(--dur-base) var(--ease-out) 90ms backwards; }
@keyframes tick-draw { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: reduce) { .slip.inking .tick path { animation: none; } }