.viral-speed-gauge{
  --vsg-accent:#00ffe1;
  --vsg-light:#7ffff6;
  --vsg-dark:#071417;
  --vsg-glow:28px;
  --vsg-level:0;
  --vsg-heat:0;
  max-width:100%;
  margin-inline:auto;
  position:relative;
}

.viral-speed-gauge svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

/* A skála alap glow-ja. A --vsg-heat értékét a JS 0 és 1 között mozgatja. */
.vsg-outer-glow{
  fill:none;
  stroke:var(--vsg-accent);
  stroke-width:calc(34px + (var(--vsg-heat) * 18px));
  stroke-linecap:round;
  opacity:calc(.48 + (var(--vsg-heat) * .42));
  filter:
    drop-shadow(0 0 calc((var(--vsg-glow) * .55) + (var(--vsg-heat) * 15px)) var(--vsg-accent))
    drop-shadow(0 0 calc((var(--vsg-glow) * .2) + (var(--vsg-heat) * 30px)) var(--vsg-light));
  transition:stroke-width .12s linear,opacity .12s linear,filter .12s linear;
}

.vsg-outer-line{
  fill:none;
  stroke:var(--vsg-light);
  stroke-width:7;
  stroke-linecap:round;
  opacity:calc(.78 + (var(--vsg-heat) * .22));
  filter:drop-shadow(0 0 calc(3px + (var(--vsg-heat) * 8px)) var(--vsg-light));
}

.vsg-inner-line{
  fill:none;
  stroke:var(--vsg-accent);
  stroke-width:5;
  stroke-linecap:round;
  opacity:calc(.72 + (var(--vsg-heat) * .28));
  filter:drop-shadow(0 0 calc((var(--vsg-glow) * .2) + (var(--vsg-heat) * 10px)) var(--vsg-accent));
}

.vsg-segment{
  fill:var(--vsg-dark);
  stroke:var(--vsg-accent);
  stroke-width:2;
  opacity:calc(.60 + (var(--vsg-heat) * .30));
  filter:drop-shadow(0 0 calc(var(--vsg-heat) * 9px) var(--vsg-accent));
  transition:opacity .12s linear,filter .12s linear;
}

.vsg-segment-1{opacity:calc(.56 + (var(--vsg-heat) * .28))}
.vsg-segment-2{opacity:calc(.61 + (var(--vsg-heat) * .29))}
.vsg-segment-3{opacity:calc(.66 + (var(--vsg-heat) * .30))}
.vsg-segment-4{opacity:calc(.71 + (var(--vsg-heat) * .29))}
.vsg-segment-5,
.vsg-segment-6,
.vsg-segment-7,
.vsg-segment-8,
.vsg-segment-9{
  fill:var(--vsg-accent);
  opacity:calc(.48 + (var(--vsg-heat) * .48));
  filter:
    drop-shadow(0 0 calc((var(--vsg-glow) * .18) + (var(--vsg-heat) * 12px)) var(--vsg-accent))
    drop-shadow(0 0 calc(var(--vsg-heat) * 18px) var(--vsg-light));
}

/* Mozgó fényfoltok a két világos íven. */
.vsg-runner{
  fill:none;
  stroke:var(--vsg-light);
  stroke-linecap:round;
  pathLength:100;
  pointer-events:none;
  opacity:.98;
  filter:
    drop-shadow(0 0 5px var(--vsg-light))
    drop-shadow(0 0 11px var(--vsg-accent));
}

.vsg-runner--outer{
  stroke-width:10;
  stroke-dasharray:3.8 96.2;
  animation:vsgRunnerOuter 2.15s ease-in-out infinite alternate;
}

.vsg-runner--inner{
  stroke-width:8;
  stroke-dasharray:3.2 96.8;
  animation:vsgRunnerInner 2.75s ease-in-out infinite alternate-reverse;
}

@keyframes vsgRunnerOuter{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}

@keyframes vsgRunnerInner{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-100}
}

.vsg-needle-group{
  transform-origin:500px 455px;
  will-change:transform;
}

.vsg-needle-shadow{
  fill:rgba(0,255,225,.18);
  filter:blur(10px);
}

.vsg-needle{
  stroke:var(--vsg-light);
  stroke-width:2;
  filter:drop-shadow(0 0 calc(var(--vsg-glow)*.45) var(--vsg-accent));
}

.vsg-hub-outer{fill:#061316;stroke:var(--vsg-accent);stroke-width:5}
.vsg-hub-mid{fill:var(--vsg-accent);opacity:.85}
.vsg-hub-core{fill:#031012;stroke:var(--vsg-light);stroke-width:3}

@media(max-width:767px){
  .viral-speed-gauge{width:100%!important}
  .vsg-outer-glow{stroke-width:calc(26px + (var(--vsg-heat) * 14px))}
  .vsg-outer-line{stroke-width:6}
  .vsg-runner--outer{stroke-width:8}
  .vsg-runner--inner{stroke-width:7}
}

@media (prefers-reduced-motion: reduce){
  .vsg-runner{animation-duration:5s}
}