/* Home page: DDoS protection section (animated). Loaded after grid-design.css. */
#shield .shield-stage{
  position:relative; height:380px; border:1px solid var(--line); border-radius:var(--r-xl);
  background:radial-gradient(120% 90% at 52% 50%, rgba(224,145,47,.10), transparent 60%), #0e0a07;
  overflow:hidden;
}
#shield canvas{ display:block; width:100%; height:100% }
.shield-tag{
  position:absolute; bottom:16px; font:600 11px/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.shield-tag.t-in{ left:20px }
.shield-tag.t-mid{ left:62%; transform:translateX(-50%); color:var(--jade) }
.shield-hud{
  position:absolute; top:16px; right:18px; width:min(200px, 34%); padding:12px 14px 10px;
  border:1px solid var(--line); border-radius:var(--r-md); background:rgba(10,7,5,.72); backdrop-filter:blur(6px);
}
.hud-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font:500 10.5px/1 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.hud-row b{ font-weight:700; color:#ff8a7c; letter-spacing:.08em }
.hud-row.hud-ok b{ color:#9bd68a }
.hud-bar{ height:5px; border-radius:99px; background:rgba(244,231,216,.1); overflow:hidden; margin-bottom:12px }
.hud-bar i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#e0912f,#ff5a4a); transition:width .25s linear }
.hud-bar-ok{ margin-bottom:8px }
.hud-bar-ok i{ width:92%; background:linear-gradient(90deg,#5fa653,#9bd68a); animation:hudOk 3s ease-in-out infinite }
@keyframes hudOk{ 50%{ width:97% } }
.shield-hud .shield-note{ position:static; margin:0; text-align:right; font-size:10px; letter-spacing:.06em }
@media (max-width:620px){ .shield-hud{ display:none } .shield-tag.t-in{ display:none } .shield-tag.t-mid{ left:76% } }
.shield-state{
  position:absolute; top:16px; left:20px; display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:rgba(10,7,5,.7); font:600 11px/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.shield-state i{ width:8px; height:8px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 0 rgba(224,145,47,.6); animation:shieldPing 1.6s var(--ease) infinite }
.shield-state[data-s="detect"] i, .shield-state[data-s="block"] i{ background:#ff5a4a; box-shadow:0 0 0 0 rgba(255,90,74,.6) }
.shield-note{ position:absolute; top:20px; right:20px; font:500 11px/1 var(--font-ui); letter-spacing:.1em; color:var(--faint) }
@keyframes shieldPing{ 70%{ box-shadow:0 0 0 9px rgba(224,145,47,0) } 100%{ box-shadow:0 0 0 0 rgba(224,145,47,0) } }

.shield-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; margin-top:18px }
.shield-steps{ display:grid; gap:12px; counter-reset:st }
.shield-step{
  position:relative; padding:20px 22px 20px 74px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:#120d0a; overflow:hidden; counter-increment:st;
}
.shield-step::before{
  content:"0" counter(st); position:absolute; left:20px; top:18px; width:38px; height:38px; display:grid; place-items:center;
  border-radius:var(--r-md); border:1px solid rgba(224,145,47,.45); background:rgba(224,145,47,.1);
  font:600 13px/1 var(--font-ui); color:var(--jade);
}
.shield-step::after{                      /* slow shimmer that walks down the three steps */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(224,145,47,.10) 50%, transparent 70%);
  transform:translateX(-120%); animation:shieldSweep 6s var(--slow) infinite;
}
.shield-step:nth-child(2)::after{ animation-delay:2s }
.shield-step:nth-child(3)::after{ animation-delay:4s }
@keyframes shieldSweep{ 0%{ transform:translateX(-120%) } 28%,100%{ transform:translateX(120%) } }
.shield-step h3{ margin:0 0 6px; font-size:1.05rem }
.shield-step p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.55 }
.shield-step b{ color:var(--ink); font-weight:600 }

.shield-log{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:#0b0806; overflow:hidden;
}
.shield-log-head{
  display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line);
  font:600 11px/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.shield-log-head span{ margin-left:auto; color:var(--faint); font-weight:500; letter-spacing:.06em; text-transform:none }
.shield-log-head i{ width:8px; height:8px; border-radius:50%; background:#3a2f27 }
.shield-log-head i:nth-child(1){ background:#ff5a4a } .shield-log-head i:nth-child(2){ background:#e0912f } .shield-log-head i:nth-child(3){ background:#7fbf6a }
#shieldLog{ flex:1; min-height:196px; padding:14px 16px; font:500 12.5px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow:hidden }
.log-line{ display:flex; gap:10px; white-space:nowrap; animation:logIn .45s var(--ease) both }
.log-line i{ font-style:normal; color:var(--faint) }
.log-line b{ min-width:62px; font-weight:600 }
.log-line span{ overflow:hidden; text-overflow:ellipsis }
.log-ok b{ color:#7fbf6a } .log-warn b{ color:#e0912f } .log-bad b{ color:#ff5a4a }
.log-ok span{ color:var(--ink) } .log-warn span{ color:#e9c58f } .log-bad span{ color:#ffb0a8 }
#shieldLog::after{ content:"_"; color:var(--jade); animation:blink 1s steps(1) infinite }
@keyframes logIn{ from{ opacity:0; transform:translateX(-10px) } to{ opacity:1; transform:none } }
@keyframes blink{ 50%{ opacity:0 } }

.shield-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.shield-chips li{
  list-style:none; display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 12px;
  border:1px solid var(--line); border-radius:var(--r-pill); font-size:13.5px; font-weight:500; color:var(--ink); background:#ffffff08;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.shield-chips li:hover{ border-color:rgba(224,145,47,.6); background:rgba(224,145,47,.08); transform:translateY(-2px) }
.shield-chips svg{ width:16px; height:16px; color:var(--jade); flex:none }
.shield-chips{ padding:0; margin-bottom:0 }

@media (max-width:900px){
  .shield-grid{ grid-template-columns:1fr }
  #shield .shield-stage{ height:320px }
}
@media (max-width:520px){
  .shield-note{ display:none }
  .shield-step{ padding:18px 18px 18px 66px }
  .shield-step::before{ left:16px }
}
@media (prefers-reduced-motion:reduce){
  .shield-step::after, .shield-state i, .log-line, #shieldLog::after{ animation:none }
}