/* =========================================================
   BLACK HAWK — CINEMATIC FLYING HERO ANIMATION SYSTEM
   Modular systems:
   1) .bh-paragliders
   2) .bh-clouds
   3) .bh-particles
   4) .bh-radar
   5) depth / parallax / fog / tactical overlays
========================================================= */

.bh-cinematic-hero{
  --hero-bg-1:#030508;
  --hero-bg-2:#07101a;
  --hero-bg-3:#0a111b;
  --hero-white:rgba(255,255,255,.92);
  --hero-text:#b6c0cf;
  --hero-line:rgba(255,255,255,.09);
  --hero-line-soft:rgba(255,255,255,.04);
  --hero-red:#ff2b2b;
  --hero-red-dark:#770000;
  --hero-red-glow:rgba(255,43,43,.30);
  --radar-green:#63ff9e;
  --radar-green-soft:rgba(99,255,158,.15);
  --hero-radius:28px;
}

.bh-cinematic-hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:120px 0 90px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255,0,0,.12), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.05), transparent 14%),
    linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 46%, var(--hero-bg-3) 100%);
}

.bh-cinematic-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.56)),
    radial-gradient(circle at 24% 24%, rgba(255,0,0,.08), transparent 28%);
}

.bh-cinematic-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.20;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:56px 56px;
}

.bh-cinematic-hero .bh-hero-container{
  position:relative;
  z-index:8;
}

.bh-hero-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

.bh-particles,
.bh-clouds,
.bh-paragliders,
.bh-radar,
.bh-hero-airspace,
.bh-hero-overlays,
.bh-hero-fog,
.bh-hero-noise,
.bh-hero-scanlines,
.bh-hero-depth,
.bh-hero-flight-paths,
.bh-hero-tags{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.bh-particles{ z-index:1; }
.bh-clouds{ z-index:2; }
.bh-hero-fog{ z-index:2; }
.bh-hero-overlays{ z-index:3; }
.bh-paragliders,
.bh-hero-airspace,
.bh-hero-flight-paths,
.bh-hero-depth{ z-index:4; }

/* Radar sits at z-index:6 — aircraft BEHIND radar get clipped, aircraft BEYOND radar show above */
.bh-radar{ z-index:6; }
.bh-hero-airspace-front{ z-index:7; } /* layer for aircraft after passing radar */
.bh-hero-tags{ z-index:7; }
.bh-hero-noise,
.bh-hero-scanlines{ z-index:2; }

.bh-hero-canvas,
.bh-hero-depth-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.bh-hero-glow,
.bh-hero-glow::before,
.bh-hero-glow::after{
  position:absolute;
  border-radius:50%;
  filter:blur(54px);
}

.bh-hero-glow{
  top:-140px;
  left:-80px;
  width:430px;
  height:430px;
  background:radial-gradient(circle, rgba(255,0,0,.17), transparent 68%);
  animation:bhc-auroraFloat1 18s ease-in-out infinite;
}

.bh-hero-glow::before{
  content:"";
  width:320px;
  height:320px;
  top:120px;
  right:-210px;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 68%);
  animation:bhc-auroraFloat2 20s ease-in-out infinite;
}

.bh-hero-glow::after{
  content:"";
  left:64vw;
  top:16vh;
  width:280px;
  height:280px;
  background:radial-gradient(circle, rgba(255,43,43,.10), transparent 72%);
  animation:bhc-auroraFloat3 22s ease-in-out infinite;
}

.bh-hero-fog{
  background:
    radial-gradient(circle at 16% 74%, rgba(255,255,255,.045), transparent 24%),
    radial-gradient(circle at 78% 26%, rgba(255,0,0,.06), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 26%, transparent 74%, rgba(255,255,255,.03));
  filter:blur(24px);
  opacity:.58;
}

.bh-hero-noise{
  opacity:.05;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(rgba(255,255,255,.38) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:4px 4px, 100% 3px;
}

.bh-hero-scanlines{
  background:linear-gradient(to bottom, rgba(255,255,255,.02) 0%, transparent 8%, transparent 92%, rgba(255,255,255,.02) 100%);
  mix-blend-mode:screen;
}

.bh-hero-scanlines::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.018) 0px,
    rgba(255,255,255,.018) 1px,
    transparent 2px,
    transparent 6px
  );
}

