/* DropScout Live Radar Hero v3.0
   Centered radar instrument + compact live-signal feed. */

.v3-hero-radar.live-radar-upgraded{
  position:relative;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.live-radar-v3{
  width:min(100%,680px);
  min-height:392px;
  display:grid;
  grid-template-columns:minmax(300px,1fr) minmax(205px,240px);
  gap:26px;
  align-items:center;
}

.live-radar-stage{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.live-radar-instrument{
  position:relative;
  width:318px;
  height:318px;
  flex:0 0 auto;
  border-radius:50%;
  background:
    radial-gradient(circle at center,
      rgba(232,59,75,.17) 0,
      rgba(232,59,75,.075) 28%,
      rgba(232,59,75,.02) 52%,
      rgba(0,0,0,0) 70%);
}

.live-radar-ring{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.075);
  border-radius:50%;
  pointer-events:none;
}

.live-radar-ring.r1{width:78px;height:78px}
.live-radar-ring.r2{width:142px;height:142px}
.live-radar-ring.r3{width:212px;height:212px}
.live-radar-ring.r4{width:284px;height:284px}

.live-radar-axis{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.live-radar-axis.h{
  width:300px;
  height:1px;
  background:linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,.11),
    rgba(255,255,255,0)
  );
}

.live-radar-axis.v{
  width:1px;
  height:300px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.11),
    rgba(255,255,255,0)
  );
}

/* Full circular sweep: always centered and clipped to the radar. */
.live-radar-sweep{
  position:absolute;
  left:50%;
  top:50%;
  width:284px;
  height:284px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
}

.live-radar-sweep:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(232,59,75,0) 0deg,
      rgba(232,59,75,0) 285deg,
      rgba(232,59,75,.04) 302deg,
      rgba(232,59,75,.13) 322deg,
      rgba(232,59,75,.34) 347deg,
      rgba(255,91,105,.48) 358deg,
      rgba(232,59,75,0) 360deg
    );
  animation:dropScoutRadarRotate 6s linear infinite;
  transform-origin:50% 50%;
  filter:drop-shadow(0 0 10px rgba(232,59,75,.16));
}

@keyframes dropScoutRadarRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.live-radar-core{
  position:absolute;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(232,59,75,.5);
  border-radius:50%;
  background:rgba(16,18,19,.7);
  box-shadow:
    0 0 0 1px rgba(232,59,75,.04),
    0 0 30px rgba(232,59,75,.18);
  z-index:5;
}

.live-radar-core:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--red2);
  box-shadow:0 0 14px rgba(255,91,105,.7);
}

.live-radar-label{
  position:absolute;
  left:50%;
  top:50%;
  width:154px;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:6;
  pointer-events:none;
}

.live-radar-label .kicker{
  margin-bottom:56px;
  color:#83918b;
  font-size:7px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.live-radar-label .status{
  margin-top:55px;
  color:#9ea8a3;
  font-size:9px;
  line-height:1.35;
}

.live-radar-label .status strong{
  display:block;
  margin-bottom:2px;
  color:var(--text);
  font-size:12px;
  font-weight:850;
}

.live-signal-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--red2);
  box-shadow:
    0 0 0 5px rgba(232,59,75,.07),
    0 0 17px rgba(255,91,105,.46);
  z-index:8;
  animation:dropScoutSignalPulse 2.3s ease-in-out infinite;
}

.live-signal-dot.d1{left:23%;top:31%}
.live-signal-dot.d2{right:14%;top:41%;animation-delay:.65s}
.live-signal-dot.d3{left:46%;bottom:12%;animation-delay:1.25s}

@keyframes dropScoutSignalPulse{
  0%,100%{
    transform:scale(.86);
    opacity:.84;
  }
  50%{
    transform:scale(1.18);
    opacity:1;
  }
}

.live-signal-feed{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.live-signal-feed-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:3px;
}

.live-signal-feed-head .title{
  color:#aab4af;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.live-signal-feed-head .live{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border:1px solid rgba(99,232,173,.19);
  border-radius:999px;
  color:#63e8ad;
  background:rgba(99,232,173,.045);
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.live-signal-feed-head .live:before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#63e8ad;
  box-shadow:0 0 9px rgba(99,232,173,.5);
}

.live-signal-item{
  display:block;
  padding:13px 13px 12px;
  border:1px solid rgba(81,96,89,.42);
  border-radius:11px;
  background:linear-gradient(
    180deg,
    rgba(16,20,21,.94),
    rgba(11,14,15,.92)
  );
  color:inherit;
  text-decoration:none;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.live-signal-item:hover{
  transform:translateX(2px);
  border-color:rgba(232,59,75,.34);
  background:linear-gradient(
    180deg,
    rgba(20,24,26,.98),
    rgba(13,16,17,.96)
  );
}

.live-signal-item .type{
  color:#e7c467;
  font-size:7px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.live-signal-item h3{
  margin:5px 0 5px;
  color:var(--text);
  font-size:12px;
  line-height:1.18;
  font-weight:850;
  letter-spacing:-.02em;
}

.live-signal-item .meta{
  color:#c2cbc7;
  font-size:9px;
  line-height:1.35;
}

.live-signal-item .sub{
  margin-top:4px;
  color:var(--muted);
  font-size:8px;
  line-height:1.35;
}

.live-signal-item .open{
  margin-top:8px;
  color:var(--red2);
  font-size:7px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

@media(max-width:1180px){
  .live-radar-v3{
    grid-template-columns:minmax(280px,1fr) 205px;
    gap:18px;
  }

  .live-radar-instrument{
    width:292px;
    height:292px;
  }

  .live-radar-sweep{
    width:260px;
    height:260px;
  }

  .live-radar-ring.r4{width:260px;height:260px}
  .live-radar-axis.h{width:276px}
  .live-radar-axis.v{height:276px}
}

@media(max-width:980px){
  .v3-hero-radar.live-radar-upgraded{
    min-height:620px;
  }

  .live-radar-v3{
    grid-template-columns:1fr;
    gap:6px;
    width:100%;
  }

  .live-radar-stage{
    min-height:340px;
  }

  .live-signal-feed{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .live-signal-feed-head{
    grid-column:1/-1;
  }
}

@media(max-width:680px){
  .v3-hero-radar.live-radar-upgraded{
    min-height:790px;
  }

  .live-radar-stage{
    min-height:330px;
  }

  .live-radar-instrument{
    width:270px;
    height:270px;
  }

  .live-radar-sweep{
    width:242px;
    height:242px;
  }

  .live-radar-ring.r1{width:68px;height:68px}
  .live-radar-ring.r2{width:122px;height:122px}
  .live-radar-ring.r3{width:180px;height:180px}
  .live-radar-ring.r4{width:242px;height:242px}
  .live-radar-axis.h{width:256px}
  .live-radar-axis.v{height:256px}

  .live-signal-feed{
    display:flex;
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  .live-radar-sweep:before,
  .live-signal-dot{
    animation:none;
  }
}