/* =========================================================
   AMIHAN — "The Human Interface" visual system
   Shared by index.html (light) and strategy.html (dark).
   Themed entirely through CSS custom properties so it drops
   into either page without touching page-level styles.
   ========================================================= */

/* ---- Light theme defaults (marketing page) ---- */
.iface {
  --if-bg: #ffffff;
  --if-bg-2: #f0f1f6;
  --if-ink: #080a12;
  --if-text: #2e3140;
  --if-muted: #6b7183;
  --if-line: #d9dbe6;
  --if-line-soft: #e7eaf6;
  --if-accent: #1432f5;      /* Amihan electric blue */
  --if-accent-2: #65b2f9;    /* sail */
  --if-glow: rgba(20, 50, 245, .22);
  --if-node: #ffffff;
  --if-node-border: #d9dbe6;
  --if-claude: #d97757;
  --if-openai: #10a37f;
  --if-neo4j: #4c8eda;
  --if-aws: #ff9900;
  --if-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --if-ease: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  padding: clamp(72px, 9vw, 120px) 0;
  background:
    radial-gradient(60rem 30rem at 50% 0%, var(--if-glow), transparent 70%),
    var(--if-bg);
  color: var(--if-text);
  overflow: hidden;
}

/* ---- Dark theme (strategy page) ---- */
.iface--dark {
  --if-bg: #0d0030;
  --if-bg-2: #160042;
  --if-ink: #eef0ff;
  --if-text: #b4bae8;
  --if-muted: #8189c9;
  --if-line: rgba(180, 186, 232, .28);
  --if-line-soft: rgba(180, 186, 232, .14);
  --if-accent: #75fbc2;      /* mint */
  --if-accent-2: #5dcbe7;    /* cyan */
  --if-glow: rgba(117, 251, 194, .14);
  --if-node: rgba(33, 31, 84, .7);
  --if-node-border: rgba(180, 186, 232, .28);
  --if-claude: #75fbc2;
  --if-openai: #5dcbe7;
  --if-neo4j: #018bff;
  --if-aws: #ff9900;
}

.iface__wrap { width: min(1160px, 92vw); margin-inline: auto; position: relative; z-index: 1; }

/* Scanline / grid texture */
.iface::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--if-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--if-line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%);
  opacity: .8;
}

/* ---- Head ---- */
.iface__head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.iface__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--if-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--if-accent);
  margin: 0 0 18px;
}
.iface__eyebrow::before, .iface__eyebrow::after {
  content: ""; width: 28px; height: 1px; background: var(--if-accent); opacity: .6;
}
.iface__title {
  font-family: inherit; font-weight: 700; letter-spacing: -.025em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.8vw, 3rem); color: var(--if-ink); margin: 0 0 18px;
}
.iface__title em {
  font-style: normal;
  background: linear-gradient(92deg, var(--if-accent), var(--if-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.iface__lede { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--if-muted); margin: 0; }

/* ---- Stage ---- */
.iface__stage {
  position: relative;
  border: 1px solid var(--if-line);
  border-radius: 24px;
  background:
    radial-gradient(40% 60% at 50% 50%, var(--if-glow), transparent 70%),
    var(--if-bg-2);
  padding: clamp(16px, 2.5vw, 32px);
  box-shadow: 0 30px 80px -40px rgba(8, 10, 18, .35);
}
.iface--dark .iface__stage { box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255,255,255,.04); }

/* Corner brackets — instrument frame */
.iface__stage::before, .iface__stage::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: var(--if-accent); border-style: solid; opacity: .7;
}
.iface__stage::before { left: 12px; top: 12px; border-width: 1.5px 0 0 1.5px; }
.iface__stage::after { right: 12px; bottom: 12px; border-width: 0 1.5px 1.5px 0; }

.iface__hud {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--if-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--if-muted); margin-bottom: 8px; padding: 0 12px;
}
.iface__hud span { display: inline-flex; align-items: center; gap: 8px; }
.iface__hud i { width: 6px; height: 6px; border-radius: 50%; background: var(--if-accent); box-shadow: 0 0 8px var(--if-accent); animation: if-blink 2.2s ease-in-out infinite; }
@keyframes if-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.iface__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* SVG theming */
.iface__svg text { font-family: inherit; fill: var(--if-ink); }
.iface__svg .if-col-label { font-family: var(--if-mono); font-size: 11px; letter-spacing: 2.2px; fill: var(--if-muted); font-weight: 600; }
.iface__svg .if-col-label--center { fill: var(--if-accent); }
.iface__svg .if-node { fill: var(--if-node); stroke: var(--if-node-border); stroke-width: 1; }
.iface__svg .if-node-text { font-size: 14px; font-weight: 600; }
.iface__svg .if-node-sub { font-family: var(--if-mono); font-size: 9.5px; letter-spacing: 1.2px; fill: var(--if-muted); }
.iface__svg .if-dot--claude { fill: var(--if-claude); }
.iface__svg .if-dot--openai { fill: var(--if-openai); }
.iface__svg .if-dot--neo4j { fill: var(--if-neo4j); }
.iface__svg .if-dot--aws { fill: var(--if-aws); }
.iface__svg .if-dot--ent { fill: var(--if-accent-2); }

