/* SVG demo panel above the homepage banner slider. */
.aim-demo-section { width: 100%; }
.aim-demo {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 17px;
  isolation: isolate;
  background: #0a0f1a;
  box-shadow: 0 18px 50px rgba(8, 14, 27, .18);
}
.aim-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.aim-glow {
  position: absolute; z-index: 0; inset: 12% 14%; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--primary) 16%, transparent), transparent 68%);
  filter: blur(24px);
}
.aim-grain {
  position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .12;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.045) 4px);
}
.ad-panel { fill: #0d1422; stroke: #263247; }
.ad-divider { fill: none; stroke: rgba(178,194,219,.12); }
.ad-horizon { fill: none; stroke: color-mix(in srgb, var(--primary) 30%, transparent); stroke-width: 1; }
.ad-grid path { fill: none; stroke: rgba(117,145,182,.12); stroke-width: 1; }
.ad-shafts path { opacity: .7; }
.ad-tracer { stroke: color-mix(in srgb, var(--primary) 46%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.ad-target { transition: opacity .18s ease, filter .18s ease; }
.ad-shadow { fill: rgba(0,0,0,.34); }
.ad-bone, .ad-bone-head, .ad-box path { fill: none; stroke: var(--primary); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.ad-bone-head { fill: color-mix(in srgb, var(--primary) 8%, transparent); }
.ad-joint { fill: var(--primary); }
.ad-hp-track { fill: rgba(255,255,255,.16); }
.ad-hp-fill { fill: #79c99a; }
.ad-target .ad-bone, .ad-target .ad-bone-head, .ad-target .ad-box path,
.ad-target .ad-joint, .ad-target .ad-hp-fill { transition: stroke .32s ease, fill .32s ease, stroke-width .32s ease; }
.ad-dist { fill: #d7dfeb; font: 9px Pretendard, sans-serif; text-anchor: middle; }
.ad-aim { transform-box: view-box; }
.ad-fov { fill: color-mix(in srgb, var(--primary) 2.5%, transparent); stroke: color-mix(in srgb, var(--primary) 48%, transparent); stroke-width: 1; stroke-dasharray: 4 5; }
.ad-snap { fill: none; stroke: color-mix(in srgb, var(--primary) 28%, transparent); stroke-width: 1; }
.ad-cross { fill: none; stroke: var(--primary); stroke-width: 1.3; stroke-linecap: round; }
.ad-dot { fill: var(--primary); }
.ad-radar-bg { fill: rgba(7,12,21,.84); stroke: color-mix(in srgb, var(--primary) 38%, transparent); stroke-width: 1; }
.ad-radar-ring { fill: none; stroke: color-mix(in srgb, var(--primary) 30%, transparent); stroke-width: 1; }
.ad-radar-ring--inner { stroke: color-mix(in srgb, var(--primary) 16%, transparent); }
.ad-radar-cross { fill: none; stroke: color-mix(in srgb, var(--primary) 18%, transparent); stroke-width: 1; }
.ad-radar-sweep { transform-origin: 0 0; animation: ad-radar-turn 7s linear infinite; }
.ad-blip { fill: var(--primary); }
.ad-blip--locked { fill: #ff727b; }
.ad-radar-self { fill: #eff3fa; }
.ad-chrome, .ad-foot { fill: #aab6c8; font-family: Pretendard, sans-serif; }
.ad-dot-win--1 { fill: #e7837f; }
.ad-dot-win--2 { fill: var(--primary); }
.ad-dot-win--3 { fill: #7fc59b; }
.ad-brand { fill: #edf1f7; font-size: 12px; font-weight: 700; letter-spacing: .35px; }
.ad-feature rect { fill: rgba(255,255,255,.035); stroke: rgba(180,194,216,.16); }
.ad-feature circle { fill: #69778d; }
.ad-feature text { fill: #aab6c8; font-size: 8px; font-weight: 600; letter-spacing: .6px; }
.ad-feature--active rect { fill: color-mix(in srgb, var(--primary) 10%, transparent); stroke: color-mix(in srgb, var(--primary) 38%, transparent); }
.ad-feature--active circle { fill: var(--primary); }
.ad-feature--active text { fill: var(--primary); }
.ad-hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.ad-target--hover { filter: drop-shadow(0 0 6px rgba(83, 214, 246, .5)); }
.ad-target--hover .ad-bone,
.ad-target--hover .ad-bone-head,
.ad-target--hover .ad-box path { stroke: #55d8f7; stroke-width: 1.8; }
.ad-target--hover .ad-joint { fill: #c1f5ff; }
.ad-target--hover .ad-hp-fill { fill: #55d8f7; }
.ad-blip--hover { fill: #55d8f7; stroke: rgba(85,216,247,.65); stroke-width: 5; }
@keyframes ad-radar-turn { to { rotate: 360deg; } }
@media (max-width: 600px) {
  .aim-demo { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-aim, .ad-radar-sweep { animation: none; }
}