.bh-cloud{
  position:absolute;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
  filter:blur(18px);
  will-change:transform;
}

.bh-cloud.bh-c1{ width:380px; height:120px; top:10%; left:-20%; opacity:.20; animation:bhc-cloudMove1 55s linear infinite; }
.bh-cloud.bh-c2{ width:520px; height:140px; top:32%; left:-22%; opacity:.15; animation:bhc-cloudMove2 78s linear infinite; }
.bh-cloud.bh-c3{ width:340px; height:110px; top:59%; left:-14%; opacity:.10; animation:bhc-cloudMove3 64s linear infinite; }
.bh-cloud.bh-c4{ width:430px; height:130px; top:76%; left:-20%; opacity:.12; animation:bhc-cloudMove2 88s linear infinite; }
.bh-cloud.bh-c5{ width:260px; height:90px; top:18%; left:62%; opacity:.07; animation:bhc-cloudFloatNear 20s ease-in-out infinite; }

.bh-hero-flight-paths .bh-flight-path{
  position:absolute;
  border-top:1px dashed rgba(255,255,255,.13);
  opacity:.42;
  transform-origin:left center;
}

.bh-hero-flight-paths .bh-flight-path.bh-p1{ width:34vw; top:24%; left:4%; transform:rotate(10deg); }
.bh-hero-flight-paths .bh-flight-path.bh-p2{ width:28vw; top:49%; right:8%; transform:rotate(-14deg); }
.bh-hero-flight-paths .bh-flight-path.bh-p3{ width:22vw; top:72%; left:18%; transform:rotate(-6deg); }

.bh-hero-flight-paths .bh-nav-point{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #ff3d3d 70%, #7a0000 100%);
  box-shadow:0 0 16px rgba(255,0,0,.35);
  animation:bhc-pingPoint 2.8s ease-in-out infinite;
}

.bh-hero-flight-paths .bh-nav-point::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  animation:bhc-pointRing 2.8s ease-out infinite;
}

.bh-hero-flight-paths .bh-n1{ top:20%; left:26%; }
.bh-hero-flight-paths .bh-n2{ top:46%; right:24%; animation-delay:.8s; }
.bh-hero-flight-paths .bh-n3{ top:70%; left:48%; animation-delay:1.5s; }

.bh-hero-content{
  max-width:820px;
  position:relative;
  z-index:2;
  transform:translate3d(0,0,0);
  transition:transform .18s ease-out;
  will-change:transform;
}

.bh-cinematic-hero .bh-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  margin-bottom:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  color:#d7b56d;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.76rem;
}

.bh-cinematic-hero h1{
  margin:0 0 16px;
  font-size:clamp(3rem, 7vw, 6rem);
  line-height:.94;
  letter-spacing:-.05em;
  font-weight:1000;
}

.bh-cinematic-hero h1 .bh-white{ color:#fff; }
.bh-cinematic-hero h1 .bh-red{
  color:var(--hero-red);
  text-shadow:0 0 30px rgba(255,0,0,.24);
}

.bh-cinematic-hero .bh-lead{
  max-width:820px;
  margin:0;
  color:var(--hero-text);
  line-height:1.9;
  font-size:1.06rem;
}

.bh-hero-hud-line{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  width:min(960px, 92%);
  height:1px;
  z-index:5;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.bh-hero-hud-line::before,
.bh-hero-hud-line::after{
  content:"";
  position:absolute;
  top:-4px;
  width:10px;
  height:10px;
  border:1px solid rgba(255,255,255,.24);
  transform:rotate(45deg);
}

.bh-hero-hud-line::before{ left:18%; }
.bh-hero-hud-line::after{ right:18%; }

.bh-hero-tags{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.bh-hero-tags .bh-wrap{
  width:min(960px, 92%);
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:72px;
}

.bh-hero-tag{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  color:#dde7f5;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  animation:bhc-tagFloat 6s ease-in-out infinite;
}
.bh-hero-tag:nth-child(2){ animation-delay:.6s; }
.bh-hero-tag:nth-child(3){ animation-delay:1.2s; }
.bh-hero-tag:nth-child(4){ animation-delay:1.8s; }
.bh-hero-tag:nth-child(5){ animation-delay:2.4s; }

/* =========================================================
   PARAGLIDERS SYSTEM
========================================================= */
.bh-paragliders{
  overflow:hidden;
}

.bh-paraglider{
  position:absolute;
  display:block;
  height:auto;
  opacity:.95;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.72));
  will-change:transform, opacity, filter;
}

.bh-paraglider::before{
  content:"";
  position:absolute;
  left:-34%;
  top:50%;
  width:54%;
  height:11px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,43,43,.18));
  filter:blur(8px);
  opacity:.58;
}

