/* kopie i awaria — scena przewijana */
#backup-simulation .dr{margin-top:clamp(40px,5.5vw,76px);padding:clamp(24px,5vw,68px);border-radius:clamp(28px,4vw,48px);background:var(--deep);color:#fff;overflow:clip;scroll-margin-top:90px}
#backup-simulation .dr .kicker{color:var(--hl)}
#backup-simulation .dr .kicker::before{background:var(--hl)}
#backup-simulation .dr-head{margin-bottom:clamp(20px,3vw,40px)}
#backup-simulation .dr-head h2{max-width:none}
#backup-simulation .dr-head p:not(.kicker){margin-top:18px;color:#d6dfd0}
#backup-simulation .dr-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(24px,4vw,56px);align-items:start}
#backup-simulation .dr-stage{position:sticky;top:104px;order:2;aspect-ratio:4/3;max-height:calc(100vh - 136px);border-radius:28px;overflow:hidden;
  background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.5px) 0 0/26px 26px,radial-gradient(120% 100% at 30% 15%,#334c3c,#18281f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 80px -40px #000}
#backup-simulation .dr-cam{position:absolute;inset:0;--s:1;--fx:50%;--fy:50%;transform-origin:0 0;transform:translate(calc(50% - var(--fx)*var(--s)),calc(50% - var(--fy)*var(--s))) scale(var(--s));transition:transform 1.1s cubic-bezier(.65,0,.2,1)}
#backup-simulation .dr-cam svg{display:block;width:100%;height:100%;overflow:visible}
#backup-simulation .dr[data-backup-frame="0"] .dr-cam{--s:1.5;--fx:22%;--fy:62%}
#backup-simulation .dr[data-backup-frame="1"] .dr-cam{--s:1.18;--fx:46%;--fy:47%}
#backup-simulation .dr[data-backup-frame="3"] .dr-cam{--s:1.45;--fx:23%;--fy:62%}
#backup-simulation .dr[data-backup-frame="4"] .dr-cam{--s:1.12;--fx:58%;--fy:58%}
#backup-simulation .dr-status{position:absolute;left:16px;top:16px;right:16px;z-index:2;display:grid;justify-items:start}
#backup-simulation .dr-status span{grid-area:1/1;align-self:start;display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(15,12,34,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:500 13px/1.3 var(--f-m);opacity:0;translate:0 -10px;transition:opacity .4s,translate .5s var(--spring)}
#backup-simulation .dr-status span::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
#backup-simulation .dr-status span.bad::before{background:var(--coral);box-shadow:0 0 12px var(--coral)}
#backup-simulation .dr-status span.warn::before{background:var(--warn);box-shadow:0 0 12px var(--warn)}
#backup-simulation .dr[data-backup-frame="0"] .dr-status [data-s="0"],#backup-simulation .dr[data-backup-frame="1"] .dr-status [data-s="1"],#backup-simulation .dr[data-backup-frame="2"] .dr-status [data-s="2"],#backup-simulation .dr[data-backup-frame="3"] .dr-status [data-s="3"],#backup-simulation .dr[data-backup-frame="4"] .dr-status [data-s="4"]{opacity:1;translate:0 0;transition-delay:.35s}
#backup-simulation .dr-bar{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#backup-simulation .dr-bar i{height:4px;border-radius:4px;background:rgba(255,255,255,.16);transition:background .5s}
#backup-simulation .dr[data-backup-frame="0"] .dr-bar i:nth-child(-n+1),#backup-simulation .dr[data-backup-frame="1"] .dr-bar i:nth-child(-n+2),#backup-simulation .dr[data-backup-frame="2"] .dr-bar i:nth-child(-n+3),#backup-simulation .dr[data-backup-frame="3"] .dr-bar i:nth-child(-n+4),#backup-simulation .dr[data-backup-frame="4"] .dr-bar i:nth-child(-n+5){background:var(--hl)}
#backup-simulation .dr-steps article{display:flex;flex-direction:column;justify-content:center;min-height:44vh;transition:opacity .3s}
#backup-simulation .dr-steps article[data-i="4"]{min-height:0;padding:5vh 0 1vh}
#backup-simulation.wc-backup-js .dr-steps article{opacity:.62}
#backup-simulation.wc-backup-js .dr-steps article.on{opacity:1}
#backup-simulation .dr-steps .n{font:500 13px/1 var(--f-m);letter-spacing:.06em;color:var(--hl);margin-bottom:14px}
#backup-simulation .dr-steps h3{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
#backup-simulation .dr-steps p{margin-top:14px;color:#d6dfd0;max-width:420px}
#backup-simulation .dr-note{margin-top:clamp(20px,3vw,36px);padding-top:clamp(20px,3vw,32px);border-top:1px solid rgba(255,255,255,.14);font-size:15.5px;color:#c1ceb9;max-width:none}
/* rysunek: scena z serwerami */
#backup-simulation .dr-stage{transform:perspective(1400px) rotateX(calc(var(--ty,0)*-3deg)) rotateY(calc(var(--tx,0)*4deg));transition:transform .5s ease-out;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.28),0 50px 100px -50px #000}
#backup-simulation .dr-aur{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;transition:background 1.2s;animation:wc-backup-aur 14s ease-in-out infinite alternate}
#backup-simulation .dr-aur.a1{width:62%;aspect-ratio:1;left:-14%;top:-30%;background:#729256}
#backup-simulation .dr-aur.a2{width:52%;aspect-ratio:1;right:-14%;bottom:-36%;background:#496d58;animation-duration:19s;animation-direction:alternate-reverse}
#backup-simulation .dr[data-backup-frame="3"] .dr-aur.a1{background:#8c3a3a}
#backup-simulation .dr[data-backup-frame="3"] .dr-aur.a2{background:#3a2a55}
#backup-simulation .dr[data-backup-frame="4"] .dr-aur.a2{background:#2c8a6a}
@keyframes wc-backup-aur{to{transform:translate(8%,10%) scale(1.15)}}
#backup-simulation .dr-dust{position:absolute;inset:0;pointer-events:none}
#backup-simulation .dr-dust i{position:absolute;bottom:-6px;left:var(--x);width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;animation:wc-backup-dust var(--t) linear var(--dl) infinite}
@keyframes wc-backup-dust{12%{opacity:.45}to{transform:translateY(-480px);opacity:0}}
/* przejście między krokami: błysk światła i krótkie rozmycie */
#backup-simulation .dr-stage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.18) 50%,transparent 64%);transform:translateX(-110%)}
#backup-simulation .dr-stage.cut::before{animation:wc-backup-sweep .7s var(--ease)}
@keyframes wc-backup-sweep{to{transform:translateX(110%)}}
#backup-simulation .dr-stage.cut .dr-cam svg{animation:wc-backup-focus .7s ease-out}
@keyframes wc-backup-focus{35%{filter:blur(7px) brightness(1.3)}}
#backup-simulation .dr-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 rgba(210,96,79,0);transition:box-shadow 1s}
#backup-simulation .dr[data-backup-frame="3"] .dr-stage::after{box-shadow:inset 0 0 140px rgba(210,96,79,.4);animation:wc-backup-alarm 1.1s ease-in-out 2}
@keyframes wc-backup-alarm{50%{box-shadow:inset 0 0 220px rgba(210,96,79,.7)}}
/* podpisy */
#backup-simulation .dr svg text{text-anchor:middle}
#backup-simulation .dr .lb{font:700 20px var(--f-b);fill:#fff}
#backup-simulation .dr .sb{font:500 13px var(--f-m);fill:#b7c7ab}
#backup-simulation .dr .floor polygon{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.16);stroke-width:1.2}
/* serwery: warstwy „działa / wyłączony / w gotowości” przenikają się */
#backup-simulation .dr .glow{filter:url(#wc-backup-blur);fill:#a0bc7a;opacity:.55;transition:fill 1s,opacity 1s}
#backup-simulation .dr .glow.c{opacity:0}
#backup-simulation .dr .v{transition:opacity .9s}
#backup-simulation .dr .srv.a .dead{opacity:0}
#backup-simulation .dr .bar{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;color:var(--ok);filter:drop-shadow(0 0 6px currentColor);transition:color .8s,opacity .8s;animation:wc-backup-bar 2.4s ease-in-out infinite}
#backup-simulation .dr .led{fill:currentColor;color:var(--ok);transition:color .8s,opacity .8s;animation:wc-backup-led 1.7s steps(2,jump-none) infinite}
#backup-simulation .dr .led:nth-of-type(2){animation-delay:-.6s}
#backup-simulation .dr .led:nth-of-type(3){animation-delay:-1.1s}
@keyframes wc-backup-bar{50%{opacity:.55}}
@keyframes wc-backup-led{50%{opacity:.25}}
/* awaria serwera firmy */
#backup-simulation .dr:is([data-backup-frame="3"],[data-backup-frame="4"]) .srv.a .dead{opacity:1}
#backup-simulation .dr[data-backup-frame="3"] .srv.a .live{animation:wc-backup-flick .9s steps(1) forwards}
#backup-simulation .dr[data-backup-frame="4"] .srv.a .live{opacity:0}
@keyframes wc-backup-flick{0%{opacity:1}15%{opacity:.2}30%{opacity:.9}45%{opacity:.1}60%{opacity:.7}75%{opacity:.15}100%{opacity:0}}
#backup-simulation .dr[data-backup-frame="3"] .srv.a{animation:wc-backup-shake .45s linear 3}
@keyframes wc-backup-shake{20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-4px,-1px)}80%{transform:translate(4px,2px)}}
#backup-simulation .dr[data-backup-frame="3"] .srv.a :is(.bar,.led){color:var(--coral);animation-duration:.45s}
#backup-simulation .dr[data-backup-frame="4"] .srv.a :is(.bar,.led){color:var(--coral);opacity:.25;animation:none}
#backup-simulation .dr[data-backup-frame="3"] .glow.a{fill:var(--coral);opacity:.75}
#backup-simulation .dr[data-backup-frame="4"] .glow.a{fill:var(--coral);opacity:.12}
#backup-simulation .dr .alert{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--spring)}
#backup-simulation .dr .alert circle{fill:var(--coral)}
#backup-simulation .dr .alert text{font:800 20px var(--f-b);fill:#fff}
#backup-simulation .dr[data-backup-frame="3"] .alert{transform:scale(1);transition-delay:.6s}
/* trzecia maszyna: duch → test → uruchomiona */
#backup-simulation .dr .srv.c{opacity:.26;transition:opacity .9s}
#backup-simulation .dr .srv.c :is(.bar,.led){color:#8b87a8;opacity:.45;animation:none}
#backup-simulation .dr .srv.c .live{opacity:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease) .25s,opacity .3s}
#backup-simulation .dr[data-backup-frame="2"] .srv.c{opacity:1}
#backup-simulation .dr[data-backup-frame="2"] .srv.c :is(.bar,.led){color:var(--warn);opacity:1;animation:wc-backup-bar 2.4s ease-in-out infinite}
#backup-simulation .dr[data-backup-frame="4"] .srv.c{opacity:1}
#backup-simulation .dr[data-backup-frame="4"] .srv.c .live{opacity:1;clip-path:inset(-5%)}
#backup-simulation .dr[data-backup-frame="4"] .srv.c :is(.bar,.led){color:var(--ok);opacity:1;animation:wc-backup-bar 2.4s ease-in-out infinite;transition-delay:1.2s}
#backup-simulation .dr[data-backup-frame="4"] .glow.c{fill:var(--ok);opacity:.5;transition-delay:.9s}
#backup-simulation .dr .scan{fill:rgba(134,207,154,.2);stroke:var(--ok);stroke-width:2;opacity:0}
#backup-simulation .dr[data-backup-frame="4"] .scan{animation:wc-backup-scan 1.5s var(--ease) .25s both}
@keyframes wc-backup-scan{from{opacity:1;transform:translateY(0)}85%{opacity:1}to{opacity:0;transform:translateY(-132px)}}
/* strumienie danych: impulsy światła biegnące po łuku */
#backup-simulation .dr .beam{fill:none;stroke-linecap:round;opacity:0;transition:opacity .7s,stroke .7s}
#backup-simulation .dr .beam.base{stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:1 7}
#backup-simulation .dr .beam.glw{stroke:var(--hl);stroke-width:8;filter:url(#wc-backup-soft);stroke-dasharray:44 156;animation:wc-backup-flow 2.6s linear infinite}
#backup-simulation .dr .beam.core{stroke:#fff;stroke-width:2.4;stroke-dasharray:44 156;animation:wc-backup-flow 2.6s linear infinite}
@keyframes wc-backup-flow{to{stroke-dashoffset:-200}}
#backup-simulation .dr:is([data-backup-frame="0"],[data-backup-frame="1"],[data-backup-frame="2"]) .beam.in,#backup-simulation .dr:is([data-backup-frame="1"],[data-backup-frame="2"]) .beam.ab{opacity:1}
#backup-simulation .dr[data-backup-frame="3"] .beam.ab.base{opacity:.8;stroke:var(--coral)}
#backup-simulation .dr[data-backup-frame="2"] .beam.bc{opacity:1}
#backup-simulation .dr[data-backup-frame="2"] .beam.bc.glw{stroke:var(--warn)}
#backup-simulation .dr[data-backup-frame="2"] .beam.bc:is(.glw,.core){animation-duration:4s}
#backup-simulation .dr[data-backup-frame="4"] .beam.bc{opacity:1}
#backup-simulation .dr[data-backup-frame="4"] .beam.bc.glw{stroke:var(--ok)}
#backup-simulation .dr[data-backup-frame="4"] .beam.bc:is(.glw,.core){animation-duration:1.3s}
/* pierścienie, strefa testu, historia kopii, plakietka z adresem */
#backup-simulation .dr .ring{fill:none;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
#backup-simulation .dr .ring.ok{stroke:var(--ok)}
#backup-simulation .dr .ring.bad{stroke:var(--coral)}
#backup-simulation .dr .ring.d2{animation-delay:.7s!important}
#backup-simulation .dr[data-backup-frame="0"] .ring.a.ok,#backup-simulation .dr[data-backup-frame="3"] .ring.a.bad,#backup-simulation .dr[data-backup-frame="4"] .ring.c{animation:wc-backup-ring 2.1s ease-out infinite}
@keyframes wc-backup-ring{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.3)}}
#backup-simulation .dr .fence{fill:none;stroke:var(--warn);stroke-width:2;stroke-dasharray:8 10;opacity:0;transition:opacity .6s;animation:wc-backup-dash 3s linear infinite}
@keyframes wc-backup-dash{to{stroke-dashoffset:-36}}
#backup-simulation .dr[data-backup-frame="2"] .fence{opacity:.85}
#backup-simulation .dr .pts{opacity:0;transition:opacity .5s}
#backup-simulation .dr .pts text{text-anchor:start}
#backup-simulation .dr:is([data-backup-frame="2"],[data-backup-frame="3"],[data-backup-frame="4"]) .pts{opacity:1}
#backup-simulation .dr .pts rect{fill:#fff;opacity:.16;transition:opacity .3s calc(var(--k)*30ms),fill .3s calc(var(--k)*30ms)}
#backup-simulation .dr:is([data-backup-frame="2"],[data-backup-frame="3"],[data-backup-frame="4"]) .pts rect{fill:var(--ok);opacity:1}
#backup-simulation .dr .pin{transform:translate(200px,222px);transition:transform 1.3s var(--spring) .3s,opacity .5s}
#backup-simulation .dr .pin rect,#backup-simulation .dr .pin path{fill:#fff}
#backup-simulation .dr .pin text{font:700 15px var(--f-b);fill:var(--ink)}
#backup-simulation .dr[data-backup-frame="3"] .pin{opacity:.4}
#backup-simulation .dr[data-backup-frame="4"] .pin{transform:translate(670px,284px)}

