/* Photography carries the scene; SVG only adds sensor signals and feedback. */
.system-deck[data-variant] .system-stage{height:510px}
.system-deck[data-variant] .system-sheet[data-sheet] svg.photo-scene{inset:0;width:100%;height:100%;transform:none;background:#091b25;opacity:1}
.photo-scene .industrial-photo{filter:saturate(.84);transition:filter .7s}
.photo-scene .photo-shade{fill:url(#photo-shade)}
.photo-fx{opacity:0;transition:opacity .4s}
.system-sheet.is-active .photo-fx{opacity:1}
.photo-fx text{font:20px var(--sans);fill:#efffff;letter-spacing:.3px}
.photo-fx .fx-small{font-size:16px;fill:#bddee2}
.photo-fx .fx-label rect{fill:#08202ed9;stroke:#8dd8d55c;stroke-width:1;rx:5}
.photo-fx .fx-leader{stroke:#b5ebe5;stroke-width:1.5;fill:none}
.photo-fx .fx-route{stroke:#88e3db;stroke-width:2.5;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 5px #6df2e077)}
.photo-fx .fx-route.warm{stroke:#edbd86}
.photo-fx .fx-packet{fill:none;stroke:#f1fffb;stroke-width:4;stroke-dasharray:8 92;stroke-dashoffset:108;opacity:0}
.photo-fx .fx-dot{fill:#e3fff7;stroke:#38978c;stroke-width:2}
.photo-fx .fx-halo{fill:#8de9d512;stroke:#9cebd6;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.photo-fx .fx-grid{fill:#071d2bd9;stroke:#a1d7da66;stroke-width:1}
.photo-fx .fx-target{fill:none;stroke:#d5dfe2;stroke-dasharray:6 6;stroke-width:1.2}
.photo-fx .fx-trend{fill:none;stroke:#8aeee0;stroke-width:2.5}
.photo-fx .fx-label,.photo-fx .fx-chart{opacity:1}
.system-deck.fx-entered .system-sheet.is-active .fx-label{animation:photo-label .5s ease-out both;animation-delay:calc(.45s + var(--order,0)*.25s)}
.system-deck.fx-entered .system-sheet.is-active .fx-route,.system-deck.fx-entered .system-sheet.is-active .fx-trend{stroke-dasharray:100;animation:photo-draw 1.3s ease-out .25s both}
.system-deck.fx-entered .system-sheet.is-active .fx-packet{animation:photo-packet 2.3s linear 1.2s 1 both}
.system-deck.fx-entered .system-sheet.is-active .fx-halo{animation:photo-halo 1.6s ease-out .15s 2 both}
.system-deck[data-variant] .system-sheet:after{background:linear-gradient(180deg,#031019b0,transparent 28%,transparent 65%,#031019d9);opacity:1;z-index:1}
.system-deck[data-variant] .sheet-top{top:0;bottom:auto;margin:0 24px;position:relative;padding:0;color:#f3ffff;text-shadow:0 2px 14px #000}
.system-deck[data-variant] .system-sheet{padding-top:28px}
.system-deck[data-variant] .sheet-top span:first-child{font-size:12px;color:#c1e7e6}
.system-deck[data-variant] .sheet-top span:last-child{font-size:21px}
.system-deck[data-variant] .sheet-bottom{bottom:22px;color:#c1e7e6;text-shadow:0 1px 8px #00151c}
.system-detail p{font-size:16px;line-height:1.8}



@keyframes photo-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes photo-label{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-packet{0%{stroke-dashoffset:108;opacity:0}10%,85%{opacity:1}100%{stroke-dashoffset:-8;opacity:0}}
@keyframes photo-halo{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.system-mobile-nav{display:none}
@media(max-width:760px){
 .system-deck[data-variant] .system-stage{height:auto;display:block}
 .system-deck[data-variant] .system-sheet[data-sheet]{display:none;width:100%;height:340px;min-width:0;border-left:0}
 .system-deck[data-variant] .system-sheet[data-sheet] svg.photo-scene{top:80px;bottom:auto;height:auto;aspect-ratio:3 / 2}
 .system-deck[data-variant] .sheet-bottom span:first-child{display:block;font-size:14px}
 .photo-fx .fx-label{display:none}
 .system-deck[data-variant] .system-sheet.is-active{display:block}
 .system-deck[data-variant] .sheet-top span:last-child{writing-mode:horizontal-tb;letter-spacing:0;font-size:22px}
 .system-deck[data-variant] .sheet-top{margin:0 20px}
 .system-deck[data-variant] .sheet-bottom{margin:0 20px}
 .system-mobile-nav{display:flex;gap:6px;padding:10px;background:#0a2230}
 .system-mobile-nav button{flex:1;padding:12px 4px;border:1px solid #597d88;color:#d4e7ec;background:transparent;font:14px var(--sans)}
 .system-mobile-nav button[aria-pressed=true]{background:#24555f;color:#fff;border-color:#97dcd0}
 .photo-fx text{font-size:26px}.photo-fx .fx-small{display:none}
 
}
@media(prefers-reduced-motion:reduce){
 .system-sheet.is-active .photo-fx *{animation:none!important;transition:none!important;stroke-dashoffset:0}
 .photo-fx .fx-halo,.photo-fx .fx-packet{display:none}
 .photo-fx .fx-route,.photo-fx .fx-trend{stroke-dasharray:none}
}