/* ==========================================================================
   Home hero — systems-convergence schematic (signature element)
   Three industry nodes trace into a central MBSE hub, then out to a
   validated-systems endpoint. Draws in on load; idle pulse after.
   ========================================================================== */

.hero {
  position: relative;
  padding: 88px 0 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-grid);
}

.hero__grid-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,31,61,0.14), transparent 60%);
  pointer-events: none;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero h1 { margin: 18px 0 22px; }
.hero h1 span { color: var(--red-signal); }

.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }

.hero__image {
  position: relative;
  z-index: 2;
  border: 1px solid var(--line-grid);
  background: var(--bg-panel);
}
.hero__image::before, .hero__image::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  z-index: 2;
  pointer-events: none;
}
.hero__image::before { top: 10px; left: 10px; border-top: 2px solid var(--red-signal); border-left: 2px solid var(--red-signal); }
.hero__image::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--red-signal); border-right: 2px solid var(--red-signal); }
.hero__image-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.hero__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.08) saturate(1.05);
}
.hero__image-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.85) 75%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  z-index: 1;
}
.hero__image-caption .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.hero__image-caption .credit {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-faint);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hero__image { margin-top: 8px; max-width: 420px; }
}

.hero__schematic {
  position: relative;
  margin-top: 64px;
  z-index: 1;
}
.hero__schematic svg { width: 100%; height: auto; display: block; }

.schema-node circle {
  fill: var(--bg-panel);
  stroke: var(--line-grid-strong);
  stroke-width: 1.5;
}
.schema-node.is-active circle { stroke: var(--red-signal); }
.schema-node .pulse {
  fill: none;
  stroke: var(--red-signal);
  stroke-width: 1;
  opacity: 0;
}
.schema-node text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--text-muted);
  text-transform: uppercase;
}
.schema-node .node-id { fill: var(--red-signal); font-size: 9px; }

.schema-hub circle { fill: var(--red-ember); stroke: var(--red-signal); stroke-width: 1.5; }
.schema-hub text { fill: #fff; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em; }

.schema-trace {
  fill: none;
  stroke: var(--line-grid-strong);
  stroke-width: 1.5;
  stroke-dasharray: 6 500;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .schema-trace {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: trace-draw 1.6s ease forwards;
  }
  .schema-trace.t1 { animation-delay: 0.1s; }
  .schema-trace.t2 { animation-delay: 0.35s; }
  .schema-trace.t3 { animation-delay: 0.6s; }
  .schema-trace.t4 { animation-delay: 1.1s; }

  .schema-node { opacity: 0; animation: node-in 0.4s ease forwards; }
  .schema-node.n1 { animation-delay: 0.05s; }
  .schema-node.n2 { animation-delay: 0.3s; }
  .schema-node.n3 { animation-delay: 0.55s; }
  .schema-hub { opacity: 0; animation: node-in 0.4s ease forwards; animation-delay: 1s; }
  .schema-goal { opacity: 0; animation: node-in 0.4s ease forwards; animation-delay: 1.5s; }

  .schema-node .pulse { animation: pulse-ring 2.4s ease-out infinite; animation-delay: 2.2s; }
  .schema-node.n2 .pulse { animation-delay: 3s; }
  .schema-node.n3 .pulse { animation-delay: 3.8s; }
}

@keyframes trace-draw { to { stroke-dashoffset: 0; } }
@keyframes node-in { to { opacity: 1; } }
@keyframes pulse-ring {
  0% { opacity: 0.6; transform-origin: center; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Scanline sweep across hero on load — the one glitch flourish, used once */
.hero__scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-signal), transparent);
  box-shadow: 0 0 16px var(--red-glow);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scanline { animation: scan-sweep 1.8s ease-in-out 0.1s; }
}
@keyframes scan-sweep {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Interior page HUD corner-frame header used on service/about/contact pages */
.hud-frame { position: relative; }
.hud-frame::before, .hud-frame::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--red-signal);
}
.hud-frame::before { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.hud-frame::after { bottom: -10px; right: -10px; border-left: none; border-top: none; }