/* Оживление картинки первого экрана (накладка из maket_anim.py) */
.pic-wrap{position:relative;width:112%;max-width:none;flex:none}
.pic-wrap img{display:block;width:100%;height:auto}
.pic-anim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pic-anim *{transform-box:fill-box;transform-origin:center}

/* вода: круги от гидролога и бегущие блики */
.pic-anim .ring{fill:none;stroke:#fff;stroke-width:2.5;opacity:0;animation:an-ring 3.6s ease-out infinite}
.pic-anim .r1{animation-delay:1.2s}.pic-anim .r2{animation-delay:2.4s}
@keyframes an-ring{0%{transform:scale(.25);opacity:.85}100%{transform:scale(1.9);opacity:0}}
.pic-anim .glint{stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:0;animation:an-glint 4s ease-in-out infinite}
.pic-anim .g1{animation-delay:.6s}.pic-anim .g2{animation-delay:1.3s}.pic-anim .g3{animation-delay:2s}
.pic-anim .g4{animation-delay:2.7s}.pic-anim .g5{animation-delay:3.2s}.pic-anim .g6{animation-delay:1.8s}
@keyframes an-glint{0%{opacity:0;transform:translateX(-8px)}40%{opacity:.75}100%{opacity:0;transform:translateX(18px)}}

/* колонковая труба вращается: по ней бегут косые блики */
.pic-anim .spin path{stroke:#fff;stroke-width:3;opacity:.3}
.pic-anim .spin path:nth-child(2n){stroke:#000;opacity:.1}
.pic-anim .spin{animation:an-spin 1.8s linear infinite}
@keyframes an-spin{to{transform:translateX(36px)}}

/* пыль у устья и шлам у коронки */
.pic-anim .dust{fill:#c9a77c;opacity:0;animation:an-dust 2.4s ease-out infinite}
.pic-anim .d1{animation-delay:.6s}.pic-anim .d2{animation-delay:1.2s}.pic-anim .d3{animation-delay:1.8s}
@keyframes an-dust{0%{opacity:.8;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(6px,-34px) scale(2.2)}}
.pic-anim .chip{fill:#6b5a40;opacity:0;animation:an-chip 1.6s ease-out infinite}
.pic-anim .c0{--dx:-10px}.pic-anim .c1{--dx:-5px;animation-delay:.4s}.pic-anim .c2{--dx:5px;animation-delay:.8s}.pic-anim .c3{--dx:10px;animation-delay:1.2s}
@keyframes an-chip{0%{opacity:.9;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx),-14px)}}

/* тахеометр: раз в несколько секунд луч на отражатель */
.pic-anim .beam{stroke:#ff3b30;stroke-width:2;stroke-dasharray:5 4;opacity:0;animation:an-beam 5s infinite}
.pic-anim .beam-dot{fill:#ff3b30;opacity:0;animation:an-beam 5s infinite}
@keyframes an-beam{0%,62%{opacity:0}66%,80%{opacity:.9}86%,100%{opacity:0}}

/* прибор эколога мигает */
.pic-anim .led{fill:#39ff7a;animation:an-led 1.2s steps(2) infinite;filter:drop-shadow(0 0 3px #39ff7a)}
@keyframes an-led{50%{opacity:.15}}

/* люди: лёгкие движения (участки с мягкой маской поверх тех же людей на картинке) */
.pic-anim .pp{transform-origin:50% 100%;animation:an-sway 4s ease-in-out infinite alternate}
.pic-anim .pp-planner{transform-origin:50% 95%;animation:an-lean 3.6s ease-in-out infinite alternate}
.pic-anim .pp-ecolog{transform-origin:30% 100%;animation:an-dig 2.4s ease-in-out infinite alternate}
.pic-anim .pp-hydro{animation-duration:5s}
.pic-anim .pp-insp{animation:an-look 4.4s ease-in-out infinite alternate}
.pic-anim .pp-driller{animation-duration:3.2s;animation-delay:-1s}
@keyframes an-sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@keyframes an-lean{from{transform:rotate(-2deg) translateX(-1px)}to{transform:rotate(2.2deg) translateX(1px)}}
@keyframes an-dig{from{transform:rotate(0)}to{transform:rotate(2deg) translateY(1px)}}
@keyframes an-look{0%{transform:rotate(-1deg)}100%{transform:rotate(1.4deg) translateY(-1px)}}

@media (prefers-reduced-motion:reduce){.pic-anim{display:none}}
@media (max-width:1100px){.pic-wrap{width:100%}}