/* ── DETAIL PAGE SHARED STYLES ─────────────────────── */
/* Loaded by: subrecon.html, nucleuscloud.html, cheetah.html, cloudguard.html */
/* style.css already provides: html{scroll-behavior}, body{}, glass-panel, mesh-glow */

/* ── SVG ARCHITECTURE LABELS ───────────────────────── */
.arch-label {
  fill: #2c2e2f;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}
.arch-sublabel {
  fill: #687173;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0.7;
}

/* ── SVG NODE VARIANTS ─────────────────────────────── */
.arch-node       { fill: rgba(255,255,255,0.95); stroke: rgba(0,48,135,0.35);   stroke-width: 1.5; }
.arch-node-cyan  { fill: rgba(255,255,255,0.95); stroke: rgba(0,156,222,0.4);   stroke-width: 1.5; }
.arch-node-green { fill: rgba(255,255,255,0.95); stroke: rgba(52,211,153,0.4);   stroke-width: 1.5; }
.arch-node-red   { fill: rgba(255,255,255,0.95); stroke: rgba(248,113,113,0.45); stroke-width: 1.5; }

/* ── SVG ARROW LINES (nucleuscloud) ────────────────── */
.arch-arrow      { stroke: rgba(0,48,135,0.5); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }
.arch-arrow-cyan { stroke: rgba(0,156,222,0.5); stroke-width: 1.5; fill: none; marker-end: url(#arrow-cyan); }

/* ── SUBRECON RISK SEVERITY ────────────────────────── */
.risk-critical { color: #f87171; }
.risk-high     { color: #fb923c; }
.risk-medium   { color: #fbbf24; }
.risk-low      { color: #15803d; }

/* ── HERO ENTRANCE ANIMATION ───────────────────────── */
@keyframes srFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-in {
    opacity: 0;
    animation: srFadeUp 0.45s cubic-bezier(.22,.68,0,1.2) forwards;
  }
  .sr-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.38s ease, transform 0.38s ease;
    transition-delay: var(--sr-d, 0ms);
  }
  .sr-reveal.in { opacity: 1; transform: none; }
}

/* ── STEP CARDS ────────────────────────────────────── */
.step-card { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.step-card:hover {
  transform: translateX(5px);
  box-shadow: -3px 0 0 0 #003087, 0 4px 24px rgba(0,48,135,0.08);
}

/* ── TECH CARDS ────────────────────────────────────── */
.tech-card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,48,135,0.1);
  border-color: rgba(0,48,135,0.2);
}

/* ── PILL TAGS ─────────────────────────────────────── */
.pill-glow { transition: background 0.15s, border-color 0.15s, color 0.15s; }
.pill-glow:hover {
  background: rgba(0,48,135,0.1);
  border-color: rgba(0,48,135,0.3);
  color: #003087;
}