.bh-paraglider svg{
  width:100%;
  height:auto;
  display:block;
}

.bh-paraglider.bh-g1{
  width:152px;
  top:18%;
  left:-230px;
  animation:bhc-glide1 28s linear infinite, bhc-wingShadow 3.2s ease-in-out infinite;
}

.bh-paraglider.bh-g2{
  width:132px;
  top:38%;
  left:-260px;
  opacity:.80;
  filter:blur(.15px) drop-shadow(0 12px 28px rgba(0,0,0,.58));
  animation:bhc-glide2 38s linear infinite 6s, bhc-wingShadow 3.6s ease-in-out infinite 6s;
}

.bh-paraglider.bh-g3{
  width:92px;
  top:66%;
  left:-200px;
  opacity:.54;
  filter:blur(.35px) drop-shadow(0 10px 22px rgba(0,0,0,.42));
  animation:bhc-glide3 44s linear infinite 12s, bhc-wingShadow 4s ease-in-out infinite 12s;
}

/* =========================================================
   AIRSPACE SYSTEM — aircraft that fly BEHIND radar
========================================================= */
.bh-hero-airspace{
  overflow:hidden;
  z-index:4;
}

/* hero-airspace-front — aircraft layer that renders IN FRONT of radar (z:7) */
.bh-hero-airspace-front{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:7;
}

.bh-hero-aircraft{
  position:absolute;
  display:block;
  width:190px;
  height:auto;
  filter:drop-shadow(0 16px 38px rgba(0,0,0,.56));
  will-change:transform;
}

.bh-hero-aircraft svg{
  display:block;
  width:100%;
  height:auto;
}

.bh-hero-gyro{
  top:21%;
  left:-300px;
  width:165px;
  animation:bhc-gyroTraverse 24s linear infinite 1s;
}

/* NEW truck airplane — replaces old icon-airplane */
.bh-hero-plane{
  top:50%;
  left:-420px;
  width:220px;
  animation:bhc-planeTraverse 30s linear infinite 3s;
}

/* =========================================================
   RADAR SYSTEM
   aircraft inside radar intentionally smaller + green tint
========================================================= */
.bh-radar{
  display:block;
}

.bh-radar-scope{
  position:absolute;
  right:88px;
  top:50%;
  width:430px;
  height:430px;
  transform:translateY(-50%);
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(99,255,158,.56);
  box-shadow:
    0 0 34px rgba(99,255,158,.18),
    inset 0 0 65px rgba(99,255,158,.10),
    inset 0 0 120px rgba(99,255,158,.04);
  background:
    radial-gradient(circle at center, rgba(99,255,158,.07) 0%, rgba(99,255,158,.04) 30%, rgba(3,10,8,.86) 68%, rgba(2,9,7,.96) 100%);
}

.bh-radar-scope::before,
.bh-radar-scope::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:0;
}

.bh-radar-scope::before{
  background:
    radial-gradient(circle, transparent 18%, rgba(99,255,158,.08) 18.4%, transparent 19.2%),
    radial-gradient(circle, transparent 36%, rgba(99,255,158,.08) 36.4%, transparent 37.2%),
    radial-gradient(circle, transparent 54%, rgba(99,255,158,.08) 54.4%, transparent 55.2%),
    radial-gradient(circle, transparent 72%, rgba(99,255,158,.08) 72.4%, transparent 73.2%),
    linear-gradient(rgba(99,255,158,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,255,158,.10) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 54px 54px, 54px 54px;
  mix-blend-mode:screen;
  opacity:.88;
}

.bh-radar-scope::after{
  inset:18px;
  border:1px solid rgba(99,255,158,.20);
}

.bh-radar-cross,
.bh-radar-diags,
.bh-radar-sweep,
.bh-radar-blips,
.bh-radar-aircraft-layer,
.bh-radar-degrees,
.bh-radar-map,
.bh-radar-noise{
  position:absolute;
  inset:0;
}

.bh-radar-cross::before,
.bh-radar-cross::after,
.bh-radar-diags::before,
.bh-radar-diags::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center;
  background:rgba(99,255,158,.22);
}

