/* OZB Engraver: the drawing layer over a product photo (shared by the
   customer studio and the admin setup screen). */
svg.oe { --oe-laser: #ff3b30; overflow: visible; }

/* Framing: the red laser outline. */
.oe-frame {
	fill: none;
	stroke: var(--oe-laser);
	stroke-width: 1.3;
	stroke-dasharray: 6 5;
	vector-effect: non-scaling-stroke;
	opacity: .85;
	animation: oe-march 1.2s linear infinite;
	transition: opacity .25s;
}
@keyframes oe-march { to { stroke-dashoffset: -22; } }
.oe-ghost {
	fill: rgba(255, 59, 48, .12);
	stroke: var(--oe-laser);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	paint-order: stroke;
	transition: opacity .25s;
}
.oe-laser { transition: opacity .25s; }
.oe-laser-glow { fill: var(--oe-laser); opacity: .75; }
.oe-laser-core { fill: #fff; }
.oe-zone.is-empty .oe-ghost { opacity: 0; }
.oe-zone:not([data-oe-state="framing"]) :is(.oe-frame, .oe-ghost) { opacity: 0; animation: none; }

/* One area in the spotlight (its words are being typed): the others dim. */
svg.oe.has-focus .oe-zone:not(.is-focus) :is(.oe-frame, .oe-ghost, .oe-laser) { opacity: .28; }
svg.oe.has-focus .oe-zone.is-focus .oe-frame { stroke-width: 2; }

/* Burning: a white-hot point with a warm glow. */
.oe-zone[data-oe-state="burning"] .oe-laser-glow { fill: #ffae5c; opacity: .95; }
.oe-zone[data-oe-state="burning"] .oe-laser-core { r: 3.2; }
.oe-zone[data-oe-state="done"] .oe-laser { opacity: 0; }

/* The etch. Steel: the crisp dark mark of a fibre laser with a hairline of
   light on its lower edge, as if cut into the metal. (A grain filter was
   tried and dropped: it broke thin script strokes apart.) */
/* A laser line has a minimum width: a fine stroke in the engraving colour so
   a script font's hairlines (the hook of a G, Y or J) show like the real burn. */
.oe-etch { fill: #1b1d20; stroke: #1b1d20; stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; paint-order: stroke; }
/* Opacity and blend sit on the wrapper, which holds a clear rect the size of
   the photo, never on the text: Safari draws see-through or blended text on a
   layer cut to the font's line box, which cut off loops below it (a script G). */
.oe-etch-g { opacity: .88; mix-blend-mode: multiply; }
.oe-etch-bounds { pointer-events: none; }
.oe-etch-hi { fill: #fff; fill-opacity: .55; }
svg.oe[data-oe-material="wood"] .oe-etch { fill: #3a2111; stroke: #3a2111; }
svg.oe[data-oe-material="wood"] .oe-etch-g { opacity: .9; }
svg.oe[data-oe-material="wood"] .oe-etch-hi { display: none; }
svg.oe[data-oe-material="brushed"] .oe-etch { fill: #eef0f2; stroke: #eef0f2; }
svg.oe[data-oe-material="brushed"] .oe-etch-g { opacity: .92; mix-blend-mode: normal; }
svg.oe[data-oe-material="brushed"] .oe-etch-hi { fill: #000; fill-opacity: .25; }
svg.oe[data-oe-material="dark"] .oe-etch { fill: #d9d4cc; stroke: #d9d4cc; }
svg.oe[data-oe-material="dark"] .oe-etch-g { opacity: .9; mix-blend-mode: screen; }
svg.oe[data-oe-material="dark"] .oe-etch-hi { display: none; }
.oe-hot { fill: #ffb45e; opacity: 0; transition: opacity .6s; }
.oe-spark { fill: #ffd08f; }
.oe-sheen, .oe-glint { pointer-events: none; }
.oe-sheen { opacity: .3; mix-blend-mode: screen; }
.oe-glint { opacity: 1; }
svg.oe[data-oe-material="wood"] .oe-sheen { opacity: .2; }
svg.oe[data-oe-material="wood"] .oe-glint { opacity: .55; }
.oe-smoke { fill: #ece8e1; }

@media (prefers-reduced-motion: reduce) {
	.oe-frame { animation: none; }
}