/* =========================================================================
   AEGIS // SPANOS — heroes expansion
   Two new landing treatments (Radar Scope, Data Stream) + section-hero banners.
   Loaded after aegis-site.css / aegis-sections.css.
   ========================================================================= */

/* ---- switcher: reveal D / E landing variants -------------------------- */
body[data-hero="d"] .hero-variant--d,
body[data-hero="e"] .hero-variant--e { display: block; }

/* =========================================================================
   RADAR SCOPE component  (landing hero D + Evolution banner)
   ========================================================================= */
.radar { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; }
.radar .face { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(125,217,255,.3);
  box-shadow: 0 0 30px rgba(31,199,255,.18) inset, 0 0 24px rgba(8,60,110,.4); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(8,40,70,.35), rgba(2,8,20,.5)); }
.radar svg.rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar .rings .ring { fill: none; stroke: rgba(125,217,255,.22); stroke-width: 1; }
.radar .rings .ax { stroke: rgba(125,217,255,.18); stroke-width: 1; }
.radar .rings .tick { stroke: rgba(125,217,255,.4); stroke-width: 1; }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(31,199,255,.34) 0deg, rgba(31,199,255,.05) 26deg, transparent 60deg);
  animation: radarSweep 4.6s linear infinite; transform-origin: 50% 50%; }
.radar .sweep::after { content: ""; position: absolute; top: 50%; left: 50%; width: 50%; height: 1px;
  background: linear-gradient(90deg, var(--cyan-200), transparent); box-shadow: 0 0 8px var(--cyan-400); transform-origin: left; }
@keyframes radarSweep { to { transform: rotate(360deg); } }
.radar .blip { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: var(--cyan-200); box-shadow: 0 0 8px var(--cyan-400); opacity: 0; animation: blipPing 4.6s linear infinite; }
@keyframes blipPing { 0%, 18% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1.3); }
  46% { opacity: .9; } 80%, 100% { opacity: 0; transform: scale(.7); } }
.radar .blip-label { position: absolute; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  color: var(--cyan-200); text-shadow: var(--glow-text); white-space: nowrap; transform: translate(8px, -50%); }
.radar .core { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  background: var(--cyan-100); box-shadow: 0 0 12px var(--cyan-400); }
.radar .read { position: absolute; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--cyan-300); text-shadow: var(--glow-text); }
.radar .read.tl { top: 6%; left: 6%; } .radar .read.br { bottom: 6%; right: 6%; }
@media (prefers-reduced-motion: reduce) { .radar .sweep, .radar .blip { animation: none; } .radar .sweep { opacity: .4; } }

/* =========================================================================
   DATA STREAM component  (landing hero E + Contact banner)
   ========================================================================= */
.stream { position: relative; width: 100%; max-width: 420px; margin: 0 auto; display: grid; gap: 14px; }
.stream .scope { position: relative; height: 150px; border: var(--hair); background: rgba(8,22,42,.3);
  box-shadow: inset 0 0 24px rgba(8,60,110,.3); overflow: hidden; }
.stream .scope::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(125,220,255,.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(125,220,255,.06) 0 1px, transparent 1px 28px); }
.stream .scope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stream .scope .wave { fill: none; stroke: var(--cyan-300); stroke-width: 1.4; filter: drop-shadow(0 0 5px var(--cyan-500)); }
.stream .scope .wave2 { fill: none; stroke: rgba(125,220,255,.4); stroke-width: 1; }
.stream .eq { display: flex; align-items: flex-end; gap: 4px; height: 64px; padding: 0 2px; }
.stream .eq i { flex: 1; background: linear-gradient(180deg, var(--cyan-200), var(--cyan-700));
  box-shadow: 0 0 6px var(--cyan-500); transform-origin: bottom; height: 30%;
  animation: eqBounce 1.2s var(--ease-hud) infinite alternate; }
