/* Two fixed portraits, joined by the cached noise shader in portrait.js. */
#portrait{position:relative;display:block;margin-inline:auto;width:min(76vw,54svh,660px);aspect-ratio:1;touch-action:pan-y}
#portrait img,#portrait canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#portrait canvas{display:none}#portrait[data-renderer=webgl] canvas{display:block}#portrait[data-renderer=webgl] img{visibility:hidden}
#wire-layer{mask-image:linear-gradient(to right,transparent calc(var(--centre,50%) - 7%),black calc(var(--centre,50%) + 7%))}
#portrait[data-view=wire] #mural-layer,#portrait[data-view=mural] #wire-layer{visibility:hidden}
#portrait[data-view=wire] #wire-layer{mask-image:none}
.portrait-controls{display:flex;justify-content:center;gap:10px;margin:20px 0 14px;flex-wrap:wrap}
.portrait-controls button{padding:10px 20px;min-height:44px;border:1px solid #c8cbc3;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:14px;cursor:pointer}
.portrait-controls button[aria-pressed=true]{background:#25282c;color:white;border-color:#25282c}
.portrait-settings{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14px}
.portrait-settings label{display:flex;gap:8px;align-items:center}.portrait-settings input[type=range]{width:min(30vw,160px);accent-color:#25282c}.portrait-settings input[type=checkbox]{accent-color:#25282c}
.portrait-controls button:focus-visible,.portrait-settings input:focus-visible{outline:2px solid #b32642;outline-offset:4px}
@media(max-width:480px){#portrait{width:min(100%,50svh)}.portrait-controls{gap:7px}.portrait-controls button{padding:10px 14px}.portrait-settings{gap:16px}}

#portrait:focus-visible{outline:2px solid #b32642;outline-offset:6px}

#portrait.portrait-reveal{aspect-ratio:1145/1374;padding:0;border:0;background:transparent;color:inherit;cursor:crosshair;overflow:hidden}
.portrait-reveal .reveal-mural{mask-image:radial-gradient(circle at var(--reveal-x,50%) var(--reveal-y,50%),black 0,black 16%,transparent 32%);pointer-events:none}
.portrait-reveal .reveal-mural{opacity:var(--mural-reveal,0);filter:grayscale(1) sepia(.18) contrast(1.3)}
.portrait-reveal .reveal-base{pointer-events:none}

.portrait-strokes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.portrait-strokes path{stroke-width:4.5;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:pencil-draw 6s ease-out var(--delay) infinite;animation-play-state:paused}
#portrait[data-ready=true][data-stroke-motion=true] .portrait-strokes path{animation-play-state:running}
.pencil-strokes{filter:drop-shadow(0 0 2px #f3528b);mask-image:linear-gradient(to right,black calc(var(--centre,50%) - 7%),transparent calc(var(--centre,50%) + 7%))}
.mesh-strokes{mask-image:linear-gradient(to right,transparent calc(var(--centre,50%) - 7%),black calc(var(--centre,50%) + 7%))}
.mesh-strokes path{stroke-width:2.8;filter:drop-shadow(0 0 3px #bfe9ff);animation-name:mesh-trace}
#portrait[data-view=mural] .pencil-strokes,#portrait[data-view=wire] .mesh-strokes{mask-image:none}
#portrait[data-view=wire] .pencil-strokes,#portrait[data-view=mural] .mesh-strokes{display:none}
@keyframes pencil-draw{0%{stroke-dashoffset:1;opacity:0}3%{opacity:1}17%{stroke-dashoffset:0;opacity:1}35%{stroke-dashoffset:0;opacity:.85}52%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes mesh-trace{0%{stroke-dashoffset:1;opacity:0}4%{opacity:.95}22%{stroke-dashoffset:0;opacity:.95}40%{stroke-dashoffset:0;opacity:.7}58%,100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.portrait-strokes{display:none}}

/* Use only cutout alpha so the original photographic pixels are preserved. */
.portrait-reveal img{mask-image:url('assets/portrait/tiisetso-reference-cutout.png');mask-size:100% 100%;mask-repeat:no-repeat}
.portrait-reveal .reveal-mural{mask-image:radial-gradient(circle at var(--reveal-x,50%) var(--reveal-y,50%),black 0,black 16%,transparent 32%),url('assets/portrait/tiisetso-reference-cutout.png');mask-size:100% 100%;mask-composite:intersect}

/* Browsers without WebGL retain the original transparent portrait. */
#portrait[data-renderer=static] .reveal-mural{display:none}