/*==========================================================
 AVARTHANA TECHNOLOGIES
 HERO RADAR
 Release 3.2.2
==========================================================*/

.scanner-overlay{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:15;
mix-blend-mode:screen;
}

/*----------------------------------------------------------
 SCANNER ORIGIN
----------------------------------------------------------*/

.scanner-origin{
position:absolute;
left:18%;
top:72%;
width:18px;
height:18px;
transform:translate(-50%,-50%);
border-radius:50%;
background:#b9ffe8;
box-shadow:
0 0 10px rgba(185,255,232,1),
0 0 24px rgba(120,255,210,.95),
0 0 48px rgba(90,255,180,.55);
z-index:220;
}
/*----------------------------------------------------------
 SCANNER RINGS
----------------------------------------------------------*/

.scanner-rings{
position:absolute;
left:18%;
top:72%;
width:0;
height:0;
z-index:40;
}

.ring{
position:absolute;
left:0;
top:0;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(110,255,205,.14);
box-shadow:
0 0 8px rgba(110,255,205,.08);
}

.ring1{
width:340px;
height:340px;
}

.ring2{
width:700px;
height:700px;
border-color:rgba(110,255,205,.10);
}

.ring3{
width:1080px;
height:1080px;
border-color:rgba(110,255,205,.06);
}

/*----------------------------------------------------------
 ROTATING PLATFORM
----------------------------------------------------------*/

.scanner-beam{
position:absolute;
left:18%;
top:72%;
width:260vw;
height:260vw;
margin-left:-130vw;
margin-top:-130vw;
transform-origin:center center;
animation:scannerRotate 7s linear infinite;
will-change:transform;
z-index:80;
}
/*----------------------------------------------------------
 RADAR BEAM
----------------------------------------------------------*/

.scanner-beam::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:
conic-gradient(
from -3deg,
rgba(255,255,255,.98) 0deg,
rgba(175,255,225,.95) 1deg,
rgba(120,255,205,.72) 2deg,
rgba(90,255,185,.40) 5deg,
rgba(90,255,185,.18) 8deg,
rgba(90,255,185,.08) 11deg,
transparent 12deg,
transparent 360deg
);
}

/*----------------------------------------------------------
 BRIGHT EDGE
----------------------------------------------------------*/

.scanner-beam::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:120vw;
height:2px;
transform-origin:left center;
transform:rotate(-3deg);
background:
linear-gradient(
90deg,
rgba(255,255,255,1),
rgba(170,255,225,.95),
rgba(120,255,205,.70),
rgba(90,255,185,.30),
transparent
);
box-shadow:
0 0 8px rgba(170,255,225,.95),
0 0 20px rgba(120,255,205,.65),
0 0 40px rgba(120,255,205,.35);
}

/*----------------------------------------------------------
 TELEMETRY LAYER
----------------------------------------------------------*/

.hero-telemetry{
position:absolute;
inset:0;
z-index:250;
pointer-events:none;
}

.telemetry-tag{
position:absolute;
padding:4px 8px;
font:600 12px Consolas,"Courier New",monospace;
letter-spacing:.08em;
color:#8fffd8;
background:rgba(0,18,28,.55);
border:1px solid rgba(143,255,216,.28);
border-radius:4px;
backdrop-filter:blur(2px);
text-shadow:0 0 6px rgba(143,255,216,.85);
opacity:0;
transform:translateY(6px);
transition:
opacity .28s ease,
transform .28s ease;
}

.telemetry-tag.active{
opacity:1;
transform:translateY(0);
}

/*----------------------------------------------------------
 HOTSPOTS
----------------------------------------------------------*/

.hero-hotspots{
position:absolute;
inset:0;
pointer-events:none;
z-index:180;
}

/*----------------------------------------------------------
 ROTATION
----------------------------------------------------------*/

@keyframes scannerRotate{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/*----------------------------------------------------------
 RESPONSIVE
----------------------------------------------------------*/

@media(max-width:1400px){

.scanner-origin,
.scanner-rings,
.scanner-beam{
left:19%;
top:73%;
}

}

@media(max-width:1100px){

.scanner-origin,
.scanner-rings,
.scanner-beam{
left:18%;
top:72%;
}

.ring3{
width:760px;
height:760px;
}

}

@media(max-width:768px){

.scanner-origin,
.scanner-rings,
.scanner-beam{
left:17%;
top:70%;
}

.ring3{
display:none;
}

.scanner-overlay{
opacity:.85;
}

}

@media(prefers-reduced-motion:reduce){

.scanner-beam{
animation:none;
}

.telemetry-tag{
transition:none;
}

}

/*==========================================================
 END OF FILE
==========================================================*/