/* The broken fragment of old code from "The Name in the Storm", drifting all around the Map.
   Scorched at the edges, trailing sparks, flickering, with a flash of electricity now and then.
   Decoration only: it ignores the pointer and sits behind the place labels. */
.fragment-layer{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.frag{position:absolute;left:50%;top:16%;width:6.4%;min-width:40px;max-width:84px;transform:translate(-50%,-50%);
  animation:fragment-wander 96s infinite both;will-change:left,top}
.frag-body{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 3px #65faff) drop-shadow(0 0 9px rgba(101,250,255,.75));
  animation:fragment-bob 5.5s ease-in-out infinite,fragment-glow 7s steps(1,end) infinite}
.frag-body .thread{fill:none;stroke:#eaffff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.frag-body .scorch{fill:none;stroke:#ff7a18;stroke-width:1.8;stroke-linecap:round}
.frag-body .glyph{fill:#65faff;font:700 6px "Courier New",monospace;opacity:.85}
.frag-body .arc{fill:none;stroke:#fff;stroke-width:1.1;stroke-linejoin:miter;opacity:0;animation:fragment-arc 7s steps(1,end) infinite}
.frag-body .arc2{stroke:#ff4fa8;animation-delay:-3.1s;animation-duration:11s}
.frag-body .flick{animation:fragment-flicker 3.3s steps(1,end) infinite}
.frag-spark{width:5px;min-width:0;height:5px;border-radius:50%;background:#eaffff;box-shadow:0 0 6px #65faff,0 0 12px rgba(101,250,255,.7)}
.frag-spark.s1{animation-delay:1.3s;opacity:.85}
.frag-spark.s2{animation-delay:2.6s;width:4px;height:4px;opacity:.65;background:#ffb27a;box-shadow:0 0 6px #ff7a18}
.frag-spark.s3{animation-delay:4s;width:3px;height:3px;opacity:.5}

/* The one line of the fragment anyone could read: DOT found it in the noise. It surfaces now and then, glitches, and breaks up. */
.frag-msg{position:absolute;left:50%;top:100%;margin-top:6px;transform:translateX(-50%);white-space:nowrap;
  font:700 clamp(8px,1.05vw,12px) "Courier New",monospace;letter-spacing:.24em;color:#fff;
  text-shadow:-1px 0 #65faff,1px 0 #ff7a18,0 0 8px rgba(101,250,255,.8);opacity:0;
  clip-path:inset(0 100% 0 0);animation:fragment-msg 24s linear infinite}
@keyframes fragment-msg{
  0%,47%{opacity:0;clip-path:inset(0 100% 0 0)}
  48%{opacity:1;clip-path:inset(0 85% 0 0)}
  50%{clip-path:inset(0 45% 0 0)}
  52%{clip-path:inset(0 0 0 0)}
  56%{opacity:1}
  57%{opacity:.25}
  58%{opacity:1;transform:translateX(-50%) skewX(-12deg)}
  59%{transform:translateX(-50%)}
  62%{opacity:1;clip-path:inset(0 0 0 0)}
  63%{opacity:.3;clip-path:inset(0 0 55% 0)}
  64%{opacity:.9;clip-path:inset(40% 0 0 0)}
  65%{opacity:.4;clip-path:inset(0 0 0 100%)}
  66%,100%{opacity:0;clip-path:inset(0 0 0 100%)}
}
@keyframes fragment-wander{
  0%{left:50%;top:16%}
  8%{left:40%;top:24%}
  16%{left:31%;top:38%}
  24%{left:21%;top:21%}
  32%{left:9%;top:40%}
  40%{left:21%;top:60%}
  48%{left:39%;top:70%}
  56%{left:50%;top:56%}
  64%{left:62%;top:72%}
  72%{left:80%;top:62%}
  80%{left:91%;top:38%}
  88%{left:70%;top:36%}
  94%{left:66%;top:13%}
  100%{left:50%;top:16%}
}
@keyframes fragment-bob{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-4px) rotate(7deg)}
}
@keyframes fragment-glow{
  0%,34%,38%,71%,74%,100%{opacity:.82}
  35%,72%{opacity:.35}
  36%,73%{opacity:1}
  37%{opacity:.5}
}
@keyframes fragment-flicker{
  0%,60%,64%,100%{opacity:1}
  61%{opacity:.25}
  62%{opacity:.9}
  63%{opacity:.4}
}
@keyframes fragment-arc{
  0%,8%,12%,41%,46%,83%,87%,100%{opacity:0}
  9%{opacity:1}
  10%{opacity:.2}
  11%{opacity:1}
  42%,84%{opacity:1}
  43%{opacity:.1}
  44%{opacity:.9}
  45%{opacity:.3}
  85%{opacity:.7}
  86%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .frag,.frag-body,.frag-body .arc,.frag-body .flick{animation:none}
  .frag{left:50%;top:30%}
  .frag-spark{display:none}
  .frag-msg{animation:none;opacity:0}
}