.bh-radar-cross::before{ width:86%; height:1px; transform:translate(-50%,-50%); }
.bh-radar-cross::after{ width:1px; height:86%; transform:translate(-50%,-50%); }
.bh-radar-diags::before{ width:80%; height:1px; transform:translate(-50%,-50%) rotate(45deg); }
.bh-radar-diags::after{ width:80%; height:1px; transform:translate(-50%,-50%) rotate(-45deg); }

/* =========================================================
   IMPROVED RADAR SWEEP — line + waiver (cone) behind it
========================================================= */
.bh-radar-sweep{
  border-radius:50%;
  animation:bhc-radarRotate 4.8s linear infinite;
}

/* Main sweep line */
.bh-radar-sweep::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:48%;
  height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(180,255,200,1), rgba(99,255,158,.60), rgba(99,255,158,0));
  box-shadow:0 0 12px 3px rgba(99,255,158,.55), 0 0 24px 6px rgba(99,255,158,.28);
}

/* Wide waiver / wake cone trailing behind the sweep line */
.bh-radar-sweep::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:47%;
  height:47%;
  transform-origin:top left;
  /* Broader cone — covers about 90 degrees behind the sweep line */
  clip-path:polygon(0 0, 100% 0, 0 100%);
  background:conic-gradient(
    from 0deg at 0% 0%,
    rgba(99,255,158,0) 0deg,
    rgba(99,255,158,.04) 30deg,
    rgba(99,255,158,.12) 60deg,
    rgba(99,255,158,.22) 85deg,
    rgba(99,255,158,.32) 90deg
  );
  filter:blur(3px);
}

.bh-radar-center-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#caffdb;
  box-shadow:0 0 18px rgba(99,255,158,.9);
  z-index:4;
}

.bh-radar-map svg{
  width:74%;
  height:auto;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  opacity:.16;
  filter:drop-shadow(0 0 16px rgba(99,255,158,.12));
}

.bh-radar-map path{
  fill:rgba(119,255,170,.42);
  stroke:rgba(119,255,170,.18);
  stroke-width:1.4;
}

.bh-radar-blip{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #d6ffe6 0%, #63ff9e 58%, #1d9d4f 100%);
  box-shadow:0 0 14px rgba(99,255,158,.7);
}

.bh-radar-blip::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(99,255,158,.36);
  animation:bhc-blipPing 2.2s ease-out infinite;
}

.bh-radar-blip.bh-b1{ left:32%; top:28%; }
.bh-radar-blip.bh-b2{ left:66%; top:38%; animation-delay:.7s; }
.bh-radar-blip.bh-b3{ left:46%; top:68%; animation-delay:1.2s; }
.bh-radar-blip.bh-b4{ left:72%; top:60%; animation-delay:1.8s; }

.bh-radar-degrees span{
  position:absolute;
  left:50%;
  top:50%;
  color:#8fffb1;
  font-size:.78rem;
  letter-spacing:.10em;
  text-shadow:0 0 10px rgba(99,255,158,.28);
  transform:
    rotate(calc(var(--deg) * 1deg))
    translateY(-198px)
    rotate(calc(var(--deg) * -1deg));
}

.bh-radar-aircraft-layer{
  clip-path:circle(50% at 50% 50%);
}

.bh-radar-aircraft{
  position:absolute;
  opacity:.95;
  filter:drop-shadow(0 0 10px rgba(99,255,158,.34));
}

/* smaller inside radar */
.bh-radar-gyro{
  top:32%;
  left:-140px;
  width:106px;
  animation:bhc-radarGyroTraverse 11s linear infinite 1s;
}

