/* XCS7 FX — Web3 type + living chain borders (shared) */
:root{
  --f-display:"Unbounded","Space Grotesk","Arial Black",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-body:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --holo:linear-gradient(100deg,#ffffff 0%,#d9fbfd 18%,#3fe0e8 38%,#ffffff 52%,#c9d4cf 66%,#b7c84a 84%,#ffffff 100%);
}
/* T1 — holographic headings */
.holo{background:var(--holo);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fxShine 7s linear infinite}
@keyframes fxShine{from{background-position:0% 0}to{background-position:-260% 0}}
/* T2 — terminal glow for data */
.glow{color:#eafffe;text-shadow:0 0 6px rgba(63,224,232,.55),0 0 16px rgba(63,224,232,.22)}
.glow-g{color:#eaffdf;text-shadow:0 0 6px rgba(125,220,90,.6),0 0 16px rgba(125,220,90,.25)}
/* T3 — chromatic glitch (one-off accents) */
.glitch{animation:fxGlitch 5s infinite}
@keyframes fxGlitch{0%,90%,100%{transform:none;filter:none}
  91%{transform:translateX(2px) skewX(-4deg);filter:drop-shadow(-3px 0 rgba(255,61,240,.85)) drop-shadow(3px 0 rgba(63,224,232,.85))}
  93%{transform:translateX(-2px);filter:drop-shadow(3px 0 rgba(255,61,240,.85)) drop-shadow(-3px 0 rgba(63,224,232,.85))}
  95%{transform:none;filter:none}}

/* B1 — chain frame with travelling packets */
.fx-frame{position:absolute;left:-1px;top:-1px;pointer-events:none;overflow:visible;z-index:1}
.fx-frame rect{fill:none;stroke-linecap:butt}
.fx-base{stroke:rgba(63,224,232,.20);stroke-width:1;stroke-dasharray:7 4}
.fx-pk{stroke:#3fe0e8;stroke-width:2;filter:drop-shadow(0 0 3px #3fe0e8);animation:fxRun 11s linear infinite}
.fx-pk2{stroke:#7ddc5a;stroke-width:2;filter:drop-shadow(0 0 3px #7ddc5a);animation:fxRun 11s linear infinite;animation-delay:-5.5s}
.fx-bu{stroke:#ffffff;stroke-width:2.5;opacity:0;filter:drop-shadow(0 0 5px #3fe0e8) drop-shadow(0 0 10px #3fe0e8)}
.fx-bu.go{animation:fxBurst 1.7s cubic-bezier(.3,.1,.3,1) 1}
@keyframes fxRun{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(-1 * var(--per,1000px))}}
@keyframes fxBurst{0%{opacity:1;stroke-dashoffset:0}85%{opacity:.9}100%{opacity:0;stroke-dashoffset:calc(-1 * var(--per,1000px))}}
/* B2 — hash trail */
.fx-hash text{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.6px;fill:#3fe0e8;opacity:.75}
/* B3 — comet border (wrapper needs .comet, child .comet-in) */
.comet{position:relative;overflow:hidden;padding:2px;background:rgba(63,224,232,.18);isolation:isolate}
.comet::before{content:"";position:absolute;left:50%;top:50%;width:300%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(63,224,232,.25) 74%,#3fe0e8 91%,#ffffff 95%,transparent 96%);animation:fxSpin 4.5s linear infinite}
@keyframes fxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.comet-in{position:relative;display:block}
.nodes{position:relative}
.nodes>.nd{position:absolute;width:7px;height:7px;background:#3fe0e8;box-shadow:0 0 8px #3fe0e8;z-index:3;animation:fxNode 2.4s ease-in-out infinite;pointer-events:none}
.nodes>.nd.a{top:-3px;left:-3px}.nodes>.nd.b{top:-3px;right:-3px;animation-delay:-.6s}.nodes>.nd.c{bottom:-3px;left:-3px;animation-delay:-1.2s}.nodes>.nd.d{bottom:-3px;right:-3px;animation-delay:-1.8s}
@keyframes fxNode{50%{opacity:.25;box-shadow:none}}

/* pause when off-screen / tab hidden / reduced motion */
.fx-off *,.fx-off::before,.fx-off .fx-frame *{animation-play-state:paused!important}
.fx-hidden *,.fx-hidden *::before,.fx-hidden *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .holo,.glitch,.comet::before,.nodes>.nd,.fx-pk,.fx-pk2{animation:none!important}
}