@keyframes eqBounce { to { height: 100%; } }
.stream .rows { font-family: var(--font-mono); font-size: 10px; line-height: 1.7; color: var(--cyan-200); letter-spacing: .04em; }
.stream .rows .r { display: flex; justify-content: space-between; border-bottom: var(--hair-soft, 1px solid rgba(125,217,255,.1)); padding: 2px 0; }
.stream .rows .r b { color: var(--cyan-500); font-weight: 400; }
.stream .rows .r .v { color: var(--cyan-100); }
@media (prefers-reduced-motion: reduce) { .stream .eq i { animation: none; height: 60%; } }

/* =========================================================================
   LANDING HERO D — RADAR SCOPE
   ========================================================================= */
.hero-d-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,80px); align-items: center; width: 100%; }
.hero-d-grid .radar-col { position: relative; }
.hero-d-grid .chip { position: absolute; }
.hero-d-grid .chip.c1 { top: 4%; right: 2%; animation-delay: -1.2s; }
.hero-d-grid .chip.c2 { bottom: 8%; left: -2%; animation-delay: -2.6s; }

/* =========================================================================
   LANDING HERO E — DATA STREAM
   ========================================================================= */
.hero-e-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,80px); align-items: center; width: 100%; }

/* =========================================================================
   SECTION-HERO BANNERS  (lead each content section)
   ========================================================================= */
.sec-hero {
  position: relative;
  min-height: clamp(380px, 58vh, 560px);
  display: flex; align-items: center;
  padding-block: clamp(56px, 8vw, 96px);
  border-top: var(--hair);
  overflow: hidden;
}
.sec-hero .cmark { position: absolute; }
.sec-hero .cmark.tl { top: 26px; left: var(--gutter); }
.sec-hero .cmark.tr { top: 26px; right: var(--gutter); }
.sec-hero .cmark.bl { bottom: 26px; left: var(--gutter); }
.sec-hero .cmark.br { bottom: 26px; right: var(--gutter); }
.sec-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,72px); align-items: center; width: 100%; }
.sec-hero-copy { position: relative; z-index: 2; }
.sec-hero-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 6vw, 86px); line-height: 1.14; color: var(--cyan-50); text-shadow: 0 0 18px rgba(31,199,255,.26);
  margin: 18px 0 30px; text-wrap: wrap; }
.sec-hero-copy .lead { max-width: 52ch; }
.sec-hero-deco { position: relative; z-index: 1; }
.sec-hero .index-watermark {
  position: absolute; right: clamp(-10px, 1vw, 20px); top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(180px, 26vw, 360px); line-height: 1;
  color: rgba(125,217,255,.04); z-index: 0; pointer-events: none; letter-spacing: -.04em;
}

/* — Command Center banner (About): subject-scan reticle frame deco — */
.sec-hero--cmd .scan-frame { position: relative; max-width: 320px; margin-left: auto; aspect-ratio: 4/5;
  border: var(--hair); background: linear-gradient(135deg, rgba(125,220,255,.06), transparent),
    repeating-linear-gradient(0deg, rgba(125,220,255,.05) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 30px rgba(8,60,110,.35); }
.sec-hero--cmd .scan-frame .bracket { position: absolute; width: 24px; height: 24px; border: 1.4px solid var(--cyan-300); filter: drop-shadow(0 0 5px var(--cyan-500)); }
.sec-hero--cmd .scan-frame .bracket.tl { top:-2px; left:-2px; border-right:0; border-bottom:0; }
.sec-hero--cmd .scan-frame .bracket.tr { top:-2px; right:-2px; border-left:0; border-bottom:0; }
.sec-hero--cmd .scan-frame .bracket.bl { bottom:-2px; left:-2px; border-right:0; border-top:0; }
.sec-hero--cmd .scan-frame .bracket.br { bottom:-2px; right:-2px; border-left:0; border-top:0; }
.sec-hero--cmd .scan-frame .line { position: absolute; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--cyan-300), transparent); box-shadow: 0 0 12px var(--cyan-500); animation: scanY 4.5s var(--ease-hud) infinite; z-index: 3; }
.sec-hero--cmd .scan-frame > image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.sec-hero--cmd .scan-frame .scan-tex { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(125,220,255,.05) 0 1px, transparent 1px 5px); mix-blend-mode: overlay; z-index: 2; pointer-events: none; }
.sec-hero--cmd .ring-deco { position: absolute; width: 120px; height: 120px; left: -34px; top: -34px; }
.sec-hero--cmd .meta-list { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; max-width: 320px; margin-left: auto; }

