/* ══════════════════════════════════════════════════════════════════
   SLIDE 9 — THE AI EXPERIENCE FACTORY ("why we win")   v2 2026-08-16
   Founder direction: Obsidian-graph / "JARVIS" living-network flow.
   All styling class-scoped (.exf-*) — renumber-proof; the only
   positional coupling is the slide's position in the deck-modes FULL
   manifest. Canvas sim lives in public/js/experience-factory.js;
   entrance + hover states trigger off classes that JS toggles.
   No [data-index] selectors anywhere in this file.
   ══════════════════════════════════════════════════════════════════ */

.exf-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(10px,1.8vh,22px);
  width:100%;
  height:100%;
  padding:var(--pill-reserve) 56px 20px 80px; /* mirror .s5-layout: nav rail left, I-1 pill reserve top */
  box-sizing:border-box;
}
.exf-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.exf-head .deck-slide-title{
  max-width:min(1180px,92vw);
}
.exf-title__line{
  display:block;
}
/* Title lines render white; the global `.deck-slide-title span{lilac !important}`
   (0,1,1) would paint the line-spans — beat it with (0,2,0) + !important,
   exactly the Solution-slide mechanism, but class-scoped. */
.exf-title .exf-title__line{
  color:#fff !important;
}
/* "We manufacture experiences." — cyan accent, the slide's signature
   (justified one-off recorded in theming.md; nfx-title precedent). */
.exf-title .exf-title__accent{
  color:var(--cyan) !important;
}

/* ── The network stage ────────────────────────────────────────── */
.exf-stage{
  position:relative;
  width:min(1320px,96%);
  flex:1 1 auto;
  min-height:clamp(240px,34vh,470px);
}
.exf-net{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.exf-labels{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.exf-node-label{
  position:absolute;
  transform:translate(-50%,0);
  white-space:nowrap;
  font-size:clamp(12px,1.05vw,16px);
  font-weight:600;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.92);
  text-shadow:0 0 12px rgba(0,13,44,0.9), 0 0 4px rgba(0,13,44,0.9);
  transition:transform 0.25s ease, filter 0.25s ease;
}
.exf-node-label--gate{ color:#ffb347; }
.exf-node-label--live{ color:var(--cyan); }
.exf-node-label--learn{ color:#35e0b8; font-size:clamp(11px,0.95vw,14px); font-weight:500; } /* the hiw teal — the feedback path */
.exf-node-label.is-hot{
  transform:translate(-50%,0) scale(1.12);
  filter:brightness(1.25);
}
.exf-sr{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0);
  overflow:hidden;
}

/* ── Below-the-flow line ──────────────────────────────────────── */
.exf-below{
  text-align:center;
  color:rgba(255,255,255,0.88);
  font-size:clamp(15px,1.4vw,21px);
  font-weight:500;
}

/* ── Entrance (reduced-motion-safe: base states above are fully
      visible; hidden states + transitions exist ONLY here; JS adds
      .is-in per label while animating and never under RM) ──────── */
@media (prefers-reduced-motion: no-preference){
  .slide .exf-node-label{
    opacity:0;
    transform:translate(-50%,8px);
  }
  .slide.active .exf-node-label.is-in{
    opacity:1;
    transform:translate(-50%,0);
    transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.9,0.3,1), filter 0.25s ease;
  }
  .slide.active .exf-node-label.is-in.is-hot{
    transform:translate(-50%,0) scale(1.12);
  }
  .slide .exf-below{ opacity:0; transform:translateY(10px); }
  .slide.active .exf-below{
    opacity:1;
    transform:translateY(0);
    transition:opacity 0.6s ease 1.1s, transform 0.6s cubic-bezier(0.22,0.9,0.3,1) 1.1s;
  }
}