/* Animacje: ekran powitalny z kamery termowizyjnej, lasery dalmierza, koparka. */
:root { --laser: #ff3b3b; --laser-glow: rgba(255, 59, 59, .55); }

/* Ekran powitalny */
#intro { display: none; }
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on #intro {
  display: block; position: fixed; inset: 0; z-index: 1000;
  background: #06061a; color: #fff;
  animation: ir-out .6s ease 3.4s forwards; cursor: pointer;
}
#intro.done { animation: ir-out .4s ease forwards; }
@keyframes ir-out { to { opacity: 0; visibility: hidden; } }

.ir-blobs { position: absolute; inset: 0; filter: blur(42px) saturate(1.2); opacity: 0; animation: ir-heat 2.8s ease .3s forwards; }
.ir-blobs i {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff3b0 0%, #fe9f6d 22%, #de4968 45%, #8c2981 68%, #3b0f70 85%, transparent 100%);
  animation: ir-drift 3.4s ease-in-out infinite alternate;
}
.ir-blobs i:nth-child(1) { width: 46vmax; height: 46vmax; left: 27%; top: 18%; }
.ir-blobs i:nth-child(2) { width: 30vmax; height: 30vmax; left: -6%; top: 52%; animation-delay: -1.2s; opacity: .7; }
.ir-blobs i:nth-child(3) { width: 26vmax; height: 26vmax; left: 70%; top: -8%; animation-delay: -2s; opacity: .6; }
.ir-blobs i:nth-child(4) { width: 22vmax; height: 22vmax; left: 74%; top: 66%; animation-delay: -.6s; opacity: .5; }
@keyframes ir-heat { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: .9; transform: scale(1); } }
@keyframes ir-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4%, -5%) scale(1.12); } }