.bh-radar-plane{
  top:55%;
  left:-180px;
  width:130px;
  animation:bhc-radarPlaneTraverse 13s linear infinite 3s;
}

.bh-radar-aircraft svg{
  width:100%;
  height:auto;
  display:block;
}

/* Override ALL fill/stroke colours inside radar aircraft → green */
.bh-radar-aircraft svg *{
  fill:#63ff9e;
  stroke:rgba(99,255,158,.50);
  stop-color:#63ff9e;
}
.bh-radar-aircraft svg .bh-shadow,
.bh-radar-aircraft svg .bh-shadowFx{ display:none; }

/* white background of new truck svg → transparent inside radar */
.bh-radar-aircraft svg path[fill="white"]{
  fill:rgba(99,255,158,.08);
}

.bh-radar-noise{
  opacity:.08;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(rgba(255,255,255,.44) 1px, transparent 1px),
    linear-gradient(rgba(99,255,158,.05) 1px, transparent 1px);
  background-size:4px 4px, 100% 3px;
}

/* =========================================================
   KEYFRAMES
========================================================= */
@keyframes bhc-auroraFloat1{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(34px,18px,0) scale(1.08); }
}
@keyframes bhc-auroraFloat2{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-26px,22px,0) scale(1.05); }
}
@keyframes bhc-auroraFloat3{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(22px,-18px,0) scale(1.06); }
}

@keyframes bhc-cloudMove1{ from{ transform:translateX(0); } to{ transform:translateX(145vw); } }
@keyframes bhc-cloudMove2{ from{ transform:translateX(0); } to{ transform:translateX(160vw); } }
@keyframes bhc-cloudMove3{ from{ transform:translateX(0); } to{ transform:translateX(140vw); } }
@keyframes bhc-cloudFloatNear{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(28px,-10px,0) scale(1.05); }
}

@keyframes bhc-glide1{
  0%{ transform:translate3d(-260px,0,0) rotate(-3deg) scale(.92); }
  22%{ transform:translate3d(14vw,-14px,0) rotate(0deg) scale(.98); }
  50%{ transform:translate3d(44vw,10px,0) rotate(2deg) scale(1.02); }
  76%{ transform:translate3d(78vw,-8px,0) rotate(-1deg) scale(.98); }
  100%{ transform:translate3d(125vw,4px,0) rotate(2deg) scale(.94); }
}

@keyframes bhc-glide2{
  0%{ transform:translate3d(-280px,0,0) rotate(-4deg) scale(.84); }
  20%{ transform:translate3d(12vw,-20px,0) rotate(-1deg) scale(.90); }
  42%{ transform:translate3d(38vw,-34px,0) rotate(2deg) scale(.96); }
  72%{ transform:translate3d(76vw,-16px,0) rotate(-2deg) scale(.92); }
  100%{ transform:translate3d(124vw,-8px,0) rotate(1deg) scale(.86); }
}

@keyframes bhc-glide3{
  0%{ transform:translate3d(-220px,0,0) rotate(-2deg) scale(.72); }
  24%{ transform:translate3d(18vw,18px,0) rotate(0deg) scale(.78); }
  52%{ transform:translate3d(48vw,30px,0) rotate(2deg) scale(.82); }
  78%{ transform:translate3d(86vw,12px,0) rotate(-2deg) scale(.78); }
  100%{ transform:translate3d(126vw,24px,0) rotate(1deg) scale(.74); }
}

@keyframes bhc-wingShadow{
  0%,100%{ filter:drop-shadow(0 12px 26px rgba(0,0,0,.52)); }
  50%{ filter:drop-shadow(0 16px 34px rgba(0,0,0,.72)); }
}

@keyframes bhc-gyroTraverse{
  0%{ transform:translateX(-380px) translateY(0) rotate(-1deg) scale(.90); }
  20%{ transform:translateX(12vw) translateY(-20px) rotate(1deg) scale(.95); }
  45%{ transform:translateX(38vw) translateY(-8px) rotate(-1deg) scale(1); }
  65%{ transform:translateX(63vw) translateY(-24px) rotate(2deg) scale(1.02); }
  85%{ transform:translateX(95vw) translateY(-6px) rotate(-1deg) scale(.98); }
  100%{ transform:translateX(125vw) translateY(-16px) rotate(1deg) scale(.94); }
}

