/* Stage RUNTIME rules shared by the reels editor, the typography workbench AND
   the render page (reels/render/) — anything an effect engine depends on must
   live here, not in reels.css: the render page loads only this + fonts, and a
   missing rule silently breaks worker frame capture (transforms on inline
   spans are no-ops). */

/* typography effects (text-fx.js): per-letter/word unit spans */
.reel-text .tfx-line { display: inline-block; }
.tfx-w { display: inline-block; white-space: nowrap; }
.tfx-u { display: inline-block; will-change: transform, opacity; }
.tfx-mask { overflow: hidden; vertical-align: bottom; }
.tfx-mask .tfx-i { display: inline-block; }

/* annotation effects (annotate-fx.js) */
.reel-node.rect { }
.reel-node.rect .stage-rect { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.reel-node .annotate-hand { position: absolute; pointer-events: none; z-index: 6; width: auto; max-width: none; }
.reel-node.magnifier { }
/* captions always ride above user layers (inline z-index is node-count based, max ~50 for typical projects) */
.reel-node.caption { z-index: 200; }
.reel-node.caption .cap-center { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* lower-third + raised-quarter use top/bottom % (relative to canvas HEIGHT, unlike
   padding which is width-relative) so placement is predictable on every aspect and
   matches the caption editor. bottom:23% lands the caption center ~73% — in the lower
   third but ABOVE the platform UI zone (TikTok/Reels chrome lives in the bottom ~18%). */
.reel-node.caption .cap-center.pos-bottom .stage-text,
.reel-node.caption .cap-center.pos-upper .stage-text { position: absolute; left: 6%; right: 6%; width: auto; }
.reel-node.caption .cap-center.pos-bottom .stage-text { bottom: 23%; }
.reel-node.caption .cap-center.pos-upper .stage-text { top: 23%; }
/* override editor.css's global `.stage-text { display:flex }` — flex drops the
   inter-word whitespace and ignores text-align. Captions must be a plain block. */
.reel-node.caption .stage-text { display: block; width: 88%; height: auto; white-space: normal; word-break: normal; text-align: center; }
.reel-node.caption .cap-w { display: inline-block; }
.reel-node.magnifier .magnifier-clip {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: block;
  background: rgba(255, 255, 255, 0.04); pointer-events: none;
}
.reel-node.magnifier .magnifier-zoom { position: absolute; max-width: none; pointer-events: none; }
.reel-node.magnifier .magnifier-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 6px solid #2b2f36; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.35);
}
.reel-node.magnifier .magnifier-frame { position: absolute; inset: -18%; width: 136%; height: 136%; pointer-events: none; }