/* ============================================================================
   Cactus Software — Systems Architecture Design System
   Azure blue × cactus green · white / navy sections · line icons · pipelines
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------------- */
:root {
  /* Brand poles */
  --navy-900: #0B1220;
  --navy-800: #0F172A;
  --navy-700: #1E293B;
  --navy-600: #334155;

  --azure-700: #075985;
  --azure-600: #0369A1;   /* primary CTA / links */
  --azure-500: #0EA5E9;   /* bright accent / node glow */
  --azure-300: #7DD3FC;

  --cactus-700: #0B5743;
  --cactus-600: #0F6E56;  /* secondary brand */
  --cactus-500: #1D9E75;  /* healthy / online */
  --cactus-300: #6EE7B7;

  /* Light surfaces */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --border: #E2E8F0;
  --fg: #0F172A;
  --muted-fg: #64748B;

  /* Dark surfaces (navy sections) */
  --d-bg: #0B1220;
  --d-surface: #111B2E;
  --d-border: #1E293B;
  --d-fg: #E2E8F0;
  --d-muted: #94A3B8;

  /* Status */
  --ok: #16A34A;
  --warn: #D97706;
  --danger: #DC2626;

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radius / elevation */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 6px 24px -8px rgba(15, 23, 42, 0.12);
  --shadow-azure: 0 8px 30px -10px rgba(14, 165, 233, 0.35);

  /* Layout */
  --maxw: 1140px;
  --gutter: 1.5rem;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--d-bg); }
body {
  font-family: var(--font);
  color: var(--fg);
  background: transparent; /* lets the fixed .tech-bg layer show through transparent (dark) sections */
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--azure-600); text-decoration: none; }
::selection { background: var(--azure-300); color: var(--navy-900); }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
/* Blazor's <FocusOnNavigate> programmatically focuses the h1 on load for screen readers.
   The heading is not interactive, so hide its focus ring. Real controls keep theirs. */
h1:focus, h1:focus-visible { outline: none; }

/* ---- Layout primitives ---------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
/* Light sections stay opaque (cover the animated background). Dark sections go
   transparent so the fixed .tech-bg shows through; its solid navy base keeps text
   contrast identical to before. */
.section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; overflow: hidden; background-color: var(--bg); }
.section--dark { background: transparent; color: var(--d-fg); }
.section--tint { background-color: var(--surface); }

/* Light sections carry soft azure/green glows so the background reads through
   them too, kept low enough that dark body text stays fully readable. */
.section:not(.section--dark)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(40vw 40vw at 6% -5%, rgba(14, 165, 233, 0.09), transparent 62%),
    radial-gradient(36vw 36vw at 102% 105%, rgba(29, 158, 117, 0.07), transparent 62%);
  will-change: transform;
  animation: lightGlowDrift 30s ease-in-out infinite;
}
@keyframes lightGlowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(1.8%, 1.4%, 0) scale(1.05); }
}
.section > .container { position: relative; z-index: 1; } /* keep content above the motif */

/* Section heads */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--azure-600);
  margin-bottom: 0.85rem;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1.5px;
  background: linear-gradient(90deg, var(--azure-500), var(--cactus-500));
}
.section--dark .eyebrow { color: var(--azure-300); }
.h-section { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 0.9rem; }
.lead { font-size: 1.08rem; color: var(--muted-fg); max-width: 56ch; }
.section--dark .lead { color: var(--d-muted); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  padding: 0.8rem 1.4rem; border-radius: var(--r-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-height: 44px; line-height: 1;
}
.btn:focus-visible { outline: 3px solid var(--azure-300); outline-offset: 2px; }
.btn-primary { background: var(--azure-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--azure-700); transform: translateY(-1px); box-shadow: var(--shadow-azure); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--azure-500); color: var(--azure-600); }
.section--dark .btn-ghost { color: var(--d-fg); border-color: var(--d-border); }
.section--dark .btn-ghost:hover { border-color: var(--azure-500); color: var(--azure-300); }
.btn svg { width: 18px; height: 18px; stroke-width: 2; }

/* ---- Generic card --------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.6rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--azure-300); box-shadow: var(--shadow); }
.section--dark .card { background: var(--d-surface); border-color: var(--d-border); }
.section--dark .card:hover { border-color: var(--azure-500); }

/* Line-icon chip */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(3,105,161,0.10), rgba(29,158,117,0.10));
  border: 1px solid var(--border); color: var(--azure-600);
  margin-bottom: 1.1rem;
}
.icon-chip svg { width: 24px; height: 24px; stroke-width: 1.6; }
.section--dark .icon-chip { border-color: var(--d-border); color: var(--azure-300); background: linear-gradient(135deg, rgba(14,165,233,0.14), rgba(29,158,117,0.14)); }

