/* NET2000 File Share: "How we protect your files, even from us" animated diagram.
   Load after n2k-fileshare.css and landing.css. Pure CSS @keyframes on inline-SVG classes: no JS, no SMIL, no inline styles (strict CSP).
   One loop = 17.5 s = 7 steps x 2.5 s. Step n is active from (n-1)/7 to n/7 of the loop. */
.ld-protect{--pf-t:17.5s;padding:var(--sp-7) 0;background:var(--bg)}
.pf-intro{margin:calc(-1 * var(--sp-3)) 0 var(--sp-5);color:var(--muted);font-size:1.02rem}
.pf-grid{display:grid;gap:var(--sp-6);align-items:start}
@media (min-width:900px){.pf-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.pf-stage{position:sticky;top:var(--sp-5)}}
.pf-svg{display:block;width:100%;height:auto;max-width:620px;margin:0 auto;border-radius:22px;box-shadow:0 18px 44px rgba(0,0,51,.22)}
/* steps list (also the accessible text version) */
.pf-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);counter-reset:none}
.pf-steps li{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font-size:.97rem;line-height:1.5}
.pf-steps b{display:block;font-size:1rem;color:var(--navy-800)}
.pf-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-50);color:var(--navy-800);font-weight:800;font-size:.95rem;margin-top:1px}
.pf-sum{display:flex;gap:var(--sp-3);align-items:center;justify-content:center;margin:var(--sp-6) auto 0;max-width:720px;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-pill);background:var(--navy-800);color:#fff;font-weight:700;font-size:1.05rem;text-align:left}
.pf-sum .ico{flex:none;width:26px;height:26px;color:#7fe3ff}
/* SVG art */
.pf-bg{fill:#000a4a;stroke:rgba(160,200,255,.25);stroke-width:1.5}
.pf-svg .pf-t{font:700 18px/1 var(--font);stroke:none}
.pf-svg .pf-mono{font:700 20px/1 var(--mono);stroke:none;fill:#6fb6ff}
.pf-svg .pf-small{font-size:14px}.pf-svg .pf-big{font-size:22px}.pf-spaced{letter-spacing:.14em}
.pf-white{fill:#fff}.pf-cyan{fill:#7fe3ff}.pf-green{fill:#6ff0c4}.pf-red{fill:#ff9aac}.pf-muted{fill:#a9b8de}
.pf-node{stroke:#7fe3ff;fill:none}.pf-node>circle:first-child{fill:rgba(127,227,255,.08)}
.pf-tun{stroke:rgba(127,227,255,.35);stroke-width:2}
.pf-flow{stroke:#7fe3ff;stroke-width:3;stroke-dasharray:2 10;opacity:.35}
.pf-drop,.pf-sight{stroke:rgba(127,227,255,.4);stroke-width:2;stroke-dasharray:4 7}
.pf-vbox{fill:rgba(255,255,255,.05);stroke:#7fe3ff}.pf-vin{stroke:rgba(127,227,255,.3);stroke-width:1.5}
.pf-vglow{stroke:#7fe3ff;stroke-width:6;opacity:0}
.pf-timer{stroke:#ffbf47}.pf-hand{stroke:#ffbf47}
.pf-pill{fill:var(--red-600);stroke:none}
.pf-eye{stroke:#a9b8de}.pf-eyeq{fill:#ff9aac}
.pf-doc,.pf-out{stroke:#fff}.pf-file{fill:#0b2a9a}
.pf-doc-lines,.pf-doc-lines-on{stroke:#cdd8f5;stroke-width:2.5}
.pf-svg .pf-doc-scr{font-size:13px;fill:#7fe3ff}
.pf-lock{stroke:#7fe3ff}.pf-lockbody{fill:#000a4a}
.pf-chip{fill:var(--blue-600);stroke:none}
.pf-keyart{stroke:#ffbf47}
.pf-env{stroke:#fff;fill:#0b2a9a}
.pf-ok circle{fill:#1a9e6a;stroke:none}.pf-ok path{stroke:#fff}
/* static picture (also the reduced-motion view): locked file, scrambled vault with no key, password emailed, recipient unlocked */
.pf-doc-lines{opacity:0}.pf-pw,.pf-key,.pf-erased,.pf-bit,.pf-del{opacity:0}
.pf-oshk{transform:translate(0,-6px)}
/* animation */
@media (prefers-reduced-motion:no-preference){
.pf-svg *{animation-duration:var(--pf-t);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.pf-flow{animation:pf-flow 1.6s linear infinite,pf-tun var(--pf-t) ease-in-out infinite}
.pf-doc{animation-name:pf-doc}.pf-doc-lines{animation-name:pf-lines}.pf-doc-scr{animation-name:pf-scr}
.pf-doc .pf-lock{animation-name:pf-lock}.pf-shackle{animation-name:pf-shackle}
.pf-pw{animation-name:pf-pw}.pf-key{animation-name:pf-key}.pf-erased{animation-name:pf-erased}.pf-env{animation-name:pf-env}
.pf-bit{animation-name:pf-bit;animation-timing-function:ease-in;animation-fill-mode:backwards}.pf-bit2{animation-delay:.45s}.pf-bit3{animation-delay:.9s}
.pf-row{animation-name:pf-row;animation-fill-mode:backwards}.pf-row2{animation-delay:.35s}.pf-row3{animation-delay:.7s}
.pf-vglow{animation-name:pf-vglow}.pf-nokey{animation-name:pf-nokey}.pf-eye{animation-name:pf-eye}
.pf-rkey{animation-name:pf-rkey}.pf-out{animation-name:pf-out}.pf-oshk{animation-name:pf-oshk}.pf-ok{animation-name:pf-ok}
.pf-timer{animation-name:pf-timer}.pf-hand{animation-name:pf-hand}.pf-del{animation-name:pf-del}
/* captions highlight in sync: step n uses a negative delay so its 0-14% window lands at (n-1) x 2.5 s */
.pf-steps li,.pf-num{animation:var(--pf-t) ease-in-out var(--d,0s) infinite}
.pf-steps li{animation-name:pf-cap;color:var(--muted)}.pf-num{animation-name:pf-capn}
.pf-steps li:nth-child(2){--d:-15s}.pf-steps li:nth-child(3){--d:-12.5s}.pf-steps li:nth-child(4){--d:-10s}
.pf-steps li:nth-child(5){--d:-7.5s}.pf-steps li:nth-child(6){--d:-5s}.pf-steps li:nth-child(7){--d:-2.5s}
}
@keyframes pf-cap{0%,13%{background:var(--blue-50);border-color:var(--blue-500);color:var(--ink);box-shadow:0 6px 18px rgba(0,80,216,.14)}15.5%,98%{background:var(--bg);border-color:var(--line);color:var(--muted);box-shadow:none}100%{background:var(--blue-50);border-color:var(--blue-500);color:var(--ink)}}
@keyframes pf-capn{0%,13%{background:var(--blue-600);color:#fff}15.5%,98%{background:var(--blue-50);color:var(--navy-800)}100%{background:var(--blue-600);color:#fff}}
@keyframes pf-flow{to{stroke-dashoffset:-24}}
@keyframes pf-tun{0%{opacity:.3}2%,12%{opacity:1}16%,100%{opacity:.3}}
@keyframes pf-doc{0%{opacity:0;transform:translate(-210px,0)}3%{opacity:1;transform:translate(-210px,0)}12%{transform:translate(0,0)}38%{opacity:1;transform:translate(0,0)}43%,100%{opacity:0;transform:translate(0,24px)}}
@keyframes pf-lines{0%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes pf-scr{0%,30%{opacity:0}34%,100%{opacity:1}}
@keyframes pf-lock{0%,21%{opacity:0;transform:translate(0,-8px)}25%,100%{opacity:1;transform:translate(0,0)}}
@keyframes pf-shackle{0%,28.5%{transform:translate(0,-6px)}31%,100%{transform:translate(0,0)}}
@keyframes pf-pw{0%,15%{opacity:0;transform:translate(0,8px)}18%,44%{opacity:1;transform:translate(0,0)}46.5%,100%{opacity:0;transform:translate(0,0)}}
@keyframes pf-key{0%,19.5%{opacity:0;transform:translate(0,0)}23%,46%{opacity:1;transform:translate(0,0)}51.5%,100%{opacity:0;transform:translate(24px,-30px)}}
@keyframes pf-erased{0%,50.5%{opacity:0}53%,56%{opacity:1}58.5%,100%{opacity:0}}
@keyframes pf-env{0%,45%{opacity:0;transform:translate(-76px,4px)}47%{opacity:1;transform:translate(-76px,4px)}54%,78%{opacity:1;transform:translate(0,0)}82%,100%{opacity:0;transform:translate(0,0)}}
@keyframes pf-bit{0%,29%{opacity:0;transform:translate(0,0)}31%{opacity:1;transform:translate(0,0)}37%{opacity:1;transform:translate(0,96px)}39%,100%{opacity:0;transform:translate(0,108px)}}
@keyframes pf-row{0%,34%{opacity:0}37%,85%{opacity:1}88.5%,100%{opacity:0}}
@keyframes pf-vglow{0%,57%{opacity:0}60%,69%{opacity:.55}72.5%,100%{opacity:0}}
@keyframes pf-nokey{0%,57%{opacity:.7}60%,69%{opacity:1}72.5%,100%{opacity:.7}}
@keyframes pf-eye{0%,57.5%{opacity:0}61%,69%{opacity:1}72.5%,100%{opacity:0}}
@keyframes pf-rkey{0%,71.5%{opacity:0;transform:translate(0,-12px)}75%,93%{opacity:1;transform:translate(0,0)}97%,100%{opacity:0;transform:translate(0,0)}}
@keyframes pf-out{0%,74%{opacity:0;transform:translate(-214px,50px)}76%{opacity:1;transform:translate(-214px,50px)}81.5%{transform:translate(0,0)}94%{opacity:1;transform:translate(0,0)}98%,100%{opacity:0;transform:translate(0,0)}}
@keyframes pf-oshk{0%,81.5%{transform:translate(0,0)}84%,100%{transform:translate(0,-6px)}}
@keyframes pf-ok{0%,83.5%{opacity:0}86%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes pf-timer{0%,86%{opacity:0}88.5%,98%{opacity:1}100%{opacity:0}}
@keyframes pf-hand{0%,87%{transform:rotate(0)}97%,100%{transform:rotate(330deg)}}
@keyframes pf-del{0%,92%{opacity:0}94%,98.5%{opacity:1}100%{opacity:0}}
@media (max-width:599px){.ld-protect{padding:var(--sp-6) 0}.pf-steps li{padding:var(--sp-3);font-size:.95rem}.pf-sum{border-radius:var(--r);font-size:1rem;padding:var(--sp-4)}}
@media (forced-colors:active){.pf-steps li{border:2px solid CanvasText}}