/* showcase: cut-out objects one at a time, neighbours waiting either side (client tokens only) */
.sc{ position:absolute; inset:0; overflow:clip; }
.sc-run{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:0; transition:left .7s var(--ease), width .7s var(--ease); }
.sc-item{ position:absolute; left:50%; top:46%; width:min(56%, 64vh); margin:0; aspect-ratio:1;
  translate:calc(-50% + var(--d) * 62%) -50%; scale:.58; opacity:0; pointer-events:none;
  transition:translate .8s cubic-bezier(0.32, 0.72, 0, 1), scale .8s cubic-bezier(0.32, 0.72, 0, 1), opacity .6s var(--ease); }
.sc-item.is-near{ opacity:.32; pointer-events:auto; cursor:pointer; }
.sc-item.is-on{ scale:1; opacity:1; z-index:1; }
.sc-art{ position:absolute; inset:0; display:grid; place-items:center; }
.sc-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;   /* pinned to its box: a percentage height in the grid cell would not resolve, and taller art would spill over the caption */ filter:drop-shadow(0 28px 30px rgba(0,0,0,.18)); user-select:none; }
.sc-art .ph{ position:absolute; inset:12%; }

/* the caption under the object: the camp, then the name, only on the selected one */
.sc-item figcaption{ position:absolute; left:0; right:0; top:100%; margin-top:6px; display:grid; justify-items:center; gap:2px;
  opacity:0; transition:opacity .4s var(--ease); }
.sc-item.is-on figcaption{ opacity:1; transition-delay:.25s; }
.sc-item figcaption span{ font:500 12px/1.3 var(--c-body); color:color-mix(in srgb, var(--stage-fg) 55%, transparent); }
.sc-item figcaption b{ font:700 24px/1.1 var(--c-display); letter-spacing:-.02em; color:var(--stage-fg); }

@media (prefers-reduced-motion: reduce){ .sc-item{ transition:opacity .2s; } }

/* logo mode: wide artwork. The hero is half the stage; a neighbour is shrunk to .28 and its centre sits
   .4 of the stage from the middle (80% of the hero's width), so it waits near the edge, clear of the hero */
.sc--logos .sc-item{ width:calc(var(--vw) * .5); aspect-ratio:16 / 10; top:44%; translate:calc(-50% + var(--d) * 80%) -50%; scale:.28; }
.sc--logos .sc-item.is-near{ opacity:.55; }
.sc--logos .sc-item.is-on{ scale:1; }
.sc--logos .sc-art{ container-type:size; }
/* optical sizing: a logo's width follows its aspect ratio (--a, set on load) to the power .6, so a square
   logo doesn't read twice the size of a wide one; capped by the box */
.sc--logos .sc-art img{ position:static; inset:auto; --a:2; width:min(100cqw, calc(.7 * pow(var(--a), .6) * 100cqh)); height:auto; max-height:100cqh;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.14)); }

/* pair mode: the sketch, then what it became; the sketch slides in, the product grows out of it */
.sc--pair .sc-pair{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:0; margin:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease), left .7s var(--ease), width .7s var(--ease); }
.sc--pair .sc-pair.is-on{ opacity:1; pointer-events:auto; }
/* sized from the frame width, capped by its height, and centred as a pair on the space above the caption */
.sc--pair .sc-pair{ --sw:min(calc(var(--vw) * .34), 380px); --mw:min(calc(var(--vw) * .46), 490px); }
.sc-sketch{ position:absolute; left:calc(var(--vw) * .26 - var(--sw) / 2); top:calc(350px - var(--sw) / 2); width:var(--sw); aspect-ratio:1; rotate:-4deg; translate:-24px 0; opacity:0;
  transition:translate .8s cubic-bezier(0.32, 0.72, 0, 1), opacity .5s var(--ease), rotate .8s cubic-bezier(0.32, 0.72, 0, 1); }
.sc-made{ position:absolute; left:calc(var(--vw) * .68 - var(--mw) / 2); top:calc(340px - var(--mw) / 2); width:var(--mw); aspect-ratio:1; scale:.7; translate:-18% 6%; opacity:0;
  transition:scale .9s cubic-bezier(0.32, 0.72, 0, 1) .18s, translate .9s cubic-bezier(0.32, 0.72, 0, 1) .18s, opacity .5s var(--ease) .18s; }
.sc-pair.is-on .sc-sketch{ translate:0 0; opacity:1; }
.sc-pair.is-on .sc-made{ scale:1; translate:0 0; opacity:1; }
.sc-sketch img, .sc-made img{ width:100%; height:100%; object-fit:contain; display:block; }
.sc-made img{ filter:drop-shadow(0 28px 30px rgba(0,0,0,.2)); }
/* the colour-in loop (showcase.js plays it): the drawing rebuilt from its layers over a faint pencil ghost.
   With no animation running every mask is full, so the drawing reads finished (thumbnails, reduced motion). */
.sc-live{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sc-sketch.is-live .sc-still{ visibility:hidden; }
.sc-ghost{ opacity:.16; }
.sc-pie, .sc-hatch{ stroke-dasharray:1 1; stroke-dashoffset:0; }
.sc-sketch .ph, .sc-made .ph{ position:absolute; inset:0; }
.sc-pair figcaption{ position:absolute; left:0; right:0; bottom:calc(33px + 40px * var(--ui, 1) + 28px); display:grid; justify-items:center; gap:2px; }
.sc-pair figcaption span{ font:500 12px/1.3 var(--c-body); color:color-mix(in srgb, var(--stage-fg) 55%, transparent); }
.sc-pair figcaption b{ font:700 24px/1.1 var(--c-display); letter-spacing:-.02em; color:var(--stage-fg); }
@media (prefers-reduced-motion: reduce){ .sc-sketch, .sc-made{ transition:opacity .2s; translate:none; scale:1; } }

/* a studio product shot that brings its own floor shadow: no added drop shadow */
.sc-item--studio .sc-art img{ filter:none; }

/* front and back: the front forward and left, the back behind it to the right */
.sc-art.has-back img{ width:78%; height:78%; inset:auto; top:18%; }
.sc-art.has-back .sc-front{ left:-6%; z-index:1; }
.sc-art.has-back .sc-back{ left:30%; top:13%; scale:.9; filter:drop-shadow(0 20px 24px rgba(0,0,0,.14)); }
/* a photograph in the run: its own shape, rounded, no cut-out shadow */
.sc-item--photo .sc-art img{ position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%; border-radius:14px; filter:none; }