.ir-frame { position: absolute; inset: 22px; animation: ir-in .5s ease both; }
@keyframes ir-in { from { opacity: 0; transform: scale(1.06); } }
.ir-frame .c { position: absolute; width: 46px; height: 46px; border: 2px solid rgba(255, 255, 255, .85); }
.ir-frame .c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.ir-frame .c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.ir-frame .c3 { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.ir-frame .c4 { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.ir-hud { position: absolute; font: 600 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 0 6px rgba(0, 0, 0, .6); }
.ir-hud.tl { left: 62px; top: 16px; }
.ir-hud.tr { right: 62px; top: 16px; }
.ir-hud.bl { left: 62px; bottom: 16px; }
.ir-hud.br { right: 62px; bottom: 16px; display: flex; align-items: center; gap: 8px; }
.ir-hud b { color: #fff3b0; font-weight: 700; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 8px var(--laser); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ir-cross { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); opacity: .4; }
.ir-cross::before, .ir-cross::after { content: ""; position: absolute; background: #fff; }
.ir-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ir-cross::after { top: 50%; left: 0; right: 0; height: 1px; }

.ir-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: min(92vw, 760px); }
.ir-mark svg { display: block; width: clamp(84px, 16vw, 130px); margin: 0 auto 18px; color: #3b0f70; animation: ir-icon 2.8s ease .3s forwards; }
@keyframes ir-icon {
  0% { color: #3b0f70; filter: none; }
  35% { color: #8c2981; }
  60% { color: #de4968; filter: drop-shadow(0 0 10px #de4968); }
  85% { color: #fe9f6d; filter: drop-shadow(0 0 18px #fe9f6d); }
  100% { color: #fff3b0; filter: drop-shadow(0 0 26px #fe9f6d); }
}
.ir-name {
  font: 800 clamp(2rem, 8vw, 5rem)/1.05 var(--f-head); letter-spacing: -.01em;
  background: linear-gradient(90deg, #1a0b45, #3b0f70, #8c2981, #de4968, #fe9f6d, #fff3b0, #fff3b0);
  background-size: 700% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ir-text 2.8s ease .3s forwards;
}
@keyframes ir-text { to { background-position: 100% 50%; } }
.ir-sub { margin-top: 14px; font: 600 .9rem/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: transparent; animation: ir-sub .6s ease 2.3s forwards; }
@keyframes ir-sub { to { color: rgba(255, 243, 176, .9); } }
.ir-scale { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 12px; height: 46%; border-radius: 3px;
  background: linear-gradient(#fff3b0, #fe9f6d, #de4968, #8c2981, #3b0f70, #0b0b2a); }
.ir-scale span { position: absolute; right: 20px; font: 600 .7rem/1 var(--f-mono); color: rgba(255, 255, 255, .8); }
.ir-scale span:first-child { top: 0; }
.ir-scale span:last-child { bottom: 0; }
/* Linia jedzie przez transform (nie „top”), żeby Google nie liczył jej jako przesunięcia układu (CLS) */
.ir-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  animation: ir-scan 1.4s ease-in-out .4s 2 alternate; } /* w dół i w górę */
.ir-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); box-shadow: 0 0 14px rgba(255, 255, 255, .6); }
@keyframes ir-scan { 0% { transform: translateY(0); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@media (max-width: 640px) {
  .ir-frame { inset: 12px; }
  .ir-hud.tl, .ir-hud.bl { left: 14px; }
  .ir-hud.tr, .ir-hud.br { right: 14px; }
  .ir-hud.tl, .ir-hud.tr { top: 58px; }
  .ir-hud.bl, .ir-hud.br { bottom: 58px; }
  .ir-scale { display: none; }
}

/* Laser dalmierza pod nagłówkami – dorysowywany w main.js */
.laser-t { position: relative; display: inline-block; }
.laser-t .laser {
  position: absolute; left: 0; bottom: -10px; height: 2px; width: 0;
  background: var(--laser); box-shadow: 0 0 6px var(--laser-glow), 0 0 14px var(--laser-glow); border-radius: 2px;
}
.laser-t .laser::after {
  content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--laser), 0 0 14px 4px var(--laser-glow);
}
.laser-t .laser-read {
  position: absolute; right: 0; bottom: -32px; font: 600 .72rem/1 var(--f-mono); color: var(--laser);
  letter-spacing: .06em; opacity: 0; white-space: nowrap;
}
.laser-t.in .laser { animation: laser-draw 1s cubic-bezier(.6, 0, .2, 1) forwards; }
.laser-t.in .laser-read { animation: laser-read .4s ease 1s forwards; }
@keyframes laser-draw { to { width: 100%; } }
@keyframes laser-read { to { opacity: .95; } }
.laser-wrap, .hero h1 { margin-bottom: 50px; }

/* Laser krzyżowy przelatujący przez hero */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.xl { position: absolute; pointer-events: none; background: var(--laser); box-shadow: 0 0 8px var(--laser-glow); opacity: .35; }
.xl-h { left: 0; right: 0; height: 1px; animation: xl-y 9s ease-in-out infinite alternate; }
.xl-v { top: 0; bottom: 0; width: 1px; animation: xl-x 11s ease-in-out infinite alternate; }
.xl-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 2px var(--laser), 0 0 18px 6px var(--laser-glow); opacity: .7;
  animation: xl-x 11s ease-in-out infinite alternate, xl-y 9s ease-in-out infinite alternate; }
.xl-h, .xl-dot { top: 22%; }
.xl-v, .xl-dot { left: 62%; }
@keyframes xl-y { from { top: 22%; } to { top: 82%; } }
@keyframes xl-x { from { left: 62%; } to { left: 94%; } }
@media (max-width: 760px) { .xl, .xl-dot { opacity: .2; } }

/* Koparka */
.scena { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.koparka .kp-boom { transform-origin: 140px 92px; animation: kp-boom 4.5s ease-in-out infinite; }
.koparka .kp-arm { transform-origin: 210px 36px; animation: kp-arm 4.5s ease-in-out infinite; }
.koparka .kp-bucket { transform-origin: 238px 104px; animation: kp-bucket 4.5s ease-in-out infinite; }
.koparka .kp-body { animation: kp-bob 4.5s ease-in-out infinite; }
.koparka .kp-dirt circle { opacity: 0; animation: kp-dirt 4.5s ease-out infinite; }
.koparka .kp-dirt circle:nth-child(2) { animation-delay: .08s; }
.koparka .kp-dirt circle:nth-child(3) { animation-delay: .16s; }
.koparka .kp-dirt circle:nth-child(4) { animation-delay: .24s; }
@keyframes kp-boom { 0%, 100% { transform: rotate(-6deg); } 35% { transform: rotate(13deg); } 55% { transform: rotate(11deg); } 78% { transform: rotate(-12deg); } }
@keyframes kp-arm { 0%, 100% { transform: rotate(-10deg); } 35% { transform: rotate(4deg); } 55% { transform: rotate(20deg); } 78% { transform: rotate(-4deg); } }
@keyframes kp-bucket { 0%, 100% { transform: rotate(-24deg); } 35% { transform: rotate(-12deg); } 55% { transform: rotate(38deg); } 80% { transform: rotate(32deg); } 90% { transform: rotate(-46deg); } }
@keyframes kp-bob { 50% { transform: translateY(1px); } }
@keyframes kp-dirt { 0%, 48% { opacity: 0; transform: translate(0, 0); } 52% { opacity: 1; } 70% { opacity: 0; transform: translate(14px, -16px); } 100% { opacity: 0; } }
.card .scena { max-width: 170px; margin: -6px 0 8px -6px; }

/* Dron nad dachem: przelot wzdłuż połaci, wirniki, skan kamery */
.dron .dr-fly { animation: dr-fly 8s ease-in-out infinite; }
.dron .dr-shadow { animation: dr-shadow 8s ease-in-out infinite; }
.dron .dr-bob { animation: dr-bob 1.8s ease-in-out infinite; }
.dron .dr-rot { transform-box: fill-box; transform-origin: center; animation: dr-spin .14s linear infinite alternate; }
.dron .dr-beam { animation: dr-beam 2.4s ease-in-out infinite; }
.dron .dr-scan { animation: dr-beam 1.2s ease-in-out infinite; }
.dron .dr-rec { animation: dr-rec 1s steps(1) infinite; }
@keyframes dr-fly {
  0%, 100% { transform: translate(140px, 20px) rotate(0) scale(1.2); }
  10% { transform: translate(140px, 20px) rotate(4deg) scale(1.2); }
  45% { transform: translate(262px, 16px) rotate(4deg) scale(1.2); }
  52% { transform: translate(266px, 16px) rotate(0) scale(1.2); }
  60% { transform: translate(266px, 16px) rotate(-4deg) scale(1.2); }
  92% { transform: translate(144px, 20px) rotate(-4deg) scale(1.2); }
}
@keyframes dr-shadow { 0%, 100% { transform: translateX(140px); } 45%, 52% { transform: translateX(264px); } 92% { transform: translateX(144px); } }
@keyframes dr-bob { 50% { transform: translateY(3px); } }
@keyframes dr-spin { to { transform: scaleX(.25); } }
@keyframes dr-beam { 50% { opacity: .45; } }
@keyframes dr-rec { 50% { opacity: 0; } }

/* Termowizja: linia skanu przesuwa się po elewacji i odsłania obraz termiczny, potem znacznik temperatury */
.termo .tm-sweep { transform-box: fill-box; transform-origin: left center; animation: tm-sweep 6s ease-in-out infinite; }
.termo .tm-line { animation: tm-line 6s ease-in-out infinite; }
.termo .tm-heat { animation: tm-fade 6s ease-in-out infinite; }
.termo .tm-hot { animation: tm-pulse 1.4s ease-in-out infinite alternate; }
.termo .tm-mark { opacity: 0; animation: tm-mark 6s ease-in-out infinite; }
.termo .tm-beam { animation: dr-beam 2.4s ease-in-out infinite; }
.termo .tm-rec { animation: dr-rec 1s steps(1) infinite; }
.termo .tm-cam { animation: tm-hand 3s ease-in-out infinite; }
@keyframes tm-sweep { 0% { transform: scaleX(.001); } 45%, 100% { transform: scaleX(1); } }
@keyframes tm-line { 0% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(158px); opacity: 1; } 52%, 100% { transform: translateX(158px); opacity: 0; } }
@keyframes tm-fade { 0%, 84% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tm-pulse { to { opacity: .65; } }
@keyframes tm-mark { 0%, 48% { opacity: 0; } 55%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes tm-hand { 50% { transform: translate(0, 1.5px) rotate(-.6deg); } }

/* Żuraw: wózek jedzie po wysięgniku, lina opuszcza element na kolejną kondygnację */
.zuraw .zr-trolley { animation: zr-trolley 9s ease-in-out infinite; }
.zuraw .zr-cable { transform-box: fill-box; transform-origin: top; animation: zr-cable 9s ease-in-out infinite; }
.zuraw .zr-hook { animation: zr-hook 9s ease-in-out infinite; }
.zuraw .zr-load { animation: zr-load 9s linear infinite; }
.zuraw .zr-placed { animation: zr-placed 9s linear infinite; }
@keyframes zr-trolley { 0%, 14% { transform: translateX(0); } 42%, 74% { transform: translateX(110px); } 92%, 100% { transform: translateX(0); } }
@keyframes zr-hook { 0%, 2% { transform: translateY(68px); } 14%, 42% { transform: translateY(0); } 55%, 60% { transform: translateY(28px); } 72%, 92% { transform: translateY(0); } 100% { transform: translateY(68px); } }
@keyframes zr-cable { 0%, 2% { transform: scaleY(7.18); } 14%, 42% { transform: scaleY(1); } 55%, 60% { transform: scaleY(3.55); } 72%, 92% { transform: scaleY(1); } 100% { transform: scaleY(7.18); } }
@keyframes zr-load { 0%, 58% { opacity: 1; } 59%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes zr-placed { 0%, 58% { opacity: 0; } 59%, 94% { opacity: 1; } 100% { opacity: 0; } }
.scene-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.scene-hero .scena { justify-self: end; }
@media (max-width: 860px) {
  .scene-hero { grid-template-columns: 1fr; }
  .scene-hero .scena { justify-self: start; max-width: 300px; }
}

/* 1. Termowizyjna plama pod kursorem (tylko mysz) */
@media (hover: hover) and (pointer: fine) {
  .card, .price-card { position: relative; isolation: isolate; overflow: hidden; }
  .card::before, .price-card::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: 170px; height: 170px; left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%) scale(.6);
    border-radius: 50%; opacity: 0; transition: opacity .35s ease, transform .35s ease;
    background: radial-gradient(circle, rgba(254, 159, 109, .2) 0%, rgba(222, 73, 104, .14) 30%, rgba(140, 41, 129, .08) 60%, transparent 100%);
    filter: blur(8px);
  }
  .card:hover::before, .price-card:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 2. Taśma miernicza łącząca kroki */
.steps { position: relative; }
.steps .tape-track { position: absolute; left: 20px; top: 27px; bottom: 30px; width: 14px; border-radius: 3px; background: rgba(255, 255, 255, .04); border: 1px dashed var(--line); }
.steps .tape {
  position: absolute; left: 20px; top: 27px; width: 14px; height: 0; border-radius: 3px 3px 2px 2px;
  background:
    repeating-linear-gradient(to bottom, #111827 0 1px, transparent 1px 10px) left / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, #111827 0 2px, transparent 2px 50px) left / 10px 100% no-repeat,
    linear-gradient(90deg, #ffd24d, #ffc22e 60%, #e9ab12);
  box-shadow: 0 0 12px rgba(255, 194, 46, .25);
}
.steps .tape::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -5px; height: 6px; border-radius: 2px; background: #a6b1c4; }
.steps li { z-index: 1; }
.steps li::before { z-index: 2; transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.steps li.lit::before { background: var(--y); color: #111827; border-color: var(--y); box-shadow: 0 0 18px rgba(255, 194, 46, .35); }
.steps li h3, .steps li p { transition: opacity .3s ease; }
.steps.tape-on li:not(.lit) h3, .steps.tape-on li:not(.lit) p { opacity: .45; }

/* 3. Wjeżdżanie przy przewijaniu */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv.on { opacity: 1; transform: none; }

/* 4. Poziomica z pęcherzykiem */
.poziomica { width: 100%; max-width: 380px; justify-self: end; animation: pz-tilt 6s ease-in-out infinite; transform-origin: 50% 50%; }
.pz-body { position: relative; height: 58px; border-radius: 10px; background: linear-gradient(#ffd24d, #ffc22e 55%, #e3a713); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 10px 30px rgba(0, 0, 0, .35); }
.pz-body::before, .pz-body::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; background: #1b2945; }
.pz-body::before { left: 0; border-radius: 10px 0 0 10px; }
.pz-body::after { right: 0; border-radius: 0 10px 10px 0; }
.pz-vial { position: absolute; left: 50%; top: 50%; width: 130px; height: 28px; transform: translate(-50%, -50%); border-radius: 14px; overflow: hidden;
  background: linear-gradient(#d8ff9a, #a9f05a 60%, #86d43a); border: 2px solid #1b2945; box-shadow: inset 0 3px 6px rgba(255, 255, 255, .5); }
.pz-vial i { position: absolute; top: 0; bottom: 0; width: 2px; background: #1b2945; }
.pz-vial i:nth-of-type(1) { left: calc(50% - 22px); }
.pz-vial i:nth-of-type(2) { left: calc(50% + 20px); }
.pz-bubble { position: absolute; left: 50%; top: 50%; width: 34px; height: 16px; margin: -8px 0 0 -17px; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #fff, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .25)); animation: pz-bubble 6s ease-in-out infinite; }
.pz-read { margin-top: 14px; text-align: center; font: 600 .85rem/1 var(--f-mono); color: var(--m); }
.pz-read b { color: var(--y); }
/* Pętla zaczyna się i kończy w poziomie, więc nie ma skoku przy powtórzeniu. */
@keyframes pz-tilt { 0%, 8% { transform: rotate(0); } 24% { transform: rotate(-2.5deg); } 42% { transform: rotate(2deg); } 58% { transform: rotate(-1deg); } 72%, 100% { transform: rotate(0); } }
@keyframes pz-bubble { 0%, 8% { transform: translateX(0); } 24% { transform: translateX(-40px); } 42% { transform: translateX(34px); } 58% { transform: translateX(-16px); } 72%, 100% { transform: translateX(0); } }
@media (max-width: 860px) { .poziomica { justify-self: start; max-width: 300px; } }

/* 5. Mierniki przy sprzęcie */
.gauge { position: relative; height: 74px; margin: -4px 0 18px; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.gauge .lcd { position: absolute; right: 10px; bottom: 8px; font: 700 .95rem/1 var(--f-mono); color: var(--y); background: rgba(0, 0, 0, .45); padding: 5px 7px; border-radius: 5px; }
.g-flir { background: #0b0b2a; }
.g-flir::before { content: ""; position: absolute; inset: -30%; filter: blur(14px);
  background: radial-gradient(circle at 30% 60%, #fff3b0 0 6%, #fe9f6d 14%, #de4968 26%, #8c2981 40%, transparent 55%), radial-gradient(circle at 75% 30%, #de4968 0 8%, #8c2981 22%, transparent 40%);
  animation: g-flir 5s ease-in-out infinite alternate; }
.g-flir .cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; }
@keyframes g-flir { to { transform: translate(14%, -10%) rotate(20deg); } }
.g-meter .bar { position: absolute; left: 12px; right: 90px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.g-meter .bar::after { content: ""; position: absolute; inset: 0; width: 30%; border-radius: 4px; background: linear-gradient(90deg, #5fd39a, #ffc22e); animation: g-bar 3s ease-in-out infinite alternate; }
@keyframes g-bar { to { width: 62%; } }
.g-fan svg { position: absolute; left: 14px; top: 50%; width: 48px; height: 48px; margin-top: -24px; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-laser .beam { position: absolute; left: 14px; top: 50%; height: 2px; width: 0; background: var(--laser); box-shadow: 0 0 8px var(--laser-glow); animation: g-beam 2.8s ease-in-out infinite; }
.g-laser .beam::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px var(--laser-glow); }
.g-laser .wall { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(45deg, var(--line) 0 4px, transparent 4px 8px); }
@keyframes g-beam { 0% { width: 0; } 40%, 80% { width: calc(100% - 30px); } 100% { width: 0; } }
.g-leds { display: flex; align-items: center; gap: 10px; padding-left: 16px; }
.g-leds i { width: 14px; height: 14px; border-radius: 50%; background: #1b2945; border: 1px solid var(--line); animation: led 2.4s steps(1) infinite; }
.g-leds i:nth-child(2) { animation-delay: .3s; }
.g-leds i:nth-child(3) { animation-name: led-off; }
@keyframes led { 0%, 20% { background: #1b2945; box-shadow: none; } 21%, 100% { background: #5fd39a; box-shadow: 0 0 10px #5fd39a; } }
@keyframes led-off { 0%, 100% { background: #1b2945; } }
.g-ruler::before { content: ""; position: absolute; left: 12px; right: 12px; top: 22px; height: 20px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #111827 0 1px, transparent 1px 8px) top / 100% 7px no-repeat, repeating-linear-gradient(90deg, #111827 0 2px, transparent 2px 40px) top / 100% 13px no-repeat, linear-gradient(#e6e9ef, #c9cfd9); }
.g-ruler .gap { position: absolute; left: 30%; top: 44px; height: 6px; width: 40px; border-radius: 3px; background: var(--laser); box-shadow: 0 0 8px var(--laser-glow); animation: g-gap 4s ease-in-out infinite alternate; }
@keyframes g-gap { to { left: 60%; width: 24px; } }
.g-square svg { position: absolute; left: 14px; top: 10px; width: 54px; height: 54px; }
.g-square path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: g-draw 3s ease-in-out infinite; }
@keyframes g-draw { 0% { stroke-dashoffset: 120; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 120; } }
.g-torch { background: linear-gradient(90deg, var(--bg), #141f33); }
.g-torch::before { content: ""; position: absolute; left: -10%; top: -40%; width: 70%; height: 180%; background: radial-gradient(ellipse at 0 50%, rgba(255, 243, 176, .35), transparent 70%); animation: g-torch 3.5s ease-in-out infinite alternate; }
.g-torch .wave { position: absolute; left: 0; right: 0; bottom: 18px; height: 14px; opacity: .6;
  background: radial-gradient(ellipse 20px 7px at 20px 14px, transparent 98%, var(--line) 100%) 0 0 / 40px 14px repeat-x; }
@keyframes g-torch { to { transform: translateX(60%); } }

/* Zdjęcie w wizjerze kamery termowizyjnej */
.viewfinder { position: relative; padding: 18px; }
.viewfinder .photo { position: relative; border-style: solid; }
.vf-c { position: absolute; width: 34px; height: 34px; border: 2px solid var(--y); }
.vf-c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.vf-c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.vf-c3 { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.vf-c4 { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.vf-hud { position: absolute; z-index: 2; font: 600 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(13, 21, 36, .7); padding: 5px 7px; border-radius: 5px; display: flex; align-items: center; gap: 6px; }
.vf-tl { left: 30px; top: 30px; }
.vf-tr { right: 30px; top: 30px; color: #fff3b0; }
.vf-bl { left: 30px; bottom: 30px; }
.vf-scan { position: absolute; left: 18px; right: 18px; top: 18px; height: 2px; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 194, 46, .9), transparent); box-shadow: 0 0 12px rgba(255, 194, 46, .6);
  animation: vf-scan 5s ease-in-out infinite; }
@keyframes vf-scan { 0% { top: 18px; opacity: 0; } 8% { opacity: 1; } 42% { top: calc(100% - 20px); opacity: 1; } 50%, 100% { top: calc(100% - 20px); opacity: 0; } }
.vf-cross { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); z-index: 2; opacity: .5; pointer-events: none; }
.vf-cross::before, .vf-cross::after { content: ""; position: absolute; background: #fff; }
.vf-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.vf-cross::after { top: 50%; left: 0; right: 0; height: 1px; }

/* 6. Pulsujący przycisk „Zadzwoń” */
.pulse { position: relative; }
.pulse::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(255, 194, 46, .55); animation: pulse 4s ease-out infinite; }
@keyframes pulse { 0%, 70% { box-shadow: 0 0 0 0 rgba(255, 194, 46, .55); } 100% { box-shadow: 0 0 0 16px rgba(255, 194, 46, 0); } }

@media (prefers-reduced-motion: reduce) {
  .scena *, .xl, .xl-dot, .poziomica, .pz-bubble, .gauge *, .gauge::before, .pulse::after, .vf-scan, .viewfinder .rec { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  .laser-t .laser { width: 100%; }
  .laser-t .laser-read { opacity: .95; }
  .laser-t.in .laser, .laser-t.in .laser-read { animation: none; }
}