/* ==========================================================================
   MITRE hero: comet-arc + bloom treatment
   Append AFTER mitre.css so it overrides the existing .mitre-hero rules.

   REQUIRED MARKUP: add this as the FIRST child of <section class="mitre-hero">
   (before .case-container):

   <svg class="hero-arc" viewBox="0 0 1440 720" preserveAspectRatio="xMaxYMid slice" aria-hidden="true">
     <defs>
       <!-- tail fades in from nothing, head is bright -->
       <linearGradient id="arcFade" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="1060" y2="0">
         <stop offset="0"   stop-color="#fff" stop-opacity="0"/>
         <stop offset=".55" stop-color="#fff" stop-opacity=".22"/>
         <stop offset="1"   stop-color="#fff" stop-opacity=".95"/>
       </linearGradient>
       <radialGradient id="headHalo">
         <stop offset="0"   stop-color="#fff"    stop-opacity=".55"/>
         <stop offset=".35" stop-color="#90ebff" stop-opacity=".18"/>
         <stop offset="1"   stop-color="#12c0ff" stop-opacity="0"/>
       </radialGradient>
       <filter id="bloomWide" x="-20%" y="-50%" width="140%" height="200%">
         <feGaussianBlur stdDeviation="14"/>
       </filter>
       <filter id="bloomTight" x="-20%" y="-50%" width="140%" height="200%">
         <feGaussianBlur stdDeviation="3"/>
       </filter>
     </defs>

     <!-- 1. wide soft bloom under the arc -->
     <path class="arc-bloom" d="M-40 600 C 260 170, 760 60, 1060 250"
           filter="url(#bloomWide)" stroke="url(#arcFade)"/>
     <!-- 2. crisp hairline arc -->
     <path class="arc-line" d="M-40 600 C 260 170, 760 60, 1060 250"
           stroke="url(#arcFade)"/>
     <!-- 3. travelling highlight (the "comet") -->
     <path class="arc-run" d="M-40 600 C 260 170, 760 60, 1060 250"
           pathLength="100" filter="url(#bloomTight)"/>
     <!-- 4. head: halo + core -->
     <circle class="head-halo" cx="1060" cy="250" r="150" fill="url(#headHalo)"/>
     <circle class="head-core" cx="1060" cy="250" r="6"/>
   </svg>

   TUNING: (1060, 250) is the comet head. Nudge cx/cy (and the path's final
   point + the gradient x2) until it lands where you want, e.g. just above
   the INSIGHT anchor or the top-right node.
   ========================================================================== */

/* ---------- 1. Background: near-black with ONE soft light source ---------- */
/*.mitre-hero {
  background:
    radial-gradient(ellipse 38% 46% at 76% 30%, rgba(144, 235, 255, .16), transparent 70%),
    radial-gradient(ellipse 30% 40% at 62% 78%, rgba(192, 0, 255, .12), transparent 70%),
    linear-gradient(160deg, #06060c 0%, #0a0838 62%, #310540 100%);
}*/

.mitre-hero {
  background: 
    radial-gradient(ellipse 38% 46% at 76% 30%, rgba(144, 235, 255, .16), transparent 70%), 
    radial-gradient(ellipse 30% 40% at 62% 78%, rgba(192, 0, 255, .12), transparent 70%), 
    linear-gradient(160deg, #06060c 0%, #0a0838 62%, #310540 100%);
}

/* keep the faint grid, but let it fade out toward the left so text stays clean */
.mitre-hero:after {
  mask-image: radial-gradient(ellipse 50% 70% at 72% 40%, #000, transparent 75%);
  opacity: .8;
}

/* ---------- 2. The arc layer ---------- */
.hero-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen; /* light adds to the bg instead of covering it */
}

.hero-arc path {
  fill: none;
  stroke-linecap: round;
}

.arc-bloom { stroke-width: 22; opacity: .35; }
.arc-line  { stroke-width: 1.5; }

.arc-run {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-dasharray: 14 86;     /* 14% of the path lit, rest dark (pathLength=100) */
  stroke-dashoffset: 0;
  opacity: .9;
  animation: arc-travel 7s cubic-bezier(.45, 0, .25, 1) infinite;
}

@keyframes arc-travel {
  0%   { stroke-dashoffset: 14;   opacity: 0; }
  12%  { opacity: .9; }
  85%  { opacity: .9; }
  100% { stroke-dashoffset: -86;  opacity: 0; }  /* leading edge arrives at the head */
}

.head-core {
  fill: #fff;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px rgba(144, 235, 255, .9));
}

.head-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: head-breathe 5s ease-in-out infinite;
}

@keyframes head-breathe {
  0%, 100% { transform: scale(.92); opacity: .75; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* ---------- 3. Headline bloom ---------- */
.mitre-hero h1 {
  color: #fff;
  /* stacked shadows = tight core glow + wide atmospheric bloom */
  text-shadow:
    0 0 6px  rgba(255, 255, 255, .35),
    0 0 22px rgba(255, 255, 255, .22),
    0 0 60px rgba(144, 235, 255, .18);
}

.mitre-hero h1 em {
  color: #ff54c2; /* keep your accent */
  text-shadow:
    0 0 8px  rgba(255, 84, 194, .55),
    0 0 28px rgba(255, 84, 194, .38),
    0 0 70px rgba(192, 0, 255, .35);
}

/* ---------- 4. Eyebrow: dim, small, very wide tracking (like "NOW LIVE") ---------- */
.mitre-hero .eyebrow {
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .38em;
}

/* ---------- 5. Signal field: make it emit light instead of draw outlines ---------- */
.signal-node {
  box-shadow:
    0 0 0 1px rgba(144, 235, 255, .08) inset,
    0 0 22px rgba(18, 192, 255, .18);
}

.signal-field .orbit {
  filter: drop-shadow(0 0 4px rgba(144, 235, 255, .35));
}

.anchor-node {
  box-shadow:
    0 0 24px rgba(255, 255, 255, .25),
    0 0 70px rgba(192, 0, 255, .45),
    inset 0 0 10px rgba(179, 140, 255, .25);
}

/* soft expanding light instead of a hard ring */
.signal-wave {
  border: 0;
  background: radial-gradient(circle, rgba(144, 235, 255, .28), transparent 65%);
}

/* ---------- 6. Mobile + accessibility ---------- */
@media (max-width: 760px) {
  .hero-arc { opacity: .7; }
  .arc-bloom { stroke-width: 14; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-run, .head-halo, .signal-wave { animation: none; }
  .arc-run { opacity: 0; }
}