@keyframes bhc-planeTraverse{
  0%{ transform:translateX(-520px) translateY(0) rotate(0deg) scale(.70); }
  25%{ transform:translateX(18vw) translateY(-10px) rotate(0deg) scale(.76); }
  50%{ transform:translateX(48vw) translateY(-28px) rotate(0deg) scale(.82); }
  75%{ transform:translateX(82vw) translateY(-12px) rotate(0deg) scale(.78); }
  100%{ transform:translateX(126vw) translateY(-22px) rotate(0deg) scale(.72); }
}

@keyframes bhc-radarGyroTraverse{
  0%{ transform:translate3d(-150px,-6px,0) rotate(-6deg) scale(.66); }
  35%{ transform:translate3d(150px,-14px,0) rotate(-2deg) scale(.70); }
  70%{ transform:translate3d(320px,6px,0) rotate(5deg) scale(.74); }
  100%{ transform:translate3d(520px,-4px,0) rotate(0deg) scale(.68); }
}

@keyframes bhc-radarPlaneTraverse{
  0%{ transform:translate3d(-190px,0,0) rotate(0deg) scale(.60); }
  30%{ transform:translate3d(120px,-8px,0) rotate(0deg) scale(.64); }
  65%{ transform:translate3d(300px,8px,0) rotate(0deg) scale(.68); }
  100%{ transform:translate3d(510px,-6px,0) rotate(0deg) scale(.62); }
}

@keyframes bhc-radarRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes bhc-blipPing{ 0%{ transform:scale(.7); opacity:.7; } 100%{ transform:scale(2.1); opacity:0; } }
@keyframes bhc-pingPoint{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
@keyframes bhc-pointRing{ 0%{ transform:scale(.65); opacity:.7; } 100%{ transform:scale(1.8); opacity:0; } }
@keyframes bhc-tagFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* front-propeller spin (from new SVG) */
.bh-front-propeller-only{
  transform-origin:1238px 360px;
  transform-box:view-box;
  animation:bhc-front-prop-spin 0.09s linear infinite;
  will-change:transform;
}
@keyframes bhc-front-prop-spin{
  from{ transform:translateX(-18px) rotate(0deg); }
  to{ transform:translateX(-18px) rotate(360deg); }
}

/* =========================================================
   RESPONSIVE / PERFORMANCE
========================================================= */
@media (max-width:1199px){
  .bh-radar-scope{ width:360px; height:360px; right:40px; }
  .bh-radar-degrees span{
    transform:rotate(calc(var(--deg) * 1deg)) translateY(-166px) rotate(calc(var(--deg) * -1deg));
    font-size:.72rem;
  }
  .bh-hero-plane{ width:160px; }
  .bh-hero-gyro{ width:150px; }
  .bh-paraglider.bh-g1{ width:134px; }
  .bh-paraglider.bh-g2{ width:118px; }
  .bh-paraglider.bh-g3{ width:84px; }
}

@media (max-width:991px){
  .bh-radar-scope{ width:300px; height:300px; right:24px; opacity:.82; }
  .bh-radar-degrees span{
    transform:rotate(calc(var(--deg) * 1deg)) translateY(-138px) rotate(calc(var(--deg) * -1deg));
    font-size:.64rem;
  }
  .bh-hero-tags .bh-wrap{ padding-bottom:58px; }
  .bh-hero-tag{ font-size:.68rem; letter-spacing:.12em; padding:8px 12px; }
}

@media (max-width:768px){
  .bh-cinematic-hero{
    min-height:82vh;
    padding:110px 0 80px;
  }

  .bh-radar,
  .bh-hero-flight-paths,
  .bh-hero-hud-line,
  .bh-hero-fog,
  .bh-hero-depth-canvas{
    display:none;
  }

  .bh-paraglider.bh-g2,
  .bh-paraglider.bh-g3,
  .bh-hero-plane{
    display:none;
  }

  .bh-paraglider.bh-g1{ width:110px; top:14%; }
  .bh-hero-gyro{ width:118px; top:20%; }
  .bh-hero-tags .bh-wrap{ gap:8px; padding-bottom:48px; }
  .bh-hero-tag{ font-size:.62rem; padding:8px 10px; }
  .bh-cinematic-hero h1{ font-size:clamp(2.4rem, 11vw, 4.2rem); }
  .bh-cinematic-hero .bh-lead{ font-size:.98rem; line-height:1.8; }
}

@media (prefers-reduced-motion:reduce){
  .bh-cloud,
  .bh-paraglider,
  .bh-hero-aircraft,
  .bh-hero-tag,
  .bh-hero-glow,
  .bh-radar-sweep,
  .bh-radar-aircraft,
  .bh-hero-flight-paths .bh-nav-point,
  .bh-front-propeller-only{
    animation:none;
  }

  .bh-hero-content{ transition:none; }
}

/* =========================================================
   SHARED HERO — ORDERED LAYER ARCHITECTURE
   0 base background
   1 particles / atmosphere
   2 clouds / fog / scanlines
   3 flight paths / paragliders / aircraft behind radar
   4 radar
   5 aircraft after clearing radar
   6 HUD / tags
   7 readable content
========================================================= */
.bh-cinematic-hero{
  min-height:clamp(680px, 86svh, 880px);
  padding:clamp(136px, 15vh, 170px) 0 clamp(106px, 12vh, 132px);
  margin:0;
  overflow:hidden;
  isolation:isolate;
  contain:layout paint;
}

.bh-cinematic-hero::before{
  z-index:0;
  background:
    linear-gradient(90deg, rgba(3,5,8,.92) 0%, rgba(3,5,8,.72) 34%, rgba(3,5,8,.24) 60%, transparent 78%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.54)),
    radial-gradient(circle at 24% 24%, rgba(255,0,0,.08), transparent 28%);
}