/* ---- Grids ---------------------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Pills / tags --------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.35rem 0.85rem;
  font-size: 0.82rem; color: var(--muted-fg); font-weight: 500;
}
.section--dark .pill { background: var(--navy-800); border-color: var(--d-border); color: var(--d-muted); }
.tag {
  font-family: var(--mono); font-size: 0.74rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.2rem 0.5rem; color: var(--navy-600);
}
.section--dark .tag { background: var(--navy-800); border-color: var(--d-border); color: var(--azure-300); }

/* ---- Status dot ----------------------------------------------------------- */
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dot--ok { background: var(--cactus-500); box-shadow: 0 0 0 3px rgba(29,158,117,0.18); }
.status-dot--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }

/* ---- Pipeline / node motif ------------------------------------------------ */
.node-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.node-net .link {
  stroke: url(#cs-flow); stroke-width: 1.5; fill: none;
  stroke-dasharray: 6 8; animation: dash 2.6s linear infinite;
}
.node-net .node { fill: var(--azure-500); }
.node-net .node--green { fill: var(--cactus-500); }
@keyframes dash { to { stroke-dashoffset: -28; } }

/* ---- Utility -------------------------------------------------------------- */
.muted { color: var(--muted-fg); }
.section--dark .muted { color: var(--d-muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.eq-h { height: 100%; display: flex; flex-direction: column; }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---- Blazor error UI (template) ------------------------------------------- */
#blazor-error-ui {
  background: var(--navy-800); color: #fff;
  bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); display: none;
  left: 0; padding: 0.8rem 1.4rem; position: fixed; width: 100%; z-index: 1000;
  font-size: 0.9rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.75rem; }

/* ============================================================================
   Animated technology background (fixed, behind all content, z-index: -1)
   Architecture grid + glowing nodes + data-flow lines + drifting particles.
   Visible only through the transparent (dark) sections. Base stays solid navy
   so text contrast is never reduced. JS drives subtle scroll parallax + zoom.
   ========================================================================== */
:root { --bg-scale: 1.04; } /* updated by TechBackground's rAF scroll handler (zoom) */

.tech-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--d-bg);
  pointer-events: none;
}
.tech-bg__inner {
  position: absolute;
  inset: -8%;
  transform: scale(var(--bg-scale));
  will-change: transform;
}

/* Soft glowing nodes (azure + cactus) drifting slowly */
.tech-bg__glow { position: absolute; border-radius: 50%; filter: blur(64px); }
.tech-bg__glow--azure {
  width: 42vw; height: 42vw; left: 6%; top: 8%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.20), transparent 70%);
  animation: techDriftA 24s ease-in-out infinite;
}
.tech-bg__glow--cactus {
  width: 38vw; height: 38vw; right: 4%; bottom: 6%;
  background: radial-gradient(circle, rgba(29, 158, 117, 0.16), transparent 70%);
  animation: techDriftB 30s ease-in-out infinite;
}
.tech-bg__glow--azure2 {
  width: 26vw; height: 26vw; right: 24%; top: 40%;
  background: radial-gradient(circle, rgba(3, 105, 161, 0.16), transparent 70%);
  animation: techDriftA 34s ease-in-out infinite reverse;
}
@keyframes techDriftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4%, 3%); } }
@keyframes techDriftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3%, -4%); } }

/* Data-flow lines + connection nodes */
.tech-bg__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.tech-bg__lines .flow {
  fill: none; stroke: url(#techFlow); stroke-width: 1.1;
  stroke-dasharray: 4 11; opacity: 0.55; animation: techDash 3.4s linear infinite;
}
.tech-bg__lines .flow.s2 { animation-duration: 4.6s; opacity: 0.4; }
.tech-bg__lines .flow.s3 { animation-duration: 5.6s; opacity: 0.45; }
.tech-bg__lines .node { fill: #0EA5E9; opacity: 0.7; }
.tech-bg__lines .node--g { fill: #1D9E75; }
.tech-bg__lines .node-ring { fill: none; stroke: rgba(14,165,233,0.4); stroke-width: 1; }
@keyframes techDash { to { stroke-dashoffset: -30; } }

/* Drifting data particles */
.tech-bg__particles { position: absolute; inset: 0; }
.tech-bg__particles i {
  position: absolute; bottom: -10px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #7DD3FC; box-shadow: 0 0 6px rgba(14, 165, 233, 0.8);
  opacity: 0; animation: techParticle linear infinite;
}
.tech-bg__particles i.g { background: #6EE7B7; box-shadow: 0 0 6px rgba(29, 158, 117, 0.8); }
@keyframes techParticle {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 0.85; }
  88%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-78vh); }
}

/* Mobile: lighter (no particles or flow lines, no parallax, softer glows) */
@media (max-width: 768px) {
  .tech-bg__particles, .tech-bg__lines { display: none; }
  .tech-bg__glow { filter: blur(50px); }
  .tech-bg__inner { transform: none; }
  .section:not(.section--dark)::after { animation: none; } /* keep light glows static on mobile */
}

/* Reduced motion: hold everything still */
@media (prefers-reduced-motion: reduce) {
  .tech-bg__inner { transform: none !important; }
  .tech-bg__glow, .tech-bg__lines .flow, .tech-bg__particles i { animation: none !important; }
  .tech-bg__particles { display: none; }
  .section:not(.section--dark)::after { animation: none !important; }
}