/* — Blueprint banner (Expertise): grid + fan nodes — */
.sec-hero--blueprint { }
.sec-hero--blueprint .bp-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(125,220,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(125,220,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(125,220,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(125,220,255,.11) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  mask-image: radial-gradient(ellipse 70% 90% at 70% 50%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 50%, #000 20%, transparent 85%); }
.sec-hero--blueprint .fan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sec-hero--blueprint .fan path { stroke: rgba(125,220,255,.3); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.sec-hero--blueprint .fan .moving { fill: var(--cyan-100); filter: drop-shadow(0 0 4px var(--cyan-500)); }
.sec-hero--blueprint .node-c { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--cyan-100); box-shadow: 0 0 12px var(--cyan-400); }
.sec-hero--blueprint .skill-node { position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--cyan-100); background: rgba(8,26,52,.66); border: 1px solid rgba(125,220,255,.35); padding: 5px 9px; white-space: nowrap; box-shadow: 0 0 12px rgba(31,199,255,.2); }
.sec-hero--blueprint .skill-node .k { color: var(--cyan-500); }

/* — Boot banner (Projects): terminal — */
.sec-hero--boot .term { padding: 20px 22px; min-height: 280px; }
.sec-hero--boot .term header { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom: var(--hair); margin-bottom: 14px; }
.sec-hero--boot .term header .dot { width:6px; height:6px; border-radius:50%; background: var(--cyan-400); box-shadow: 0 0 8px var(--cyan-500); }
.sec-hero--boot .term header .t { font-family: var(--font-display); font-weight:600; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color: var(--cyan-100); }
.sec-hero--boot .term header .r { margin-left:auto; font-family: var(--font-mono); font-size:10px; color: var(--cyan-500); letter-spacing:.1em; }
.sec-hero--boot .term .log { font-family: var(--font-mono); font-size:12.5px; line-height:1.85; color: var(--cyan-200); letter-spacing:.02em; min-height: 200px; }
.sec-hero--boot .term .log .ln { display:block; white-space: pre-wrap; }
.sec-hero--boot .term .log .t { color: var(--cyan-600); }
.sec-hero--boot .term .log .ok { color: var(--signal-ok); }
.sec-hero--boot .term .log .key { color: var(--cyan-50); }
.sec-hero--boot .term .log .cursor { display:inline-block; width:8px; height:14px; background: var(--cyan-300); box-shadow: 0 0 8px var(--cyan-500); vertical-align:-2px; animation: curBlink 1s steps(1) infinite; }

/* — Radar banner (Evolution) & Stream banner (Contact) reuse .radar / .stream — */
.sec-hero--radar .radar { max-width: 360px; }
.sec-hero--stream .stream { max-width: 440px; }

/* contact banner centers its content */
.sec-hero--stream .sec-hero-inner { display: block; text-align: center; }
.sec-hero--stream .sec-hero-copy { max-width: 880px; margin: 0 auto; }
.sec-hero--stream .sec-hero-copy .lead { margin-inline: auto; }
.sec-hero--stream .sec-hero-deco { max-width: 460px; margin: 30px auto 0; }
.sec-hero--stream .stream { margin-top: 30px; }

/* Section content sits right under its banner — kill the old top padding/header gap */
.section.has-banner { padding-top: clamp(40px, 6vw, 72px); }

/* responsive */
@media (max-width: 900px) {
  .hero-d-grid, .hero-e-grid, .sec-hero-inner { grid-template-columns: 1fr; }
  .hero-d-grid .radar-col, .hero-e-grid .stream-col, .sec-hero-deco { display: none; }
  .sec-hero--stream .sec-hero-deco { display: block; }
  .sec-hero { min-height: 0; }
  .sec-hero .index-watermark { display: none; }
}