.bh-cinematic-hero::after{ z-index:0; }
.bh-cinematic-hero .bh-particles{ z-index:1; }
.bh-cinematic-hero .bh-clouds,
.bh-cinematic-hero .bh-hero-fog,
.bh-cinematic-hero .bh-hero-noise,
.bh-cinematic-hero .bh-hero-scanlines,
.bh-cinematic-hero .bh-hero-overlays{ z-index:2; }
.bh-cinematic-hero .bh-paragliders,
.bh-cinematic-hero .bh-hero-airspace,
.bh-cinematic-hero .bh-hero-flight-paths,
.bh-cinematic-hero .bh-hero-depth{ z-index:3; }
.bh-cinematic-hero .bh-radar{ z-index:4; }
.bh-cinematic-hero .bh-hero-airspace-front{ z-index:5; }
.bh-cinematic-hero .bh-hero-tags,
.bh-cinematic-hero .bh-hero-hud-line{ z-index:6; }
.bh-cinematic-hero .bh-hero-container{ z-index:7; }

.bh-cinematic-hero .bh-hero-container{
  position:relative;
  width:min(1180px, calc(100% - 48px));
  margin-inline:auto;
  padding-inline:0;
}

.bh-cinematic-hero .bh-hero-content{
  width:min(700px, calc(100% - clamp(380px, 37vw, 510px)));
  min-width:520px;
  max-width:700px;
  padding:0;
  isolation:auto;
}

/* The readability gradient belongs to the hero background, not to a second
   panel above the SVG. This prevents the visible "layer over layer" effect. */
.bh-cinematic-hero .bh-hero-content::before{ content:none; }

.bh-cinematic-hero .bh-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  margin:0 0 18px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#d7b56d;
  background:rgba(5,8,13,.52);
  backdrop-filter:blur(10px);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.72rem;
  font-weight:800;
}

.bh-cinematic-hero .bh-hero-eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--hero-red);
  box-shadow:0 0 14px var(--hero-red-glow);
}

.bh-cinematic-hero .bh-hero-title{
  max-width:700px;
  margin:0 0 18px;
  text-wrap:balance;
}

.bh-cinematic-hero .bh-lead{
  max-width:640px;
  text-wrap:pretty;
}

.bh-cinematic-hero .bh-outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.72);
  text-shadow:none;
}