/* Flow lines */
.iface__svg .if-flow { fill: none; stroke: var(--if-line); stroke-width: 1.25; }
.iface__svg .if-flow--active {
  fill: none; stroke: var(--if-accent); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 6 14; opacity: .75;
  animation: if-dash 1.6s linear infinite;
}
.iface__svg .if-flow--active.out { stroke: var(--if-accent-2); animation-direction: normal; }
@keyframes if-dash { to { stroke-dashoffset: -20; } }

/* Packets travelling along paths */
.iface__svg .if-packet { fill: var(--if-accent); filter: drop-shadow(0 0 4px var(--if-accent)); }
.iface__svg .if-packet--out { fill: var(--if-accent-2); filter: drop-shadow(0 0 4px var(--if-accent-2)); }

/* Core: the human interface */
.iface__svg .if-core-glow { fill: var(--if-accent); opacity: .12; animation: if-breathe 3.2s ease-in-out infinite; }
@keyframes if-breathe { 0%, 100% { transform: scale(1); opacity: .12; } 50% { transform: scale(1.12); opacity: .2; } }
.iface__svg .if-core { fill: var(--if-bg); stroke: var(--if-accent); stroke-width: 1.5; }
.iface--dark .iface__svg .if-core { fill: #160042; }
.iface__svg .if-ring { fill: none; stroke: var(--if-accent); stroke-width: 1; opacity: .5; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; }
.iface__svg .if-ring--1 { animation: if-spin 26s linear infinite; }
.iface__svg .if-ring--2 { stroke: var(--if-accent-2); stroke-dasharray: 1 7; opacity: .55; animation: if-spin 40s linear infinite reverse; }
.iface__svg .if-ring--3 { stroke-dasharray: 60 240; opacity: .4; stroke-width: 1.5; animation: if-spin 18s linear infinite; }
@keyframes if-spin { to { transform: rotate(360deg); } }
.iface__svg .if-human { fill: none; stroke: var(--if-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.iface__svg .if-human-fill { fill: var(--if-ink); }
.iface__svg .if-core-label { font-size: 13px; font-weight: 700; text-anchor: middle; }
.iface__svg .if-core-sub { font-family: var(--if-mono); font-size: 9px; letter-spacing: 1.8px; fill: var(--if-accent); text-anchor: middle; }

/* Satellite badges around core */
.iface__svg .if-sat { fill: var(--if-node); stroke: var(--if-node-border); }
.iface__svg .if-sat-text { font-family: var(--if-mono); font-size: 9px; letter-spacing: 1.2px; fill: var(--if-text); text-anchor: middle; font-weight: 600; }

/* ---- Three roles under the stage ---- */
.iface__roles {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  margin-top: clamp(28px, 4vw, 48px);
}
@media (min-width: 800px) { .iface__roles { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.iface__role {
  position: relative; padding: 24px 24px 22px 26px;
  border: 1px solid var(--if-line); border-radius: 16px; background: var(--if-bg);
  transition: transform .3s var(--if-ease), border-color .3s;
}
.iface--dark .iface__role { background: rgba(33, 31, 84, .45); }
.iface__role:hover { transform: translateY(-3px); border-color: var(--if-accent); }
.iface__role::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--if-accent), var(--if-accent-2));
}
.iface__role-idx { font-family: var(--if-mono); font-size: .68rem; letter-spacing: .14em; color: var(--if-accent); display: block; margin-bottom: 10px; }
.iface__role h3 { font-family: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; color: var(--if-ink); margin: 0 0 8px; }
.iface__role p { font-size: .93rem; color: var(--if-muted); margin: 0; line-height: 1.55; }

/* ---- Signal bar (kicker under stage) ---- */
.iface__signal {
  margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--if-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--if-muted);
}
.iface__signal b { color: var(--if-ink); font-weight: 600; }
.iface__signal .sep { width: 24px; height: 1px; background: var(--if-line); }

/* Mobile: hide fine SVG text, keep shapes readable */
@media (max-width: 640px) {
  .iface__svg .if-node-sub, .iface__svg .if-sat, .iface__svg .if-sat-text { display: none; }
  .iface__svg .if-node-text { font-size: 17px; }
  .iface__svg .if-col-label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .iface__svg .if-flow--active, .iface__svg .if-ring, .iface__svg .if-core-glow, .iface__hud i { animation: none; }
}

/* =========================================================
   Ambient network canvas (strategy hero) + orbit rings
   ========================================================= */
.net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.orbit { position: absolute; pointer-events: none; }
.orbit i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--orbit-color, rgba(117,251,194,.35));
  transform-origin: center;
}
.orbit i:nth-child(1) { animation: orbit-spin 60s linear infinite; border-style: dashed; }
.orbit i:nth-child(2) { inset: 14%; animation: orbit-spin 42s linear infinite reverse; border-color: var(--orbit-color-2, rgba(93,203,231,.35)); border-style: dotted; }
.orbit i:nth-child(3) { inset: 30%; animation: orbit-spin 28s linear infinite; opacity: .7; }
.orbit i::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orbit-color, #75fbc2); box-shadow: 0 0 12px var(--orbit-color, #75fbc2); transform: translateX(-50%);
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit i { animation: none; } }