@font-face{
  font-family:"Share Tech Mono";
  src:url("fonts/share-tech-mono.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
.kinetic-hero{
  --flight-y:0px;
  --flight-x:0px;
  --flight-scale:1.06;
  --osd-shift:0px;
  background:#091117;
}
.kinetic-hero::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-5%;
  background-image:var(--hero-background);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:translate3d(var(--flight-x),var(--flight-y),0) scale(var(--flight-scale));
  transform-origin:center;
  will-change:transform;
  pointer-events:none;
}
.kinetic-hero .hero-grid{
  z-index:3;
  translate:0 clamp(24px,3vw,38px);
  gap:0;
  overflow:hidden;
  border-radius:32px;
  background:rgba(0,0,0,.3);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.kinetic-hero .hero-copy{
  background:transparent;
  border:0;
  box-shadow:none;
}
.flight-osd{
  position:absolute;
  z-index:2;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  color:rgba(217,222,227,.76);
  font:400 clamp(12px,.9vw,15px)/1.34 "Share Tech Mono","Lucida Console",monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 6px #000;
}
.flight-osd::before,.flight-osd::after{content:"";position:absolute;inset:28px;border:1px solid rgba(217,222,227,.17);clip-path:polygon(0 0,8% 0,8% 1px,1px 1px,1px 10%,0 10%,0 0,100% 0,100% 10%,calc(100% - 1px) 10%,calc(100% - 1px) 1px,92% 1px,92% 0,100% 0,100% 100%,92% 100%,92% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 90%,100% 90%,100% 100%,0 100%,0 90%,1px 90%,1px calc(100% - 1px),8% calc(100% - 1px),8% 100%)}
.flight-osd__panel{position:absolute;padding:10px 12px;background:rgba(7,13,18,.18);border-left:1px solid rgba(217,222,227,.28);transform:translateY(var(--osd-shift));transition:transform .08s linear}
.flight-osd__panel span,.flight-osd__panel b{display:block}
.flight-osd__panel span{color:rgba(196,202,209,.55)}
.flight-osd__panel b{font-weight:400;color:rgba(240,242,244,.88)}
.flight-osd__telemetry{top:9%;right:4%;text-align:right;border-left:0;border-right:1px solid rgba(217,222,227,.22)}
.flight-osd__status{left:4%;bottom:12%}
.flight-osd__mission{right:4%;bottom:12%;text-align:right;border-left:0;border-right:1px solid rgba(217,222,227,.22)}
.flight-osd__reticle{position:absolute;left:50%;top:48%;width:88px;height:88px;translate:-50% -50%;opacity:.42;transform:rotate(var(--flight-roll,0deg));transition:transform .08s linear}
.flight-osd__reticle::before,.flight-osd__reticle::after{content:"";position:absolute;background:rgba(217,222,227,.72)}
.flight-osd__reticle::before{left:0;right:0;top:50%;height:1px}
.flight-osd__reticle::after{top:0;bottom:0;left:50%;width:1px}
.flight-osd__reticle i{position:absolute;inset:23px;border:1px solid rgba(217,222,227,.62);border-radius:50%}
.flight-osd__reticle b{position:absolute;left:-75px;right:-75px;top:26px;height:36px;border-top:1px solid rgba(217,222,227,.45);border-bottom:1px solid rgba(217,222,227,.45);clip-path:polygon(0 0,22% 0,22% 2px,78% 2px,78% 0,100% 0,100% 100%,78% 100%,78% calc(100% - 2px),22% calc(100% - 2px),22% 100%,0 100%)}
.flight-osd__armed{position:absolute;top:7%;left:50%;translate:-50%;color:#f0f2f4;font-size:1.05em;animation:osd-pulse 1.1s steps(2,end) infinite}
.flight-osd__bottom{position:absolute;left:50%;bottom:5%;translate:-50%;display:flex;gap:28px;white-space:nowrap;color:#f0f2f4}
.flight-osd__bottom i{font-style:normal;color:#fff}
@keyframes osd-pulse{50%{opacity:.45}}
.flight-osd__progress{display:block;width:86px;height:2px;margin:7px 0 0 auto;background:rgba(217,222,227,.18)}
.flight-osd__progress i{display:block;width:var(--flight-progress,0%);height:100%;background:#d9dee3}
@media(max-width:800px){
  .kinetic-hero::before{background-position:60% center}
  .kinetic-hero .hero-grid{translate:0 16px}
  .kinetic-hero .hero-art.hero-emblem-stage{display:none!important}
  .kinetic-hero .flight-osd{display:none!important}
}
@media(prefers-reduced-motion:reduce){.kinetic-hero::before{transform:scale(1.06);will-change:auto}.flight-osd__reticle,.flight-osd__panel{transition:none}.flight-osd__armed{animation:none}}