.bh-cinematic-hero .bh-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.bh-cinematic-hero .bh-radar-scope{
  right:clamp(20px, 4vw, 76px);
}

.bh-cinematic-hero .bh-hero-airspace,
.bh-cinematic-hero .bh-hero-airspace-front,
.bh-cinematic-hero .bh-paragliders{
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 24%, #000 46%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 24%, #000 46%, #000 100%);
}

/* Front copies are disabled by default. JavaScript reveals exactly one copy
   only after the matching aircraft has fully cleared the radar. */
.bh-cinematic-hero .bh-hero-airspace-front .bh-hero-aircraft{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.bh-cinematic-hero .bh-hero-airspace-front .bh-hero-aircraft.bh-layer-visible{
  opacity:1;
  visibility:visible;
}
.bh-cinematic-hero .bh-hero-airspace .bh-hero-aircraft.bh-layer-hidden{
  opacity:0;
  visibility:hidden;
}

.bh-cinematic-hero .bh-hero-tags .bh-wrap{
  width:min(1040px, calc(100% - 48px));
  padding-bottom:54px;
}

@media (max-width:1199px){
  .bh-cinematic-hero .bh-hero-content{
    width:min(620px, calc(100% - 330px));
    min-width:500px;
  }
  .bh-cinematic-hero .bh-radar-scope{ right:-42px; }
}

@media (max-width:991px){
  .bh-cinematic-hero{
    min-height:clamp(650px, 82svh, 780px);
    padding:132px 0 104px;
  }
  .bh-cinematic-hero .bh-hero-content{
    width:min(570px, calc(100% - 245px));
    min-width:440px;
  }
  .bh-cinematic-hero .bh-radar-scope{
    right:-72px;
    opacity:.58;
  }
}

@media (max-width:768px){
  .bh-cinematic-hero{
    min-height:clamp(620px, 84svh, 740px);
    padding:116px 0 108px;
    align-items:center;
  }
  .bh-cinematic-hero::before{
    background:
      linear-gradient(180deg, rgba(3,5,8,.76) 0%, rgba(3,5,8,.46) 48%, rgba(3,5,8,.78) 100%),
      radial-gradient(circle at 20% 18%, rgba(255,0,0,.10), transparent 34%);
  }
  .bh-cinematic-hero .bh-hero-container{
    width:min(100% - 32px, 680px);
  }
  .bh-cinematic-hero .bh-hero-content{
    width:100%;
    min-width:0;
    max-width:100%;
    padding:22px 0 18px;
  }
  .bh-cinematic-hero .bh-hero-eyebrow{
    margin-bottom:14px;
    font-size:.64rem;
    letter-spacing:.12em;
  }
  .bh-cinematic-hero .bh-hero-title{ margin-bottom:14px; }
  .bh-cinematic-hero .bh-hero-actions{
    margin-top:22px;
    gap:10px;
  }
  .bh-cinematic-hero .bh-hero-actions > a{ min-height:46px; }

  /* Radar is hidden in the base mobile rules, so the front aircraft copy must
     also be completely disabled. Only the original SVG aircraft remains. */
  .bh-cinematic-hero .bh-hero-airspace-front{ display:none; }
  .bh-cinematic-hero .bh-hero-airspace,
  .bh-cinematic-hero .bh-paragliders{
    mask-image:none;
    -webkit-mask-image:none;
  }
  .bh-cinematic-hero .bh-hero-tags .bh-wrap{
    width:calc(100% - 24px);
    max-height:78px;
    padding-bottom:38px;
    overflow:hidden;
  }
}

@media (max-width:480px){
  .bh-cinematic-hero{
    min-height:620px;
    padding:106px 0 104px;
  }
  .bh-cinematic-hero .bh-hero-container{ width:calc(100% - 24px); }
  .bh-cinematic-hero .bh-breadcrumb{
    margin-bottom:14px;
    padding:8px 11px;
    font-size:.66rem;
  }
  .bh-cinematic-hero .bh-hero-actions{ align-items:stretch; }
  .bh-cinematic-hero .bh-hero-actions > a{
    width:100%;
    justify-content:center;
  }
  .bh-cinematic-hero .bh-hero-tag:nth-child(n+4){ display:none; }
}