/* WEBMADE — 3D-робот, сцена пострілу, рентген, камера стеження */

/* 3D-робот замість SVG, коли WebGL працює */
/* робот-маніпулятор у героя: canvas із кубиками; картинка — запасний варіант */
.arm-stage{aspect-ratio:644/892;height:auto}
.arm-img{position:absolute;left:21.74%;top:1.12%;width:78.26%;height:auto;mix-blend-mode:multiply;filter:invert(1) grayscale(1) contrast(1.6) brightness(1.06);pointer-events:none}
.arm-cv{position:absolute;inset:0;width:100%;height:100%;display:none}
.arm-stage.live .arm-img{display:none}.arm-stage.live .arm-cv{display:block}

/* ——— постріл у диск (закріплена сцена) ——— */
.shoot{position:relative;height:280vh;background:#d7261c;border-bottom:1px solid var(--line)}
.shoot-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 90% at 30% 45%,#e22b1f,#c41c12 60%,#a5140c);cursor:crosshair}
.shoot-pin::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,rgba(0,0,0,.045) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}
.shoot-pin.shake{animation:shake .26s steps(4)}
@keyframes shake{25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-3px,-2px)}100%{transform:none}}
.cd{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.shooter{position:absolute;right:-3%;bottom:-16%;z-index:1;height:94%;aspect-ratio:1;margin:0;transform:translateX(calc((1 - var(--in,0)) * 55%)) rotate(calc((1 - var(--in,0)) * 7deg));transform-origin:80% 100%;will-change:transform}
.shooter img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(10px 10px 0 rgba(0,0,0,.18))}
.shooter.kick img{animation:kick .24s ease-out}
@keyframes kick{30%{transform:translate(2.4%,-1.4%) rotate(1.8deg)}}
.no-fig .shooter{display:none}
.muzzle{position:absolute;z-index:3;width:190px;height:190px;margin:-95px 0 0 -95px;left:0;top:0;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0 10%,#fff6c8 18%,rgba(255,200,40,.85) 30%,rgba(255,120,20,0) 62%);clip-path:polygon(50% 0,57% 38%,85% 10%,62% 44%,100% 50%,62% 56%,88% 88%,56% 62%,50% 100%,44% 62%,12% 90%,38% 56%,0 50%,38% 44%,14% 12%,44% 38%)}
.muzzle.fire{animation:mz .18s steps(2) forwards}
@keyframes mz{0%{opacity:1;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(18deg)}100%{opacity:0;transform:scale(1.3) rotate(30deg)}}
.bang{position:absolute;z-index:5;left:0;top:0;font-family:var(--disp);font-weight:900;font-size:clamp(40px,6vw,92px);line-height:1;color:var(--yel);-webkit-text-stroke:3px #2340f0;paint-order:stroke fill;text-shadow:5px 5px 0 #111;transform:translate(-50%,-50%) rotate(-12deg) scale(0);opacity:0;pointer-events:none}
.bang.pop{animation:bang .75s var(--ease) forwards}
@keyframes bang{0%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.15)}70%{opacity:1;transform:translate(-50%,-70%) rotate(-10deg) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) rotate(-14deg) scale(.95)}}
.shell{position:absolute;z-index:3;width:9px;height:20px;border-radius:3px;background:linear-gradient(90deg,#8a5a00,#ffd166 45%,#a86e00);pointer-events:none}
.shoot-txt{position:absolute;left:var(--pad);bottom:9%;z-index:5;font-family:var(--disp);font-weight:900;font-size:clamp(58px,10.5vw,176px);line-height:.84;text-transform:uppercase;color:#f4efe6;text-shadow:6px 6px 0 #111;pointer-events:none}
.shoot-txt .mask{display:block}
.shoot-hint{position:absolute;left:var(--pad);top:90px;z-index:5;color:#f4efe6;background:#111;padding:6px 10px;font-size:10px;transition:opacity .4s}
.shoot.done .shoot-hint{opacity:0}
@media (max-width:900px){
  .shoot{height:240vh}
  .shooter{height:56%;right:-16%;bottom:-4%}
  .shoot-txt{bottom:auto;top:74px;font-size:clamp(46px,15vw,90px)}
  .shoot-hint{top:auto;bottom:16px}
}

/* ——— рентген ——— */
.xray{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:clamp(420px,62vw,760px);overflow:hidden;background:#050505;color:#f1ede4;border-bottom:1px solid var(--line)}
.xray-img{position:absolute;right:4%;top:0;bottom:0;width:min(56%,620px);display:flex;align-items:flex-end;justify-content:center;transform:rotate(calc(var(--sy,0) * 1deg))}
.xray-img img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;transform-origin:72% 96%;filter:contrast(1.15) brightness(1.05);animation:neck 6.5s ease-in-out infinite,xflick 4s steps(1) infinite;-webkit-mask-image:radial-gradient(120% 100% at 60% 60%,#000 55%,transparent 95%);mask-image:radial-gradient(120% 100% at 60% 60%,#000 55%,transparent 95%)}
@keyframes neck{0%,100%{transform:rotate(-5deg) translateX(-1%)}50%{transform:rotate(4deg) translateX(1.5%) scale(1.02)}}
@keyframes xflick{0%,92%,100%{opacity:1}93%{opacity:.75}95%{opacity:1}96%{opacity:.85}}
.xray-beam{position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(170,220,255,.12) 45%,rgba(220,240,255,.35) 50%,rgba(170,220,255,.12) 55%,transparent);mix-blend-mode:screen;animation:beam 4.5s linear infinite}
@keyframes beam{from{top:-22%}to{top:100%}}
.xray::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.xray-txt{position:relative;z-index:3;padding:60px var(--pad)}
.xray-txt .mono{color:#8f8a80;font-size:10.5px;margin-bottom:14px}
.xray-big{font-family:var(--disp);font-weight:900;font-size:clamp(70px,12vw,200px);line-height:.84;text-transform:uppercase}
.xray-big .mask{display:block}
.xray.no-img{display:none}
@media (max-width:900px){.xray{grid-template-columns:1fr;min-height:560px;align-items:start}.xray-img{right:-10%;width:90%}.xray-txt{padding-top:40px}}

/* ——— камера стеження ——— */
.track{position:relative;height:clamp(360px,52vw,700px);overflow:hidden;background:#111;border-bottom:1px solid var(--line)}
.track img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3) brightness(.78);transform:scale(1.08);animation:pan 28s ease-in-out infinite alternate}
@keyframes pan{to{transform:scale(1.17) translate(-2%,1.5%)}}
.track canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.track::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55)),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}

/* HUD для рентгена й камери */
.hud{position:absolute;inset:18px;z-index:4;pointer-events:none;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:#f1ede4;text-shadow:0 0 6px rgba(0,0,0,.8)}
.hud::before,.hud::after{content:"";position:absolute;width:34px;height:34px;border:2px solid rgba(255,255,255,.75)}
.hud::before{left:0;top:0;border-right:0;border-bottom:0}
.hud::after{right:0;bottom:0;border-left:0;border-top:0}
.hud span{position:absolute}
.hud-tl{left:46px;top:6px}.hud-tr{right:6px;top:6px;display:flex;align-items:center;gap:8px}
.hud-bl{left:6px;bottom:6px}.hud-br{right:46px;bottom:6px}
.hud-tr i{width:9px;height:9px;border-radius:50%;background:#ff2a1d;animation:blink 1.1s steps(2) infinite}
@media (max-width:520px){.hud{font-size:8.5px;inset:12px}.hud-tl{left:40px}}

@media (prefers-reduced-motion:reduce){.xray-img img,.xray-beam,.track img{animation:none!important}.shooter{transform:none}}

/* ——— кіберпанк-глюки ——— */
.gl-layer{position:fixed;inset:0;z-index:176;pointer-events:none;overflow:hidden}
.gl-bar{position:absolute;left:-5%;right:-5%;transform:translateX(var(--x));-webkit-backdrop-filter:var(--f);backdrop-filter:var(--f);animation:glbar .09s steps(2) infinite}
.gl-bar:nth-child(3n){background:rgba(255,0,60,.16);mix-blend-mode:screen}
.gl-bar:nth-child(4n){background:rgba(0,240,255,.14);mix-blend-mode:screen}
@keyframes glbar{50%{transform:translateX(calc(var(--x) * -1))}}
.gl-px{position:absolute;mix-blend-mode:difference;animation:glpx .1s steps(2) infinite}
@keyframes glpx{50%{transform:translateX(12px);opacity:.4}}
.gl-shake .sheet{animation:glsheet .32s steps(4)}
@keyframes glsheet{25%{transform:translate(-5px,1px) skewX(.8deg)}50%{transform:translate(4px,-1px)}75%{transform:translate(-2px,0) skewX(-.5deg)}100%{transform:none}}
.gl-text{position:relative}
.gl-text::before,.gl-text::after{content:attr(data-gl);position:absolute;inset:0;pointer-events:none;white-space:inherit}
.gl-text::before{color:#ff003c;clip-path:inset(18% 0 58% 0);animation:glt1 .5s steps(4)}
.gl-text::after{color:#00f0ff;clip-path:inset(62% 0 8% 0);animation:glt2 .5s steps(4)}
@keyframes glt1{0%{transform:translate(-6px,0)}25%{transform:translate(5px,-2px);clip-path:inset(40% 0 30% 0)}50%{transform:translate(-3px,1px);clip-path:inset(8% 0 80% 0)}75%{transform:translate(7px,0);clip-path:inset(70% 0 12% 0)}}
@keyframes glt2{0%{transform:translate(6px,0)}25%{transform:translate(-5px,2px);clip-path:inset(10% 0 74% 0)}50%{transform:translate(4px,-1px);clip-path:inset(52% 0 30% 0)}75%{transform:translate(-7px,0);clip-path:inset(26% 0 60% 0)}}
.gl-img{animation:glimg .42s steps(5)}
@keyframes glimg{20%{transform:translateX(-8px);filter:drop-shadow(4px 0 0 rgba(255,0,60,.85)) drop-shadow(-4px 0 0 rgba(0,240,255,.85))}40%{transform:translateX(6px) skewX(4deg);filter:hue-rotate(90deg) saturate(2)}60%{transform:translateX(-3px);filter:invert(1)}80%{transform:translateX(4px);filter:drop-shadow(-5px 0 0 rgba(255,0,60,.8)) drop-shadow(5px 0 0 rgba(0,240,255,.8))}100%{transform:none;filter:none}}
.gl-tag{position:fixed;z-index:178;pointer-events:none;padding:6px 14px 6px 10px;background:#fcee0a;color:#111;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;clip-path:polygon(0 0,100% 0,100% 62%,92% 100%,0 100%);box-shadow:4px 0 0 #00f0ff;animation:gltag .9s steps(6) forwards}
@keyframes gltag{0%{opacity:0;transform:translateX(-12px)}15%{opacity:1;transform:none}30%{opacity:.3}40%{opacity:1;transform:translateX(4px)}85%{opacity:1}100%{opacity:0}}
.btn:hover,.nav-links a:hover,.sc-chip:hover{animation:glbtn .32s steps(3) 1}
@keyframes glbtn{33%{text-shadow:2px 0 0 #ff003c,-2px 0 0 #00f0ff}66%{text-shadow:-2px 0 0 #ff003c,2px 0 0 #00f0ff;transform:translateX(1px)}}
.mega{cursor:pointer}

/* ——— око-камера ——— */
.eye{position:relative;height:clamp(440px,58vw,780px);overflow:hidden;background:#ececea;border-bottom:1px solid var(--line);cursor:crosshair}
.eye img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent 99%);mask-image:linear-gradient(90deg,#000 86%,transparent 99%);filter:grayscale(1) contrast(1.1);transform:scale(calc(1.06 + var(--ez,0) * .08));animation:focus 7s ease-in-out infinite}
@keyframes focus{0%,58%,100%{filter:grayscale(1) contrast(1.1) blur(0)}64%{filter:grayscale(1) contrast(1.1) blur(5px)}70%{filter:grayscale(1) contrast(1.1) blur(1px)}74%{filter:grayscale(1) contrast(1.1) blur(3px)}80%{filter:grayscale(1) contrast(1.1) blur(0)}}
.eye::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(236,236,234,.95) 0,rgba(236,236,234,0) 34%),repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px)}
.eye-txt{position:absolute;left:var(--pad);top:34px;z-index:3}
.eye-txt .mono{font-size:10.5px;margin-bottom:10px}
.eye-big{font-family:var(--disp);font-weight:900;font-size:clamp(54px,8.5vw,140px);line-height:.84;text-transform:uppercase;color:#111}
.eye-big .mask{display:block}
.eye-vert{position:absolute;right:var(--pad);top:28px;z-index:3;writing-mode:vertical-rl;font-family:var(--disp);font-weight:900;font-size:clamp(30px,4.4vw,70px);line-height:.9;text-transform:uppercase;color:#111;mix-blend-mode:difference;filter:invert(1)}
.eye-aim{position:absolute;z-index:2;left:0;top:0;width:150px;height:110px;margin:-55px 0 0 -75px;pointer-events:none;border:1.5px solid rgba(255,255,255,.0);transition:width .4s,height .4s;background:linear-gradient(#ff2a1d,#ff2a1d) 0 0/18px 2px no-repeat,linear-gradient(#ff2a1d,#ff2a1d) 0 0/2px 18px no-repeat,linear-gradient(#ff2a1d,#ff2a1d) 100% 0/18px 2px no-repeat,linear-gradient(#ff2a1d,#ff2a1d) 100% 0/2px 18px no-repeat,linear-gradient(#ff2a1d,#ff2a1d) 0 100%/18px 2px no-repeat,linear-gradient(#ff2a1d,#ff2a1d) 0 100%/2px 18px no-repeat,linear-gradient(#ff2a1d,#ff2a1d) 100% 100%/18px 2px no-repeat,linear-gradient(#ff2a1d,#ff2a1d) 100% 100%/2px 18px no-repeat}
.eye-aim::before,.eye-aim::after{content:"";position:absolute;left:50%;top:50%;background:#ff2a1d}
.eye-aim::before{width:16px;height:2px;margin:-1px 0 0 -8px}.eye-aim::after{width:2px;height:16px;margin:-8px 0 0 -1px}
.eye-aim b{position:absolute;left:0;top:-20px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:#ff2a1d;white-space:nowrap}
.eye.no-img{display:none}
@media (max-width:900px){.eye{height:min(118vw,620px)}.eye img{object-position:50% 62%;transform:scale(calc(1.75 + var(--ez,0) * .1));transform-origin:52% 64%}.eye-vert{font-size:26px}}
@media (prefers-reduced-motion:reduce){.eye img{animation:none}}
.arm-stage .chip-a{left:1%;top:8%}.arm-stage .chip-b{right:0;top:47%}.arm-stage .chip-c{left:0;top:40%;bottom:auto}.arm-stage .chip-d{right:3%;top:3%}
@media (min-width:901px){.arm-stage{width:min(100%,430px);justify-self:center}}
.xray-cv{display:none;width:100%;height:100%}.xray.live .xray-img img{display:none}.xray.live .xray-cv{display:block;animation:xflick 4s steps(1) infinite}