/* dwa warianty ochrony: kopia dzienna (Borg) albo dodatkowo replikacja co godzinę */
#backup-simulation .dr-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:720px;margin-top:28px}
#backup-simulation .dr-modes button{container-type:inline-size;display:grid;gap:5px;padding:14px 16px;border:0;border-radius:20px;text-align:left;cursor:pointer;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;transition:background .3s,color .3s,translate .25s var(--spring)}
#backup-simulation .dr-modes b{font:700 19px/1.15 var(--f-d);letter-spacing:-.01em}
#backup-simulation .dr-modes span{font:600 12.5px/1.35 var(--f-b);font-size:min(13px,4.05cqw);white-space:nowrap;color:#c1ceb9;transition:color .3s}
#backup-simulation .dr-modes button:hover{translate:0 -3px}
#backup-simulation .dr-modes button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.14)}
#backup-simulation .dr-modes button[aria-pressed=true] span{color:var(--muted)}
#backup-simulation .dr[data-mode="borg"] .only-repl,#backup-simulation .dr[data-mode="repl"] .only-borg{display:none}
#backup-simulation .dr[data-mode="borg"] .beam.ac,#backup-simulation .dr[data-mode="repl"] :is(.fence,.beam.bc){display:none}
#backup-simulation .dr[data-mode="repl"]:not([data-backup-frame="4"]) .srv.c{opacity:1}
#backup-simulation .dr[data-mode="repl"]:not([data-backup-frame="4"]) .srv.c :is(.bar,.led){color:var(--warn);opacity:1}
#backup-simulation .dr[data-mode="repl"]:is([data-backup-frame="1"],[data-backup-frame="2"]) .beam.ac{opacity:1}
#backup-simulation .dr[data-mode="repl"][data-backup-frame="3"] .beam.ac.base{opacity:.8;stroke:var(--coral)}
#backup-simulation .dr[data-mode="repl"][data-backup-frame="1"] .dr-cam{--s:1.02;--fx:50%;--fy:50%}