/* PPE case study only: the drawn operator and rooms, review monitor states and the illustrated camera wall
   (the energy page's hero, glance card, monitor frame and blue statement come from glanz-energy.css) */

/* ---------- the drawn operator ---------- */
.op-body { fill: #E6EEFF; }
.op-body.plain { fill: #5B7FB8; }
.op-skin { fill: #F1C9A5; }
.op-glove { fill: #3B82F6; }
.op-net { fill: #7DB7FF; opacity: .95; }
.op-hair { fill: #3A2A22; }
.op-mask { fill: #A9CEFF; }
.op-gog { fill: rgba(111,227,255,.35); stroke: #6FE3FF; stroke-width: 3; }
.op-ok { fill: none; stroke: #3DDC97; stroke-width: 3; }
.op-miss rect:first-child { fill: rgba(255,92,97,.12); stroke: #FF5C61; stroke-width: 3; stroke-dasharray: 8 5; }
.op-miss .op-tag { fill: #FF5C61; }
.op-miss text { font: 600 12px 'IBM Plex Mono', monospace; fill: #fff; }

/* ---------- rooms ---------- */
.rm-wall { fill: #DDE6F2; }
.rm-floor { fill: #C6D2E3; }
.rm-light { fill: #fff; }
.rm-steel { fill: #AFBDD1; }
.rm-steel2 { fill: #96A6BE; }
.rm-pipe { fill: #8EA0BA; }
.rm-panel { fill: #7F93B0; }
.rm-screen { fill: #2D5BB8; }
.rm-tab { fill: #fff; }

/* ---------- camera wall ---------- */
.pv-wall { display: grid; gap: 24px; }
@media (min-width: 768px) { .pv-wall { grid-template-columns: 1fr 1fr; gap: 28px; } }
.pv-fig { margin: 0; }
/* the drawn views rise in one after another as the wall arrives */
.js-rv .pv-wall .pv-fig { opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js-rv .pv-wall.in .pv-fig { opacity: 1; transform: none; }
.js-rv .pv-wall.in .pv-fig:nth-child(2) { transition-delay: .12s; } .js-rv .pv-wall.in .pv-fig:nth-child(3) { transition-delay: .24s; } .js-rv .pv-wall.in .pv-fig:nth-child(4) { transition-delay: .36s; }
.pv-cam { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0B1638; border: 1px solid rgba(141,182,255,.22); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 6px rgba(255,255,255,.03); }
.pv-cam svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-rec, .pv-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font: 500 11px/1.1 'IBM Plex Mono', monospace; letter-spacing: .03em; color: #EAF2FF; background: rgba(7,16,42,.78); border: 1px solid rgba(141,182,255,.25); backdrop-filter: blur(6px); }
.pv-rec { left: 10px; top: 10px; }
.pv-rec i { width: 7px; height: 7px; border-radius: 999px; background: #FF5C61; animation: pv-blink 1.6s ease-in-out infinite; }
.pv-chip { right: 10px; bottom: 10px; }
.pv-chip i { width: 8px; height: 8px; border-radius: 999px; background: #3DDC97; box-shadow: 0 0 10px rgba(61,220,151,.9); }
.pv-cam.is-bad .pv-chip { border-color: rgba(255,92,97,.5); }
.pv-cam.is-bad .pv-chip i { background: #FF5C61; box-shadow: 0 0 10px rgba(255,92,97,.9); animation: pv-blink 1.2s ease-in-out infinite; }
.pv-scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(111,227,255,.14) 85%, rgba(111,227,255,.55)); animation: pv-scan 4.4s cubic-bezier(.4,0,.2,1) infinite; pointer-events: none; }
.pv-fig:nth-child(2) .pv-scan { animation-delay: -1.1s; } .pv-fig:nth-child(3) .pv-scan { animation-delay: -2.2s; } .pv-fig:nth-child(4) .pv-scan { animation-delay: -3.3s; }
@keyframes pv-blink { 50% { opacity: .3; } }
@keyframes pv-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(340%); } }
@media (max-width: 640px) { .pv-rec, .pv-chip { font-size: 9.5px; padding: 5px 8px; } }


/* ---------- review monitor: one drawn layer per step ---------- */
/* a dim cleanroom sits behind every step, so the screen is never empty */
#ppeMonitor .mon-view svg.pl-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.6); }
.pl-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(10,22,60,.55), rgba(5,11,31,.88)); transition: opacity .6s; }
[data-state="review"] .pl-shade, [data-state="live"] .pl-shade { opacity: 0; }
/* boxes and live views land one after another */
[data-l="review"] .op-miss { opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-state="review"] [data-l="review"] .op-miss { animation: pl-pop .5s cubic-bezier(.2,.7,.2,1) .5s forwards; }
[data-state="review"] [data-l="review"] .op-miss + .op-miss { animation-delay: 1.1s; }
@keyframes pl-pop { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
.pw .pv-cam { opacity: 0; transform: scale(.94); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
[data-state="live"] .pw .pv-cam { opacity: 1; transform: none; }
[data-state="live"] .pw .pv-cam:nth-child(2) { transition-delay: .15s; } [data-state="live"] .pw .pv-cam:nth-child(3) { transition-delay: .3s; } [data-state="live"] .pw .pv-cam:nth-child(4) { transition-delay: .45s; }
/* the energy monitor stretches every svg in its view; here only the full-frame drawings do that */
#ppeMonitor .mon-view svg { position: static; inset: auto; width: auto; height: auto; }
#ppeMonitor .mon-view .pl > svg, #ppeMonitor .mon-view .pv-cam svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#ppeMonitor .mon-view .pl > svg.pn-op { inset: auto; left: 5%; top: 8%; width: auto; height: 84%; aspect-ratio: 240 / 370; }
#ppeMonitor .mon-view .pu-ic svg { width: 16px; height: 16px; }
#ppeMonitor .mon-view .pp-row svg { width: 44px; height: 54px; }
@media (max-width: 640px) { #ppeMonitor .mon-view .pp-row svg { width: 32px; height: 40px; } }
.pl { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.pl > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-state="upload"] [data-l="upload"], [data-state="queue"] [data-l="queue"], [data-state="review"] [data-l="review"],
[data-state="note"] [data-l="note"], [data-state="report"] [data-l="report"], [data-state="live"] [data-l="live"] { opacity: 1; transform: none; }

.pu, .pq, .pp, .pn { position: absolute; border-radius: 16px; background: rgba(13,28,72,.86); border: 1px solid rgba(141,182,255,.3); backdrop-filter: blur(10px); color: #EAF2FF; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 40px -20px rgba(47,123,255,.6); }
.pu { left: 50%; top: 50%; width: min(78%, 420px); transform: translate(-50%, -50%); padding: 18px; }
.pu-file { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(141,182,255,.16); }
.pu-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--blue, #1D5FE0); }
.pu-ic svg { width: 16px; height: 16px; fill: #fff; }
.pu-file b { display: block; font-size: 14px; color: #fff; } .pu-file small { font-size: 12px; color: #9FB3D9; }
.pu-t { margin: 14px 0 8px; font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #8DB6FF; }
.pu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pu-chips span { font-size: 12.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(141,182,255,.3); color: #CFE0FF; transition: background .3s, color .3s, border-color .3s; }
[data-state="upload"] .pu-chips span { animation: pu-tick .4s ease forwards; }
[data-state="upload"] .pu-chips span:nth-child(2) { animation-delay: .25s; } [data-state="upload"] .pu-chips span:nth-child(3) { animation-delay: .5s; } [data-state="upload"] .pu-chips span:nth-child(4) { animation-delay: .75s; }
@keyframes pu-tick { to { background: var(--blue, #1D5FE0); border-color: var(--blue, #1D5FE0); color: #fff; } }
.pu-btn { display: inline-block; margin-top: 14px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #2E6FEE, #1A56D1); }

.pq { left: 50%; top: 50%; width: min(84%, 460px); transform: translate(-50%, -50%); padding: 18px; display: flex; gap: 18px; align-items: center; }
.pq-rack { flex: none; width: 86px; display: grid; gap: 6px; }
.pq-rack i { position: relative; height: 26px; border-radius: 6px; background: #0A1538; border: 1px solid rgba(141,182,255,.25); }
.pq-rack i::before, .pq-rack i::after { content: ''; position: absolute; top: 10px; width: 6px; height: 6px; border-radius: 999px; background: #3DDC97; animation: pv-blink .9s ease-in-out infinite; }
.pq-rack i::before { left: 10px; } .pq-rack i::after { left: 22px; animation-delay: -.45s; background: #6FE3FF; }
.pq-info { flex: 1; min-width: 0; }
.pq-info b { display: block; font-size: 15px; color: #fff; } .pq-info small { display: block; font-size: 12px; color: #9FB3D9; }
.pq-bar { display: block; margin: 12px 0 8px; height: 6px; border-radius: 6px; background: rgba(141,182,255,.2); overflow: hidden; }
.pq-bar em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue, #1D5FE0), var(--cyan, #33C3F0)); }
[data-state="queue"] .pq-bar em { animation: pq-run 2.4s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes pq-run { to { width: 100%; } }

[data-l="review"] .pr-scan { fill: rgba(111,227,255,.18); animation: pr-scan 3s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes pr-scan { 0% { transform: translateY(-70px); } 100% { transform: translateY(360px); } }
.pr-time { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 26px; border-radius: 8px; background: rgba(7,16,42,.8); border: 1px solid rgba(141,182,255,.25); }
.pr-time i { position: absolute; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 3px; background: #3DDC97; }
.pr-time i.bad { background: #FF5C61; box-shadow: 0 0 10px rgba(255,92,97,.9); }
.pr-time span { position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; background: #fff; }
[data-state="review"] .pr-time span { animation: pr-head 3.2s linear infinite; }
@keyframes pr-head { to { left: 100%; } }

.pn-op { position: absolute; left: 6%; top: 8%; height: 84%; width: auto; }
.pn { right: 5%; top: 50%; width: min(52%, 330px); transform: translateY(-50%); padding: 16px 18px; }
.pn p { font-size: 13.5px; line-height: 1.5; color: #DCE7FF; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.pn-t { font: 500 10.5px/1 'IBM Plex Mono', monospace !important; letter-spacing: .08em; text-transform: uppercase; color: #6FC3FF !important; margin-bottom: 8px; }
[data-state="note"] .pn p { opacity: 1; transform: none; }
[data-state="note"] .pn p:nth-child(2) { transition-delay: .4s; } [data-state="note"] .pn p:nth-child(3) { transition-delay: .9s; }

.pp { left: 50%; top: 50%; width: min(80%, 430px); transform: translate(-50%, -50%); padding: 16px 18px; }
.pp-t { font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6FC3FF; margin-bottom: 10px; }
.pp-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(141,182,255,.14); margin-bottom: 8px; opacity: 0; transform: translateX(14px); transition: opacity .5s, transform .5s; }
.pp-row svg { width: 44px; height: 54px; flex: none; border-radius: 8px; background: #DDE6F2; outline: 2px solid #FF5C61; outline-offset: -2px; }
.pp-row b { display: block; font-size: 14px; color: #FF8A8E; } .pp-row small { font-size: 12px; color: #9FB3D9; }
[data-state="report"] .pp-row { opacity: 1; transform: none; }
[data-state="report"] .pp-row:nth-child(3) { transition-delay: .35s; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pp-chips span { font-size: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(79,139,255,.18); color: #CFE0FF; font-weight: 500; }

.pw { position: absolute; inset: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pw .pv-cam { aspect-ratio: auto; border-radius: 10px; box-shadow: none; }
.pw .pv-rec, .pw .pv-chip { font-size: 9px; padding: 4px 7px; }
.pw .pv-rec { left: 6px; top: 6px; } .pw .pv-chip { right: 6px; bottom: 6px; }

[data-mon="status"].is-bad { color: #FF8A8E; }
.is-still .pl, .is-still .pu-chips span, .is-still .pq-bar em { transition: none; animation: none; }
@media (max-width: 640px) {
  .pu, .pq, .pp { width: 90%; padding: 12px; } .pq-rack { width: 56px; } .pq-rack i { height: 18px; } .pq-rack i::before, .pq-rack i::after { top: 6px; }
  .pn { width: 58%; padding: 10px 12px; } .pn p { font-size: 11.5px; } .pp-row svg { width: 32px; height: 40px; } .pp-row b { font-size: 12.5px; } .pp-chips { display: none; }
  .pu-file small, .pu-t { display: none; } .pu-chips span { font-size: 11px; padding: 4px 8px; } .pu-btn { margin-top: 10px; padding: 7px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pv-scan, .pv-rec i, .pv-chip i, .pr-scan, .pr-time span, .pq-rack i::before, .pq-rack i::after { animation: none !important; } }

/* ---------- other industries: our own workbench clips and stock footage, all run through the review ---------- */
.pi-sub { max-width: 46rem; }
.pi-sub-t { font-size: 22px; font-weight: 650; color: #fff; letter-spacing: -.01em; }
.pi-sub-p { margin-top: 8px; color: #9FB3D9; font-size: 16px; line-height: 1.6; }
.pi-benches { display: grid; gap: 24px; }
@media (min-width: 1024px) { .pi-benches { grid-template-columns: 1fr 1fr; gap: 28px; } }
.pi-bench { margin: 0; display: grid; gap: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #0A1536; border: 1px solid rgba(141,182,255,.2); box-shadow: 0 50px 100px -50px rgba(47,123,255,.55); }
@media (min-width: 560px) { .pi-bench { grid-template-columns: minmax(0, 42%) 1fr; } }
.pi-bench-frame { position: relative; aspect-ratio: 9 / 16; background: #050B1F; }
@media (max-width: 559px) { .pi-bench-frame { aspect-ratio: 4 / 5; } }
/* side by side, the portrait clip runs the full height of its note */
@media (min-width: 560px) { .pi-bench-frame { aspect-ratio: auto; min-height: 440px; } }
.pi-bench-frame .pi-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-report { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.pi-report-head span { display: block; font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6FC3FF; }
.pi-report-head b { display: block; margin-top: 8px; font-size: 17px; line-height: 1.3; font-weight: 650; color: #fff; }
.pi-report-p { font-size: 14.5px; line-height: 1.6; color: #B9C9E8; }
.pi-person { padding: 12px 14px; border-radius: 14px; background: rgba(255,92,97,.07); border: 1px solid rgba(255,92,97,.28); }
.pi-person small { display: block; font: 500 10.5px/1.4 'IBM Plex Mono', monospace; letter-spacing: .05em; text-transform: uppercase; color: #FF8A8E; }
.pi-person p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #DCE6FA; }
.pi-checks { display: grid; gap: 6px; }
.pi-checks li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: #CFE0FF; background: rgba(255,255,255,.035); }
.pi-checks em { font: 500 11px/1 'IBM Plex Mono', monospace; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #7F93B8; }
.pi-checks li.bad { background: rgba(255,92,97,.12); color: #fff; }
.pi-checks li.bad em { color: #FF8A8E; }
.pi-seen { margin-top: auto; font: 500 11px/1.5 'IBM Plex Mono', monospace; letter-spacing: .04em; color: #6F8CC4; }
.pi-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .pi-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.pi-grid .eo-live-frame .pi-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-cap { padding: 14px 4px 0; }