/* Story scenes (scenes.js). Builds on ways-motion.css (.wsc card, palette, floor, shadows). Black / white / grey + orange accent. */
.pr-art.pr-live { display: block; aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.pr-art.pr-live::before { display: none; }
.wsc .z-img, .wsc .z-gimg { transition: filter .7s, opacity .7s; }
.wsc .z-gimg { filter: drop-shadow(0 6px 8px rgba(0,0,0,.16)); }
.wsc .z-hsh { fill: rgba(0,0,0,.14); filter: blur(2px); }

/* ---- floor scan ---- */
.wsc .z-hidden .z-img { opacity: .1; filter: grayscale(1); }
.wsc .z-hidden.z-on .z-img { opacity: 1; filter: none; animation: z-pop .7s cubic-bezier(.34,1.56,.64,1); transform-box: fill-box; transform-origin: center bottom; }
@keyframes z-pop { from { transform: scale(.85); } to { transform: none; } }
.wsc .z-dash { fill: none; stroke: #bdbdbd; stroke-width: 1.2; stroke-dasharray: 4 4; transition: opacity .4s; }
.wsc .z-q { font-size: 22px; font-weight: 800; fill: #bdbdbd; text-anchor: middle; transition: opacity .3s; }
.wsc .z-hidden.z-on .z-dash, .wsc .z-hidden.z-on .z-q { opacity: 0; }
.wsc .z-found { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-found rect { fill: #f7861e; } .wsc .z-found text { font-size: 8.6px; font-weight: 800; fill: #fff; text-anchor: middle; }
.wsc .z-hidden.z-on .z-found { opacity: 1; transform: none; }
.wsc .z-hidden:not(.z-on) .z-glow { fill: rgba(0,0,0,0) !important; }
.wsc .z-hidden:not(.z-on) .z-ml { fill: #b0b0b0; }
.wsc .z-sweep { opacity: 0; transition: opacity .3s; } .wsc .z-sweep.z-on { opacity: 1; }
.wsc .z-trail { fill: url(#zf-tr); } .wsc .z-beamv { fill: #f7861e; filter: drop-shadow(0 0 4px rgba(247,134,30,.8)); }

/* ---- connections ---- */
.wsc .z-cable { fill: none; stroke: #d4d4d4; stroke-width: 1.6; stroke-dasharray: 3 4; }
.wsc .z-cable-on { fill: none; stroke: #111; stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.wsc .z-pk { opacity: 0; transition: opacity .3s; } .wsc .z-pk.z-on { opacity: 1; } .wsc .z-pk circle { fill: #f7861e; filter: drop-shadow(0 0 3px rgba(247,134,30,.8)); }
.wsc .z-cm .z-img { opacity: .45; filter: grayscale(1); }
.wsc .z-cm.z-on .z-img { opacity: 1; filter: none; }
.wsc .z-cm:not(.z-on) .z-glow { fill: rgba(0,0,0,.06) !important; }
.wsc .z-proto { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-proto rect { fill: #fff; stroke: #111; stroke-width: 1; } .wsc .z-proto text { font-size: 8px; font-weight: 800; fill: #111; text-anchor: middle; }
.wsc .z-cm.z-on .z-proto { opacity: 1; transform: none; }

/* ---- gate check ---- */
.wsc .z-scrb { fill: #fff; stroke: #d4d4d4; stroke-width: 1.2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)); transition: stroke .3s; }
.wsc .z-rd { font-size: 15px; font-weight: 800; fill: #111; text-anchor: middle; font-variant-numeric: tabular-nums; }
.wsc .z-rs { font-size: 7.6px; font-weight: 700; fill: #6b6b6b; text-anchor: middle; }
.wsc .z-scr.z-ok .z-scrb { stroke: #111; }
.wsc .z-scr.z-bad .z-scrb { stroke: #c2410c; } .wsc .z-scr.z-bad .z-rd, .wsc .z-scr.z-bad .z-rs { fill: #c2410c; }
.wsc .z-bar { transform: translateY(-40px); opacity: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
.wsc .z-bar.z-on { transform: none; opacity: 1; } .wsc .z-barr { fill: #c2410c; }
.wsc .z-mark, .wsc .z-xmark { opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-mark.z-on, .wsc .z-xmark.z-on { opacity: 1; transform: translateY(-42px); }
.wsc .z-mark circle { fill: #111; } .wsc .z-mark path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wsc .z-xmark circle { fill: #c2410c; } .wsc .z-xmark text { font-size: 12px; font-weight: 900; fill: #fff; text-anchor: middle; }
.wsc .z-binl { font-size: 8px; font-weight: 800; letter-spacing: .1em; fill: #6b6b6b; text-anchor: middle; }
.wsc .z-pbody { filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); }

@media (prefers-reduced-motion: reduce) { .wsc .z-hidden .z-img { opacity: 1; filter: none; } .wsc .z-cm .z-img { opacity: 1; filter: none; } }

/* ================= RotoSight problem scenes ================= */
.sc-art.lwrap .wsc { height: 340px; }
/* tanks (the product) */
.wsc .z-tank path { fill: #e9e9e9; stroke: #6b6b6b; stroke-width: 1.4; }
.wsc .z-tank .z-cap { fill: #9a9a9a; } .wsc .z-tank .z-rib { stroke: #bdbdbd; stroke-width: 1; }
.wsc .z-tank.z-warp path { fill: #fff1ea; stroke: #c2410c; }
.wsc .z-tank.z-soft path { fill: #fafafa; stroke: #c2410c; stroke-dasharray: 3 3; }
.wsc .z-tl { font-size: 8.6px; font-weight: 800; text-anchor: middle; fill: #111; } .wsc .z-tl-warp, .wsc .z-tl-soft { fill: #c2410c; }
/* cure */
.wsc .z-heat { fill: none; stroke: #f7861e; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.wsc .z-oven.z-on .z-heat { animation: z-heat 1.4s ease-in-out infinite; }
@keyframes z-heat { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }
.wsc .z-dial { fill: #fff; stroke: #e6e6e6; stroke-width: 8; }
.wsc .z-dial-on { fill: none; stroke: #f7861e; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wsc .z-crown { fill: #9a9a9a; }
.wsc .z-big { font-size: 20px; font-weight: 800; fill: #111; text-anchor: middle; font-variant-numeric: tabular-nums; }
.wsc .z-small { font-size: 8px; font-weight: 700; fill: #6b6b6b; text-anchor: middle; }
.wsc .z-small2 { font-size: 8.4px; font-weight: 700; fill: #c2410c; text-anchor: middle; }
.wsc .z-thermo { fill: #fff; stroke: #9a9a9a; stroke-width: 1.4; } .wsc .z-merc { fill: #d4d4d4; transition: transform .2s; } .wsc .z-bulb { fill: #d4d4d4; stroke: #9a9a9a; stroke-width: 1.4; }
.wsc .z-qm circle { fill: #fff; stroke: #c2410c; stroke-width: 1.6; stroke-dasharray: 3 3; } .wsc .z-qm text { font-size: 18px; font-weight: 900; fill: #c2410c; text-anchor: middle; }
.wsc .z-qm { animation: z-blinkq 1.6s ease-in-out infinite; } @keyframes z-blinkq { 50% { opacity: .35; } }
.wsc .z-out > g { opacity: 0; transition: opacity .4s; } .wsc .z-out > g.z-on { opacity: 1; }
.wsc .z-out > g.z-on .z-tank { animation: z-drop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes z-drop { from { transform: translateY(-18px); } to { transform: none; } }
/* arms */
.wsc .z-arm { fill: #d4d4d4; stroke: #9a9a9a; stroke-width: .8; }
.wsc .z-mold rect { fill: #eeeeee; stroke: #6b6b6b; stroke-width: 1.4; }
.wsc .z-mold.z-heavy rect { fill: #fff1ea; stroke: #c2410c; stroke-width: 1.8; }
.wsc .z-hub2 { fill: #fff; stroke: #6b6b6b; stroke-width: 1.6; } .wsc .z-hubc { fill: #f7861e; }
.wsc .z-al, .wsc .z-al2 { font-size: 10px; font-weight: 800; fill: #3a3a3a; text-anchor: middle; }
.wsc .z-axis { stroke: #cfcfcf; stroke-width: 1.2; }
.wsc .z-avg { stroke: #111; stroke-width: 1.2; stroke-dasharray: 4 4; } .wsc .z-avgt { font-size: 9px; font-weight: 800; fill: #111; text-anchor: start; }
.wsc .z-wbar { fill: #f7861e; transform: scaleY(0); } .wsc .z-wbar.z-heavy { fill: #c2410c; }
.wsc .z-wv { font-size: 10px; font-weight: 800; fill: #111; text-anchor: middle; opacity: 0; }
.wsc .z-warn { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-warn.z-on { opacity: 1; transform: none; } .wsc .z-warn rect { fill: #fff1ea; stroke: #c2410c; stroke-width: 1; } .wsc .z-warn text { font-size: 9.4px; font-weight: 800; fill: #c2410c; text-anchor: middle; }
/* stages */
.wsc .z-track { stroke: #d4d4d4; stroke-width: 2; stroke-dasharray: 5 5; }
.wsc .z-ico path, .wsc .z-ico rect, .wsc .z-ico circle { fill: none; stroke: #9a9a9a; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s; }
.wsc .z-ico .z-ico-o { stroke: none; fill: #d4d4d4; }
.wsc .z-sg.z-on .z-ico path, .wsc .z-sg.z-on .z-ico rect, .wsc .z-sg.z-on .z-ico circle { stroke: #111; }
.wsc .z-sg.z-on .z-ico .z-ico-o { fill: #f7861e; }
.wsc .z-log { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-sg.z-on .z-log { opacity: 1; transform: none; }
.wsc .z-log rect { fill: #fff; stroke: #d4d4d4; stroke-width: 1; stroke-dasharray: 3 3; } .wsc .z-log line { stroke: #e3e3e3; stroke-width: 2; } .wsc .z-log text { font-size: 7.6px; font-weight: 700; fill: #9a9a9a; text-anchor: middle; }
.wsc .z-crack { fill: none; stroke: #c2410c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.wsc .z-tk.z-bad .z-crack { opacity: 1; } .wsc .z-tk.z-bad .z-tank path { stroke: #c2410c; fill: #fff1ea; }
.wsc .z-rej { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-rej.z-on { opacity: 1; transform: none; } .wsc .z-rej rect { fill: #fff; stroke: #c2410c; stroke-width: 1.2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)); }
.wsc .z-rj1 { font-size: 10.5px; font-weight: 800; fill: #c2410c; text-anchor: middle; } .wsc .z-rj2 { font-size: 8.4px; font-weight: 600; fill: #6b6b6b; text-anchor: middle; }
/* cost */
.wsc .z-flame { fill: #f7861e; transform-box: fill-box; transform-origin: center bottom; animation: z-flick .5s ease-in-out infinite alternate; } .wsc .z-flame2 { fill: #fff1e2; }
@keyframes z-flick { to { transform: scale(1.06, .94); } }
.wsc .z-plug { fill: #fff; stroke: #6b6b6b; stroke-width: 1.6; } .wsc .z-plug2 { stroke: #6b6b6b; stroke-width: 2; stroke-linecap: round; } .wsc .z-bolt { fill: none; stroke: #f7861e; stroke-width: 2; stroke-linejoin: round; }
.wsc .z-price { stroke: #111; stroke-width: 1.2; stroke-dasharray: 5 4; } .wsc .z-pricet { font-size: 9px; font-weight: 800; fill: #111; }
.wsc .z-coin { fill: #f7f7f7; stroke: #9a9a9a; stroke-width: 1; opacity: 0; transform: translateY(-14px); transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-coin.z-on { opacity: 1; transform: none; }
.wsc .z-over .z-coin { fill: #fff1ea; stroke: #c2410c; }
.wsc .z-stack .z-cv { font-size: 10px; font-weight: 800; fill: #111; text-anchor: middle; opacity: 0; transition: opacity .3s; }
.wsc .z-stack.z-done .z-cv { opacity: 1; } .wsc .z-over .z-cv { fill: #c2410c; }
@media (prefers-reduced-motion: reduce) { .wsc .z-coin { opacity: 1; transform: none; } .wsc .z-out > g { opacity: 1; } }

/* ---- visual pass 2 ---- */
.sc-art.lwrap { overflow: visible; border-radius: 0; }
.wsc { box-shadow: 0 24px 44px -34px rgba(0,0,0,.28), inset 0 0 0 1px #e8e8e8; }
/* part journey */
.wsc .z-badge { fill: #fff; stroke: #d4d4d4; stroke-width: 1.5; transition: stroke .3s, fill .3s; }
.wsc .z-sg.z-on .z-badge { stroke: #111; fill: #fff; filter: drop-shadow(0 6px 8px rgba(0,0,0,.10)); }
.wsc .z-prog { stroke: #f7861e; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.wsc .z-track { stroke: #e3e3e3; stroke-width: 2.4; stroke-dasharray: none; }
.wsc .z-belt2 { stroke: #d4d4d4; stroke-width: 3; stroke-linecap: round; }
.wsc .z-log rect { fill: #fafafa; stroke: #d4d4d4; } .wsc .z-log text { font-size: 8.4px; font-weight: 700; fill: #9a9a9a; text-anchor: middle; }
.wsc .z-tk .z-tank path { fill: #ececec; }
.wsc .z-tk { filter: drop-shadow(0 4px 4px rgba(0,0,0,.14)); }
/* cost coins */
.wsc .z-coin rect { fill: #f4f4f4; stroke: #9a9a9a; stroke-width: 1; } .wsc .z-coin line { stroke: #d4d4d4; stroke-width: 1; }
.wsc .z-over .z-coin rect { fill: #fff1ea; stroke: #c2410c; } .wsc .z-over .z-coin line { stroke: #f5b48a; }
.wsc .z-coin { opacity: 0; transform: translateY(-14px); transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-coin.z-on { opacity: 1; transform: none; }
.wsc .z-stack .z-cv { font-size: 11px; }

.wsc .z-stack .z-cv, .wsc .z-pricet, .wsc .z-avgt { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }