/* Illustrated camera views (site/pages-src/scenes.mjs).
   Placeholders for approved footage: line-art, night-camera palette.
   Acid appears only on the bounding box: in product UI acid means MATCH. */
.scene { display: block; width: 100%; height: 100%; background: #0b1113; }
.scene * { vector-effect: non-scaling-stroke; }
.scene .sc-l, .scene .sc-lb, .scene .sc-fence, .scene .sc-rail, .scene .sc-pipe, .scene .sc-wire, .scene .sc-arm, .scene .sc-dash, .scene .sc-lamp-line, .scene .sc-wave { fill: none; stroke: rgba(196, 193, 182, .26); stroke-width: 1; }
.scene .sc-lb { stroke: rgba(196, 193, 182, .42); stroke-width: 1.5; }
.scene .sc-fence { stroke: rgba(196, 193, 182, .2); }
.scene .sc-rail { stroke: rgba(196, 193, 182, .34); }
.scene .sc-pipe { stroke: rgba(196, 193, 182, .3); stroke-width: 2; }
.scene .sc-wire { stroke: rgba(196, 193, 182, .3); }
.scene .sc-arm { stroke: rgba(196, 193, 182, .36); stroke-width: 2; }
.scene .sc-dash { stroke: rgba(196, 193, 182, .3); stroke-dasharray: 10 12; stroke-width: 1.5; }
.scene .sc-wave { stroke: rgba(150, 190, 200, .16); }
.scene .sc-lamp-line { stroke: rgba(242, 239, 231, .22); }
.scene .sc-edge { stroke: rgba(196, 193, 182, .5); stroke-width: 1.5; fill: none; }
.scene .sc-yellow { stroke: rgba(226, 196, 110, .55); stroke-width: 2; fill: none; }
.scene .sc-barrier { stroke: rgba(242, 239, 231, .55); stroke-width: 3; stroke-dasharray: 8 6; fill: none; }
.scene .sc-road { fill: rgba(196, 193, 182, .045); stroke: rgba(196, 193, 182, .2); }

.scene .sc-sky { fill: #0e1619; }
.scene .sc-wall { fill: #111a1d; }
.scene .sc-ceil { fill: #0c1315; }
.scene .sc-floor { fill: #151f22; }
.scene .sc-pit { fill: #090e10; }
.scene .sc-water { fill: #0b1519; }
.scene .sc-lamp { fill: rgba(242, 239, 231, .5); }
.scene .sc-window { fill: rgba(242, 226, 170, .16); }
.scene .sc-led { fill: rgba(114, 167, 120, .7); }
.scene .sc-screen { fill: rgba(56, 189, 248, .14); stroke: rgba(196, 193, 182, .3); }
.scene .sc-flame { fill: rgba(255, 170, 90, .55); }
.scene .sc-sign { fill: rgba(196, 193, 182, .55); font: 500 9px/1 var(--font-mono, monospace); letter-spacing: .08em; }

.scene :is(.sc-panel, .sc-door, .sc-pillar, .sc-shop, .sc-shelf, .sc-machine, .sc-conv, .sc-column, .sc-tank, .sc-bldg, .sc-booth, .sc-gatezone, .sc-glass, .sc-canopy, .sc-rack, .sc-cage, .sc-counter, .sc-tray, .sc-arch, .sc-box2, .sc-esc, .sc-traincar, .sc-tunnel, .sc-awning, .sc-bench1, .sc-bench2, .sc-pile) { fill: rgba(196, 193, 182, .05); stroke: rgba(196, 193, 182, .28); stroke-width: 1; }
.scene .sc-pillar { fill: rgba(196, 193, 182, .08); }
.scene .sc-glass { fill: rgba(120, 170, 190, .06); }
.scene .sc-gatezone { fill: none; stroke-dasharray: 3 4; }
.scene .sc-tunnel { fill: #070b0c; }
.scene .sc-bench1 { fill: rgba(196, 193, 182, .07); }
.scene .sc-bench2 { fill: rgba(196, 193, 182, .04); }
.scene .sc-pile { fill: rgba(196, 193, 182, .1); }
.scene .sc-traincar { fill: rgba(196, 193, 182, .1); stroke: rgba(196, 193, 182, .4); }
.scene .sc-ring { fill: rgba(242, 226, 170, .6); }
.scene .sc-scanline { fill: rgba(255, 255, 255, .025); }

/* actors */
.scene .sc-p { fill: rgba(206, 210, 202, .62); }
.scene .sc-p-leg { stroke: rgba(206, 210, 202, .62); fill: none; stroke-linecap: round; }
.scene .sc-p2 { fill: rgba(196, 193, 182, .22); stroke: rgba(196, 193, 182, .4); }
.scene .sc-hot { fill: var(--paper-100, #F2EFE7); }
.scene .sc-hot-leg { stroke: var(--paper-100, #F2EFE7); fill: none; stroke-linecap: round; }
.scene .sc-hot-line { stroke: var(--paper-100, #F2EFE7); fill: none; stroke-width: 1.5; }
.scene .sc-v { fill: rgba(196, 193, 182, .2); stroke: rgba(196, 193, 182, .5); }
.scene .sc-v-line { stroke: rgba(196, 193, 182, .5); }
.scene .sc-hot-line { stroke: var(--paper-100, #F2EFE7); }
.scene .sc-wheel { fill: #0b1113; stroke: rgba(196, 193, 182, .6); stroke-width: 1.5; }
.scene .sc-load { fill: rgba(196, 193, 182, .3); }
.scene .sc-load-hot { fill: rgba(242, 239, 231, .75); }
.scene .sc-helmet { fill: #E8E3D8; }
.scene .sc-cap { fill: #C4C1B6; }

/* bounding box — the match */
.scene .sc-box-line { fill: none; stroke: var(--acid-500, #C9FF5A); stroke-width: 2; stroke-linecap: square; }
.scene .sc-box-fill { fill: rgba(201, 255, 90, .06); stroke: rgba(201, 255, 90, .35); stroke-width: 1; }
.scene .sc-box-chip { fill: var(--acid-500, #C9FF5A); }
.scene .sc-box-t { fill: var(--ink-950, #11110F); font: 600 9.5px/1 var(--font-mono, monospace); letter-spacing: .04em; }

/* motion: ambient life in the frame. Paused unless the frame is in view. */
.scene .sc-walk { animation: sc-walk var(--dur, 12s) linear var(--delay, 0s) infinite alternate; }
.scene .sc-drive { animation: sc-walk var(--dur, 9s) cubic-bezier(.4, 0, .6, 1) var(--delay, 0s) infinite alternate; }
.scene .sc-idle { animation: sc-idle 3.4s ease-in-out var(--delay, 0s) infinite alternate; }
.scene .sc-train { animation: sc-train 14s ease-in-out infinite; }
.scene .sc-flare { animation: sc-flicker 2.6s ease-in-out infinite alternate; }
@keyframes sc-walk { from { transform: translateX(0); } to { transform: translateX(var(--dx, 60px)); } }
@keyframes sc-idle { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
@keyframes sc-train { 0%, 12% { opacity: 0; transform: translateX(-40px); } 30%, 62% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateX(-40px); } }
@keyframes sc-flicker { from { opacity: .7; } to { opacity: 1; } }
.scene-paused .scene *, .scene.is-paused * { animation-play-state: paused !important; }

/* the box is revealed by its frame's state (pages.js), and is always present
   in static contexts such as result thumbnails */
[data-box="off"] .scene .sc-box { opacity: 0; }
.scene .sc-box { transition: opacity 320ms cubic-bezier(.2, 0, 0, 1); }

@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .scene .sc-train { opacity: 1; }
}