/*==========================================================
 AVARTHANA TECHNOLOGIES
 HERO
 Release 3.2.3
==========================================================*/

.hero-section{
position:relative;
width:100%;
margin:0;
padding:0;
overflow:hidden;
background:#04121d;
}

.hero-stage{
position:relative;
width:100%;
aspect-ratio:16/9;
max-height:760px;
height:min(760px,calc(100vh - 80px));
overflow:hidden;
background:#04121d;
isolation:isolate;
contain:layout paint;
}

.hero-image-frame{
position:absolute;
inset:0;
overflow:hidden;
z-index:1;
}

.hero-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
transform:none;
transition:
opacity .75s ease,
object-position .6s ease;
display:block;
}

/*----------------------------------------------------------
 HERO TRANSITIONS
----------------------------------------------------------*/

.hero-image.fade-out{
opacity:0;
}

.hero-image.fade-in{
opacity:1;
}

/*----------------------------------------------------------
 SLIDE CALIBRATION
 Desktop focal points
----------------------------------------------------------*/

.hero-slide-fpga{
object-position:50% 50%;
}

.hero-slide-radar{
object-position:50% 50%;
}

.hero-slide-aerospace{
object-position:48% 50%;
}

.hero-slide-embedded{
object-position:50% 50%;
}

/*----------------------------------------------------------
 HERO GRADIENT
----------------------------------------------------------*/

.hero-gradient{
position:absolute;
inset:0;
pointer-events:none;
z-index:2;
background:
linear-gradient(
180deg,
rgba(0,0,0,.02) 0%,
rgba(0,0,0,0) 25%,
rgba(0,0,0,.06) 70%,
rgba(0,0,0,.16) 100%);
}

/*----------------------------------------------------------
 TELEMETRY LAYERS
----------------------------------------------------------*/

.hero-hotspots,
.hero-telemetry{
position:absolute;
inset:0;
pointer-events:none;
z-index:25;
font-family:Consolas,"Courier New",monospace;
font-size:.80rem;
font-weight:600;
letter-spacing:.08em;
color:#8fffd8;
text-shadow:0 0 6px rgba(143,255,216,.80);
}

/*----------------------------------------------------------
 GPU
----------------------------------------------------------*/

.hero-stage,
.hero-image-frame,
.hero-image,
.scanner-overlay{
transform:translateZ(0);
backface-visibility:hidden;
}
/*----------------------------------------------------------
 LARGE DESKTOP
----------------------------------------------------------*/

@media (min-width:1800px){


.hero-image{
transform:none;
}

.hero-slide-fpga{object-position:50% 50%;}
.hero-slide-radar{object-position:50% 50%;}
.hero-slide-aerospace{object-position:47% 50%;}
.hero-slide-embedded{object-position:50% 50%;}

}

/*----------------------------------------------------------
 DESKTOP
----------------------------------------------------------*/

@media (max-width:1600px){


.hero-image{
transform:none;
}

}

/*----------------------------------------------------------
 LAPTOP
----------------------------------------------------------*/

@media (max-width:1400px){


.hero-image{
transform:none;
}

.hero-slide-aerospace{object-position:46% 50%;}

}

/*----------------------------------------------------------
 TABLET LANDSCAPE
----------------------------------------------------------*/

@media (max-width:1200px){


.hero-image{
transform:none;
}

.hero-slide-fpga{object-position:52% 50%;}
.hero-slide-radar{object-position:51% 50%;}
.hero-slide-aerospace{object-position:49% 50%;}
.hero-slide-embedded{object-position:51% 50%;}

}

/*----------------------------------------------------------
 TABLET
----------------------------------------------------------*/

@media (max-width:992px){


.hero-image{
transform:none;
}

}

/*----------------------------------------------------------
 MOBILE
----------------------------------------------------------*/

@media (max-width:768px){


.hero-image{
transform:none;
}

.hero-slide-fpga{object-position:56% 50%;}
.hero-slide-radar{object-position:55% 50%;}
.hero-slide-aerospace{object-position:54% 50%;}
.hero-slide-embedded{object-position:55% 50%;}

}

/*----------------------------------------------------------
 SMALL MOBILE
----------------------------------------------------------*/

@media (max-width:480px){

.hero-image{
transform:none;
}

}

/*----------------------------------------------------------
 ACCESSIBILITY
----------------------------------------------------------*/

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

.hero-image{
transition:none;
transform:none;
}

}

/*----------------------------------------------------------
 PRINT
----------------------------------------------------------*/

@media print{

.hero-section{
display:none;
}

}

/*----------------------------------------------------------
 END OF FILE
 Release 3.2.3
----------------------------------------------------------*/