.problem-layered-scene{position:relative;display:block;aspect-ratio:4/3;isolation:isolate}
.problem-layered-scene::before{content:"";position:absolute;inset:0;background:url("assets/octo-card-15-full.svg") 17% 14%/58.5% auto no-repeat;opacity:.10;z-index:0;pointer-events:none}
.symptom-card .problem-layered-scene img{position:absolute;display:block;height:auto;aspect-ratio:auto;object-fit:fill;mask-image:none;-webkit-mask-image:none;filter:none}
.problem-layered-scene .problem-machine{z-index:1}.problem-layered-scene .problem-instrument{z-index:2}

.symptom-card .problem-layered-scene .problem-machine{transition:transform .55s cubic-bezier(.22,.61,.36,1);transition-delay:0s}
.symptom-card .problem-layered-scene .problem-instrument{transition:transform .75s cubic-bezier(.22,.61,.36,1);transition-delay:0s}
@media(hover:hover){.symptom-card:hover .problem-layered-scene .problem-machine{transform:scale(1.02)}.symptom-card:hover .problem-layered-scene .problem-instrument{transform:scale(1.07);transition-delay:0s}}
.symptom-card:focus-within .problem-layered-scene .problem-machine{transform:scale(1.02)}
.symptom-card:focus-within .problem-layered-scene .problem-instrument{transform:scale(1.07);transition-delay:0s}
@media(prefers-reduced-motion:reduce){.symptom-card .problem-layered-scene img{transition:none!important;transform:none!important}}


/* Background lighting for the separate machine and instrument layers. */
.problem-layered-scene::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 31% 25% at 43% 24%,rgba(0,0,0,.40) 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.07) 70%,rgba(0,0,0,0) 100%),radial-gradient(ellipse 30% 22% at 64% 76%,rgba(215,223,232,.12) 0%,rgba(215,223,232,.065) 38%,rgba(215,223,232,.018) 70%,rgba(215,223,232,0) 100%)}

/* Fuel generator grows from upper right toward lower left. */
.symptom-card .problem-scene-fuel .problem-machine{transform-origin:59% 8%}
/* Shrinking toward upper-left / upper-right anchors moves the pattern upward. */
.problem-layered-scene::before{transform:scale(1);transform-origin:left top;transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.problem-scene-fuel::before{transform-origin:right top}
@media(hover:hover){.symptom-card:hover .problem-layered-scene::before{transform:scale(.98)}}
.symptom-card:focus-within .problem-layered-scene::before{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.symptom-card .problem-layered-scene::before{transform:none!important;transition:none!important}}

.problem-scene-fuel::before{background-image:url("assets/octo-card-15-full.svg")}

body[data-results=panel] .symptom-card .result-stat{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Shared space after the equipment and problems accordions. */
body .hero-inner,body .problem-section > .section{padding-bottom:38px}

/* Subtle crossed diagonal microtexture inspired by XADO RED. */
#problems{background-image:repeating-linear-gradient(45deg,transparent 0 2.25px,rgba(3,9,21,.09) 2.25px 3px),repeating-linear-gradient(-45deg,transparent 0 2.25px,rgba(237,243,255,.025) 2.25px 3px);background-size:4.5px 4.5px;}

/* === layers:auto begin === */
/* Сборка build_layers.py (local_redesign), 12.09.2026: каждый слой обрезан по объекту и стоит
   на своём месте сцены; точка масштабирования — та же точка холста, что раньше, пересчитанная
   в координаты обрезанного слоя, поэтому наведение растёт в ту же сторону. Не править руками. */
.symptom-card .problem-layered-scene img[src*="power-part1-"]{left:4.805%;top:4.704%;width:44.869%;transform-origin:7.121% 8.111%}
.symptom-card .problem-layered-scene .heat-glow[data-layer="power-part1"]{left:4.805%;top:4.704%;width:44.869%;aspect-ratio:742/504;transform-origin:7.121% 8.111%;-webkit-mask-image:url(assets/power-part1-v220-512w.webp);mask-image:url(assets/power-part1-v220-512w.webp)}
.symptom-card .problem-layered-scene img[src*="power-part2-"]{left:55.013%;top:19.762%;width:43.749%;transform-origin:93.688% 93.987%}
.symptom-card .problem-layered-scene .lcd-readout[data-layer="power-part2"]{left:55.013%;top:19.762%;width:43.749%;aspect-ratio:680/896;transform-origin:93.688% 93.987%}
.symptom-card .problem-layered-scene .lcd-readout[data-layer="power-part2"] svg{left:37.941%;top:56.696%;width:11.176%;height:7.589%}
.symptom-card .problem-layered-scene img[src*="fuel-part1-"]{left:10.055%;top:3.856%;width:50.33%;transform-origin:97.248% 9.268%}
.symptom-card .problem-layered-scene .smoke[data-layer="fuel-part1"]{--sx:28.196%;--sy:4.996%}
.symptom-card .problem-layered-scene img[src*="fuel-part2-"]{left:52.375%;top:37.347%;width:46%;transform-origin:94.836% 91.672%}
.symptom-card .problem-layered-scene .dial-needle[data-layer="fuel-part2"]{left:52.375%;top:37.347%;width:46%;aspect-ratio:715/695;transform-origin:94.836% 91.672%}
.symptom-card .problem-layered-scene .dial-needle[data-layer="fuel-part2"]{--px:47.217%;--py:25.554%;--len:18.182%;--nw:2.014%;--hubw:5.594%;--hubh:5.755%;--a0:-27.7deg;--dial-drop:18deg}
.symptom-card .problem-layered-scene img[src*="vibration-part1-"]{left:7.277%;top:8.091%;width:45.749%;transform-origin:1.581% -0.234%}
.symptom-card .problem-layered-scene img[src*="vibration-part2-"]{left:43.046%;top:26.024%;width:53.656%;transform-origin:98.691% 99.627%}
.symptom-card .problem-layered-scene .lcd-readout[data-layer="vibration-part2"]{left:43.046%;top:26.024%;width:53.656%;aspect-ratio:834/772;transform-origin:98.691% 99.627%}
.symptom-card .problem-layered-scene .lcd-readout[data-layer="vibration-part2"] svg{left:59.592%;top:36.788%;width:12.83%;height:11.917%}
.symptom-card .problem-layered-scene img[src*="compression-part1-"]{left:10.552%;top:6.4%;width:43.848%;transform-origin:-5.82% 3.853%}
.symptom-card .problem-layered-scene .haze[data-layer="compression-part1"]{left:10.552%;top:6.4%;width:43.848%;aspect-ratio:690/490;transform-origin:-5.82% 3.853%}
.symptom-card .problem-layered-scene img[src*="compression-part2-"]{left:29.787%;top:40.092%;width:67.875%;transform-origin:94.605% 92.668%}
.symptom-card .problem-layered-scene .lcd-readout[data-layer="compression-part2"]{left:29.787%;top:40.092%;width:67.875%;aspect-ratio:1055/653;transform-origin:94.605% 92.668%}
.symptom-card .problem-layered-scene .lcd-readout[data-layer="compression-part2"] svg{left:46.351%;top:22.665%;width:12.512%;height:11.639%}
/* === layers:auto end === */
