/* Camelot feature widgets — one code-drawn demo per feature type.
   Usage: <div data-widget="esp"></div> + widgets.js, or renderWidget(el, 'esp').
   Every animated element carries .a; it runs only while the widget is on screen (.w-play).
   Base styles are the representative final frame, so reduced motion shows a complete picture. */
.wdg{
  --w-sight:#e4eef4; --w-gold:#efe3ba; --w-ember:#e0a35e; --w-dim:#8d98a6; --w-faint:#5d6875;
  --w-fig:#6f7f95; --w-fig-dim:#4b596c; --w-wall:#1d2733; --w-plank:rgba(196,208,222,.12);
  --dur:8s;
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b1119;border:1px solid rgba(196,208,222,.14);
  container-type:inline-size}
.wdg > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wdg text{font-family:'Alegreya Sans','Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.w-fig{fill:var(--w-fig)}
.w-fig.dim{fill:var(--w-fig-dim)}
.w-fig.warm{fill:#7d7262}
.w-fig.ghost{fill:#3a4657}
.w-c{fill:none;stroke:var(--w-sight);stroke-width:1.4;stroke-linecap:square;filter:drop-shadow(0 0 2.5px rgba(228,238,244,.7))}
.w-c.ember{stroke:var(--w-ember);filter:drop-shadow(0 0 2.5px rgba(224,163,94,.7))}
.w-t{font-size:10px;font-weight:700;fill:var(--w-gold)}
.w-t.ember{fill:var(--w-ember)}
.w-d{font-size:9.5px;font-weight:500;fill:var(--w-sight)}
.w-s{font-size:9px;font-weight:500;fill:var(--w-dim)}
.w-cap{font-size:9.5px;font-weight:500;fill:var(--w-dim);letter-spacing:.16em}
.w-capb{font-size:9.5px;font-weight:700;fill:var(--w-gold);letter-spacing:.16em}
.w-hp{fill:rgba(228,238,244,.18)}
.w-hpv{fill:var(--w-sight)}
.w-line{fill:none;stroke:rgba(228,238,244,.55);stroke-width:1}
.w-ring{fill:none;stroke:rgba(228,238,244,.22);stroke-width:1}
.w-dash{fill:none;stroke:rgba(228,238,244,.3);stroke-width:1;stroke-dasharray:3 4}
.w-cross{fill:none;stroke:var(--w-sight);stroke-width:1.4}
.w-dot{fill:var(--w-sight)}
.w-wall{fill:var(--w-wall)}
.w-plank{stroke:var(--w-plank);stroke-width:1}
.w-trees{fill:#0a1019}
.w-moon{fill:#dfe8f0}
.w-panel{fill:rgba(6,9,14,.72);stroke:rgba(196,208,222,.2)}
.a{animation-duration:var(--dur);animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:paused}
.wdg.w-play .a{animation-play-state:running}

/* generic motions */
.a.pop{transform-box:fill-box;transform-origin:center;animation-name:w-pop;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes w-pop{0%,12%{opacity:0;transform:scale(1.35)}22%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
.a.fadein{animation-name:w-fadein}
@keyframes w-fadein{0%,14%{opacity:0}24%,84%{opacity:1}94%,100%{opacity:0}}
.a.draw{stroke-dasharray:1 1;stroke-dashoffset:0;animation-name:w-draw;animation-timing-function:ease-out}
@keyframes w-draw{0%,10%{stroke-dashoffset:1;opacity:1}28%,84%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
.a.wallfade{opacity:.14;animation-name:w-wallfade;animation-timing-function:ease-in-out}
@keyframes w-wallfade{0%,8%{opacity:1}22%,82%{opacity:.14}94%,100%{opacity:1}}

/* aim */
.w-ret{transform-box:view-box;transform-origin:0 0;transform:translate(var(--tx),var(--ty));animation-name:w-aim}
@keyframes w-aim{0%,14%{transform:translate(160px,104px);animation-timing-function:cubic-bezier(.5,0,.2,1)}44%,82%{transform:translate(var(--tx),var(--ty));animation-timing-function:cubic-bezier(.5,0,.2,1)}100%{transform:translate(160px,104px)}}
.a.lock{transform-box:fill-box;transform-origin:center;animation-name:w-lock}
@keyframes w-lock{0%,44%{opacity:0;transform:scale(2)}52%,82%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
.a.late{animation-name:w-late}
@keyframes w-late{0%,46%{opacity:0}54%,82%{opacity:1}90%,100%{opacity:0}}

/* silent aim: a tracer runs the curve while the crosshair stays put */
.a.tracer{stroke-dasharray:12 120;stroke-dashoffset:-120;opacity:0;animation-name:w-tracer;animation-timing-function:linear}
@keyframes w-tracer{0%,18%{stroke-dashoffset:12;opacity:1}40%{stroke-dashoffset:-100;opacity:1}41%,100%{stroke-dashoffset:-120;opacity:0}}
.a.hit{transform-box:fill-box;transform-origin:center;animation-name:w-hit}
@keyframes w-hit{0%,39%{opacity:0;transform:scale(.4)}42%{opacity:1;transform:scale(1.5)}52%,84%{opacity:1;transform:none}94%,100%{opacity:0}}
.a.hitlbl{animation-name:w-hitlbl}
@keyframes w-hitlbl{0%,40%{opacity:0}48%,84%{opacity:1}94%,100%{opacity:0}}

/* trigger: the target walks through a fixed crosshair, the shot fires on contact */
.a.walk{animation-name:w-walk;animation-timing-function:linear}
@keyframes w-walk{0%{transform:translateX(-170px)}100%{transform:translateX(170px)}}
.a.fire{transform-box:fill-box;transform-origin:center;animation-name:w-fire}
@keyframes w-fire{0%,47%{opacity:0;transform:scale(.5)}49%{opacity:1;transform:scale(1.3)}60%{opacity:0;transform:scale(1)}100%{opacity:0}}
.a.firelbl{animation-name:w-firelbl}
@keyframes w-firelbl{0%,47%{opacity:0}49%,72%{opacity:1}80%,100%{opacity:0}}

/* recoil */
.a.spray{transform-box:fill-box;transform-origin:center;animation-name:w-spray;animation-delay:calc(var(--k) * 60ms)}
@keyframes w-spray{0%,3%{opacity:0;transform:translate(var(--sx),var(--sy))}7%,40%{opacity:1;transform:translate(var(--sx),var(--sy));animation-timing-function:cubic-bezier(.6,0,.2,1)}58%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.a.lblA{opacity:0;animation-name:w-lblA}.a.lblB{animation-name:w-lblB}
@keyframes w-lblA{0%,44%{opacity:1}50%,100%{opacity:0}}
@keyframes w-lblB{0%,44%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}

/* chams */
.w-chams{fill:var(--w-gold);filter:url(#wglow)}
.a.chams{animation-name:w-chams}
@keyframes w-chams{0%,10%{opacity:0}24%{opacity:1}50%{opacity:.75}70%,84%{opacity:1}96%,100%{opacity:0}}

/* radar */
.w-sweep{transform-box:view-box;transform-origin:160px 100px;animation-name:w-spin;animation-timing-function:linear}
@keyframes w-spin{to{transform:rotate(360deg)}}
.w-blip{transform-box:fill-box;transform-origin:center;opacity:.45;animation-name:w-blip;animation-timing-function:ease-out}
@keyframes w-blip{0%{opacity:1;transform:scale(1.7)}30%,100%{opacity:.45;transform:none}}

/* vehicle */
.a.drive{animation-name:w-drive;animation-timing-function:ease-in-out}
@keyframes w-drive{0%,100%{transform:translateX(-26px)}50%{transform:translateX(26px)}}
.a.rotor{transform-box:fill-box;transform-origin:center;animation-name:w-rotor;animation-duration:.5s;animation-timing-function:linear}
@keyframes w-rotor{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.15)}}

/* stream */
.a.rec{animation-name:w-rec;animation-duration:1.6s}
@keyframes w-rec{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* spoofer */
.w-id{font-size:11px;font-weight:500;fill:var(--w-sight);letter-spacing:0;text-transform:none}
.w-id.old{fill:var(--w-faint)}
.w-shield{fill:rgba(228,238,244,.06);stroke:var(--w-sight);stroke-width:1.4}
.w-shackle{fill:none;stroke:var(--w-gold);stroke-width:2;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.wdg.w-open .w-shackle{transform:translateY(-5px)}
.w-lockbody{fill:var(--w-gold)}
.w-ok{transition:opacity .3s}
.wdg.w-open .w-ok{opacity:0}

/* movement */
.w-speed{stroke:rgba(228,238,244,.5);stroke-width:1;stroke-linecap:round}

/* misc: the loader menu */
.w-mi{font-size:10.5px;font-weight:500;fill:var(--w-dim);letter-spacing:.02em !important;text-transform:none !important;transition:fill .3s}
.w-mrow.on .w-mi{fill:var(--w-sight)}
.w-tr{fill:rgba(228,238,244,.08);stroke:rgba(196,208,222,.3);stroke-width:1;transition:fill .3s,stroke .3s}
.w-kn{fill:var(--w-dim);transition:transform .3s cubic-bezier(.2,.8,.2,1),fill .3s}
.w-mrow.on .w-tr{fill:rgba(239,227,186,.22);stroke:var(--w-gold)}
.w-mrow.on .w-kn{fill:var(--w-gold);transform:translateX(12px)}
.w-tick{fill:none;stroke:var(--w-gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .35s}
.w-mrow.just .w-tick{opacity:1}
.w-mcur{fill:rgba(228,238,244,.05);stroke:rgba(228,238,244,.16);stroke-width:1;opacity:0;transform:translateY(var(--y));transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.w-mcur.show{opacity:1}
.w-toast{transform:translateY(22px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.w-toast.show{transform:none}

@media (prefers-reduced-motion:reduce){
  .wdg .a,.wdg .w-sweep,.wdg .w-blip{animation:none !important}
  .wdg .a.lblA{opacity:0}
  .wdg .w-blip{opacity:1}
  .wdg .w-mrow *,.wdg .w-mcur,.wdg .w-toast{transition:none}
}