/* 2011 · paint — dark museum, spotlight, gilt frame painted in stroke by stroke, figures step forward and leave, door-swing exit */
.in-paint .pt-persp{position:absolute;inset:0;pointer-events:none;perspective:1200px}
.in-paint .pt-door{position:absolute;transform-style:preserve-3d;will-change:transform}
.in-paint .pt-leaf{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:0% 50%;will-change:transform;box-shadow:0 40px 70px -18px rgba(0,0,0,.7)}
.in-paint .pt-frame{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(1px);backface-visibility:hidden}
.in-paint .pt-canvas{position:absolute;left:10.02%;top:7.61%;width:79.63%;height:79.19%;overflow:hidden;background:#d9cfb7;backface-visibility:hidden}
.in-paint .pt-canvas img{position:absolute;display:block}
.in-paint .pt-sketch{position:absolute;inset:0;--k:0%;-webkit-mask-image:linear-gradient(105deg,#000 calc(var(--k) - 22%),transparent var(--k));mask-image:linear-gradient(105deg,#000 calc(var(--k) - 22%),transparent var(--k))}
.in-paint .pt-sketch img{left:0;top:0;width:100%;height:100%}
/* a stroke is a tilted band with torn top and bottom edges (mask image); inside it the wet front is a ragged bristle edge
   baked into a mask twice the band's width, slid across by --k (mask-position) */
.in-paint .pt-stroke{position:absolute;left:-15%;width:130%;-webkit-mask-image:url(../layers/paint11-band.webp);mask-image:url(../layers/paint11-band.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.in-paint .pt-wet{position:absolute;inset:0;--k:109%;-webkit-mask-image:url(../layers/paint11-wet.webp);mask-image:url(../layers/paint11-wet.webp);-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:var(--k) 0;mask-position:var(--k) 0}
.in-paint .pt-stroke.rl .pt-wet{--k:-9%;-webkit-mask-image:url(../layers/paint11-wetr.webp);mask-image:url(../layers/paint11-wetr.webp)}
.in-paint .pt-gloss{position:absolute;left:0;top:0;bottom:0;width:4%;opacity:0;will-change:transform,opacity;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3) 40%,rgba(255,255,255,.44) 55%,rgba(255,255,255,0))}
.in-paint .pt-full{left:0;top:0;width:100%;height:100%;opacity:0;will-change:opacity}
.in-paint .pt-dof{left:0;top:0;width:100%;height:100%;opacity:0;will-change:opacity}
.in-paint .pt-canvas.done .pt-sketch,.in-paint .pt-canvas.done .pt-stroke{visibility:hidden}
.in-paint .pt-fig{position:absolute;display:block;opacity:0;backface-visibility:hidden;will-change:transform,opacity}
/* the brush: a slim handle, a brass ferrule, a tip; its bottom end sits on the wet edge */
.in-paint .pt-brush{position:absolute;left:0;top:0;width:14px;height:110px;transform-origin:50% 100%;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.in-paint .pt-brush i{position:absolute;left:0;right:0;display:block}
.in-paint .pt-brush .handle{top:0;height:64%;border-radius:45%/6%;background:linear-gradient(90deg,#2a1c11,#5a3f28 38%,#7a5a3a 55%,#241709)}
.in-paint .pt-brush .ferrule{top:62%;height:15%;border-radius:2px;background:linear-gradient(90deg,#8d7d58,#efe1b0 42%,#b9a670 70%,#6e5e3c)}
.in-paint .pt-brush .tip{top:76%;height:24%;border-radius:15% 15% 50% 50%/8% 8% 70% 70%;background:linear-gradient(180deg,#d8c9a4,#b3a17c 45%,#6b4632 80%,#4a2c22)}
/* the spotlight: a viewport-sized dark sheet with a soft warm hole; centre and radius are CSS variables set per frame */
.in-paint .pt-spot{position:absolute;inset:0;--x:50%;--y:50%;--r:160px;--ry:184px;pointer-events:none;will-change:opacity;background:radial-gradient(ellipse var(--r) var(--ry) at var(--x) var(--y),rgba(255,232,190,.07),rgba(255,232,190,0) 70%),radial-gradient(ellipse var(--r) var(--ry) at var(--x) var(--y),rgba(14,9,4,0) 22%,rgba(14,9,4,.42) 58%,rgba(14,9,4,.8) 82%,rgba(14,9,4,.93) 100%)}
/* the wall label */
.in-paint .pt-label{position:absolute;left:0;top:0;width:300px;padding:11px 15px 12px;background:#efe6d3;color:#33251a;border-radius:2px;box-shadow:0 10px 26px -10px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.5);font-family:var(--sans);font-weight:400;font-size:11.5px;line-height:1.35;letter-spacing:.02em;opacity:0;will-change:transform,opacity;pointer-events:none}
.in-paint .pt-label b{display:block;font-family:var(--serif);font-weight:500;font-style:italic;font-size:19px;line-height:1.05;letter-spacing:0;padding-right:48px}
.in-paint .pt-label span{position:absolute;right:15px;top:12px;font-size:11px;letter-spacing:.16em;color:#6a5842}
.in-paint .pt-label em{display:block;font-style:normal;margin-top:6px;font-size:11.5px;color:#4d3c2c}
.in-paint .pt-label em i{font-style:italic}
.in-paint .pt-label small{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7c6a55}
body.narrow .in-paint .pt-label{padding:8px 11px 9px;font-size:10px}
body.narrow .in-paint .pt-label b{font-size:15px;padding-right:40px}
body.narrow .in-paint .pt-label span{right:11px;top:9px;font-size:10px}
body.narrow .in-paint .pt-label em{font-size:10px;margin-top:4px}
body.narrow .in-paint .pt-label small{font-size:10px;letter-spacing:.12em}