/* ---- Traffic Guard: floating threat symbols behind the hero ---- */
.tgfield{position:absolute;inset:-10% 0 0 0;overflow:hidden;pointer-events:none;z-index:0}
.tgfield span{position:absolute;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:30%;border:1px solid rgba(186,216,250,.16);background:rgba(44,74,105,.24);backdrop-filter:blur(6px);color:var(--el-soft);opacity:0;animation:var(--anim) var(--d) ease-in-out infinite;animation-delay:var(--dl);will-change:transform,opacity}
.tgfield span.g{border-color:rgba(255,198,75,.3);background:rgba(255,198,75,.1);color:var(--gold)}
.tgfield span.r{border-color:rgba(255,120,120,.3);background:rgba(255,90,90,.1);color:#FF9A9A}
.tgfield span.big{border-width:1.5px}
.tgfield svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tgfield span.big svg{stroke-width:1.4}
.tgfield span::after{content:attr(data-l);position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:var(--m);font-size:9.5px;letter-spacing:.06em;color:var(--faint);white-space:nowrap;opacity:.7}
.tgfield span.big::after{font-size:11px;bottom:-22px}

/* rising drift, gentle sway */
@keyframes tgrise{
  0%{transform:translate3d(0,30vh,0) rotate(-6deg) scale(.82);opacity:0}
  10%{opacity:var(--o)}
  50%{transform:translate3d(var(--dx),-20vh,0) rotate(5deg) scale(1.05)}
  90%{opacity:var(--o)}
  100%{transform:translate3d(calc(var(--dx) * 1.5),-75vh,0) rotate(-4deg) scale(.88);opacity:0}
}
/* side-to-side patrol with breathing scale */
@keyframes tgsway{
  0%{transform:translate3d(-8vw,0,0) rotate(-8deg) scale(.8);opacity:0}
  12%{opacity:var(--o)}
  35%{transform:translate3d(6vw,-6vh,0) rotate(6deg) scale(1.15)}
  65%{transform:translate3d(-4vw,-12vh,0) rotate(-5deg) scale(.9)}
  88%{opacity:var(--o)}
  100%{transform:translate3d(10vw,-18vh,0) rotate(7deg) scale(1.05);opacity:0}
}
/* falling and bouncing back up, like a blocked request */
@keyframes tgbounce{
  0%{transform:translate3d(0,-10vh,0) scale(.7) rotate(0);opacity:0}
  15%{opacity:var(--o)}
  45%{transform:translate3d(var(--dx),25vh,0) scale(1.2) rotate(12deg)}
  60%{transform:translate3d(calc(var(--dx) * .8),18vh,0) scale(1) rotate(-6deg)}
  85%{opacity:var(--o)}
  100%{transform:translate3d(calc(var(--dx) * 1.3),-30vh,0) scale(.75) rotate(4deg);opacity:0}
}
#top.tghero{position:relative;isolation:isolate;overflow:visible}
#top.tghero>*:not(.tgfield){position:relative;z-index:1}
#top.tghero .dmock{box-shadow:0 60px 120px -50px rgba(3,9,18,.95),0 0 0 1px rgba(255,198,75,.12)}
@media(prefers-reduced-motion:reduce){.tgfield span{animation:none;opacity:.3;transform:none}}
@media(max-width:720px){.tgfield span:nth-child(n+11){display:none}.tgfield span.big{--s:48px!important}}

/* live shield meter in the mock */
.tgm{display:grid;gap:10px}
.tgrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 13px;border-radius:12px;border:1px solid rgba(186,216,250,.14);background:rgba(44,74,105,.26)}
.tgrow i{width:9px;height:9px;border-radius:50%;background:#FF7A7A;box-shadow:0 0 10px rgba(255,122,122,.7)}
.tgrow i.ok{background:#4ADE80;box-shadow:0 0 10px rgba(74,222,128,.7)}
.tgrow i.g{background:var(--gold);box-shadow:0 0 10px rgba(255,198,75,.7)}
.tgrow b{font-family:var(--m);font-size:12px;font-weight:500;color:var(--soft);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgrow small{display:block;font-family:var(--u);font-size:11.5px;color:var(--faint);margin-top:2px}
.tgrow em{font-style:normal;font-family:var(--m);font-size:11px;padding:4px 8px;border-radius:6px;border:1px solid rgba(255,120,120,.3);background:rgba(255,90,90,.1);color:#FF9A9A;white-space:nowrap}
.tgrow em.ok{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.1);color:#86EFAC}
.tgrow em.g{border-color:rgba(255,198,75,.32);background:rgba(255,198,75,.12);color:var(--gold-hi)}
.tgbar{margin-top:6px;height:6px;border-radius:999px;background:rgba(186,216,250,.12);overflow:hidden}
.tgbar i{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(90deg,var(--el),var(--el-soft));animation:tgpulse 2.8s ease-in-out infinite}
@keyframes tgpulse{0%,100%{opacity:.7}50%{opacity:1}}