/* The lost fragment, one piece shared by every page: loose scraps of code (bytes, brackets, ones and zeros) that float close
   together and drift slowly around the screen, shedding little 1s and 0s. Every so often they pull in and spell
   "WE ARE STILL HERE", then break apart again. Decoration only: it never takes the pointer. The Arena does not use it. */
.code-frag{position:fixed;left:0;top:0;z-index:6;pointer-events:none;opacity:.9;will-change:transform;transition:transform 14s cubic-bezier(.45,.05,.55,.95)}
.code-frag .cf-drift{position:relative;width:150px;height:60px;animation:cf-bob 6s ease-in-out infinite}
.code-frag .cf-cloud{position:absolute;inset:0;transition:opacity .45s}
.code-frag .cf-cloud span{position:absolute;font:800 18px/1 "Courier New",ui-monospace,monospace;color:#eafcff;text-shadow:0 0 6px #65faff,0 0 14px rgba(101,250,255,.7);animation:cf-float 5s ease-in-out infinite,cf-flick 7s steps(1,end) infinite}
.code-frag .cf-cloud span.o{color:#ffc79a;text-shadow:0 0 6px #ff7a18,0 0 14px rgba(255,122,24,.7)}
.code-frag .cf-say{position:absolute;left:0;top:0;white-space:pre;font:800 14px/1.25 "Courier New",ui-monospace,monospace;letter-spacing:.2em;color:#fff;
  text-shadow:0 0 6px #fff,0 0 14px #65faff,0 0 24px rgba(255,122,24,.7);opacity:0;transition:opacity .4s}
.code-frag.speaking .cf-say{opacity:1}
.code-frag.speaking .cf-cloud{opacity:.06}
@keyframes cf-float{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--fx,4px),var(--fy,-6px))}}
@keyframes cf-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes cf-flick{0%,60%,64%,100%{opacity:1}61%{opacity:.3}62%{opacity:.95}63%{opacity:.45}}
.cf-bit{position:fixed;left:0;top:0;z-index:6;pointer-events:none;font:700 10px/1 "Courier New",monospace;color:#bff8ff;text-shadow:0 0 6px #65faff;opacity:0;animation:cf-bit 2.4s ease-out forwards}
.cf-bit.o{color:#ffd0a0;text-shadow:0 0 6px #ff7a18}
.cf-bit.w{color:#fff}
@keyframes cf-bit{0%{opacity:.9;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx,-30px),var(--dy,-20px))}}

/* it answers where it is held (the Map sets these when you open a place) */
.code-frag[data-react="archives"] .cf-cloud span{color:#efe3ff;text-shadow:0 0 6px #c6a0ff,0 0 16px rgba(198,160,255,.9)}
.code-frag[data-react="forge"] .cf-cloud span{color:#ffd0a0;text-shadow:0 0 6px #ff3b42,0 0 14px rgba(255,59,66,.8)}
.code-frag[data-react="terminus"] .cf-cloud span{color:#ffe2c4;text-shadow:0 0 6px #ff7a18,0 0 18px rgba(255,122,24,.95)}
.code-frag[data-react="watchtower"] .cf-cloud span,.code-frag[data-react="gateway"] .cf-cloud span{color:#fff;text-shadow:0 0 6px #fff,0 0 16px #65faff}
.code-frag[data-react="outer"] .cf-cloud span{animation:cf-float 5s ease-in-out infinite,cf-zap .5s steps(1,end) infinite}
@keyframes cf-zap{0%,30%,60%,100%{opacity:1}10%,40%{opacity:.2}20%{opacity:.9}50%{opacity:.5}}

html[data-time="dusk"] .code-frag{opacity:.78}
html[data-time="night"] .code-frag{opacity:.62}
@media(max-width:700px){.code-frag .cf-drift{width:120px;height:50px}.code-frag .cf-cloud span{font-size:15px}.code-frag .cf-say{font-size:11px}}
@media(prefers-reduced-motion:reduce){.code-frag,.code-frag .cf-drift,.code-frag .cf-cloud span{animation:none;transition:none}.cf-bit{display:none}}

/* the older per-page fragments are retired: this one replaces them everywhere */
.home-frag,.vista-frag,.about-frag,.archive-frag,.fragment-layer{display:none!important}

/* the storm moment */
.cf-storm{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0}
.cf-storm.on{animation:cf-storm 7s ease-in-out forwards}
.cf-storm i{position:absolute;top:0;bottom:0;width:12%;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(255,255,255,.07) 13px 15px),linear-gradient(90deg,rgba(214,232,255,.3),rgba(198,160,255,.14) 45%,transparent)}
.cf-storm i:first-child{left:0}
.cf-storm i:nth-child(2){right:0;transform:scaleX(-1)}
.cf-storm b{position:absolute;color:#dfe9ff;font:700 12px "Courier New",monospace;text-shadow:0 0 8px rgba(198,160,255,.9),0 0 3px #fff;opacity:0}
.cf-storm.on b{animation:cf-mark 1.6s steps(1,end) infinite}
.cf-storm b:nth-child(3){left:2.5%;top:22%}
.cf-storm b:nth-child(4){left:6%;top:48%;animation-delay:-.5s}
.cf-storm b:nth-child(5){left:3%;top:72%;animation-delay:-1s}
.cf-storm b:nth-child(6){right:3%;top:30%;animation-delay:-.3s}
.cf-storm b:nth-child(7){right:6.5%;top:56%;animation-delay:-.8s}
.cf-storm b:nth-child(8){right:2.5%;top:78%;animation-delay:-1.3s}
@keyframes cf-storm{0%{opacity:0}18%{opacity:.8}70%{opacity:.7}100%{opacity:0}}
@keyframes cf-mark{0%,30%,100%{opacity:0}10%{opacity:1}20%{opacity:.2}60%{opacity:.9}}
html[data-time="night"] .cf-storm{filter:brightness(.7)}
@media(prefers-reduced-motion:reduce){.cf-storm{display:none}}