/* ════════════════════════════════════════════════════════════
   SLIDE 7 — THE NETWORK EFFECT (displayed #7, data-index 6)
   Styling is class-based (.nfx-*) so it survives future reorders;
   only the entrance cascade (Task 5) is gated on
   .slide[data-index="6"].active — the deck-standard entrance trigger.
   Title accent + punchline use --cyan (slide one-off, not the deck's
   lilac --accent-soft); cyan unifies the teal/blue palette here.
═══════════════════════════════════════════════════════════════ */

.nfx-layout{
  width:100%; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:clamp(12px,2.2vh,26px);
  /* top clears the lifted pill; left clears the 72px sidenav rail (deck standard) */
  padding:var(--pill-reserve) clamp(24px,4vw,64px) clamp(14px,2.6vh,32px) 80px;
  text-align:center;
}
.nfx-header{ display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.4vh,16px); max-width:min(980px,100%); }
.nfx-title{ margin:0; }
/* override the deck-wide lilac accent (.deck-slide-title span uses !important) — cyan unifies this slide's palette */
.nfx-title span{ color:var(--cyan) !important; text-shadow:0 0 18px rgba(0,223,244,0.45); }
.nfx-sub{ margin:0; color:var(--text-dim); font-size:clamp(13px,1.15vw,17px); max-width:min(720px,92%); }

.nfx-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,3vw,56px);
  width:100%; max-width:min(1180px,100%); align-items:start;
}
.nfx-col{ display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.1vh,13px); }
.nfx-col--friends{ color:var(--blue-bright); }
.nfx-col--workplace{ color:var(--indigo); }
.nfx-col--family{ color:var(--teal); }
.nfx-label{ font-size:clamp(10px,0.8vw,12px); letter-spacing:0.22em; font-weight:700; color:currentColor; }
.nfx-caption{ margin:0; color:var(--text-dim); font-size:clamp(11px,0.95vw,14px); }

.nfx-avatar{ display:block; fill:currentColor; }
.nfx-avatar--hero{ width:clamp(52px,5vw,74px); height:auto; filter:drop-shadow(0 0 14px currentColor); }
.nfx-tree{ width:100%; height:auto; max-width:clamp(180px,16vw,260px); }
.nfx-tree .nfx-node{ fill:currentColor; }
.nfx-lines{ stroke:currentColor; stroke-width:1.6; fill:none; opacity:0.55; }

.nfx-baseline{
  width:100%; max-width:min(1180px,100%); height:16px;
  background:
    radial-gradient(60% 16px at 50% 100%, rgba(0,223,244,0.18), transparent 70%),
    repeating-linear-gradient(90deg, var(--cyan) 0 3px, transparent 3px 9px) bottom/100% 3px no-repeat;
  opacity:0.85;
}

.nfx-punch{ margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.nfx-punch__lead{ margin:0; color:#fff; font-weight:700; font-size:clamp(15px,1.4vw,21px); }
.nfx-punch__hook{ margin:0; color:var(--cyan); font-weight:800; font-size:clamp(20px,2vw,30px); text-shadow:0 0 22px rgba(0,223,244,0.5); }

/* ── Entrance cascade — gated on the slide's active state (deck pattern).
   Wrapped in no-preference so reduced-motion shows the final state at rest. ── */
@media (prefers-reduced-motion: no-preference){
  .slide[data-index="6"] .nfx-header,
  .slide[data-index="6"] .nfx-label,
  .slide[data-index="6"] .nfx-avatar--hero,
  .slide[data-index="6"] .nfx-caption,
  .slide[data-index="6"] .nfx-tier,
  .slide[data-index="6"] .nfx-baseline,
  .slide[data-index="6"] .nfx-punch__lead,
  .slide[data-index="6"] .nfx-punch__hook{ opacity:0; }
  .slide[data-index="6"] .nfx-lines path{ stroke-dasharray:240; stroke-dashoffset:240; }
  .slide[data-index="6"] .nfx-baseline{ clip-path:inset(0 100% 0 0); }

  .slide[data-index="6"].active .nfx-header{ animation:nfxFade .5s ease .05s forwards; }
  .slide[data-index="6"].active .nfx-label,
  .slide[data-index="6"].active .nfx-avatar--hero{ animation:nfxRise .5s cubic-bezier(.22,1,.36,1) .20s forwards; }
  .slide[data-index="6"].active .nfx-caption{ animation:nfxFade .5s ease .45s forwards; }
  .slide[data-index="6"].active .nfx-lines--trunk path{ animation:nfxDraw .5s ease .45s forwards; }
  .slide[data-index="6"].active .nfx-tier--mid{ animation:nfxPop .45s cubic-bezier(.22,1,.36,1) .70s forwards; }
  .slide[data-index="6"].active .nfx-lines--branch path{ animation:nfxDraw .5s ease .85s forwards; }
  .slide[data-index="6"].active .nfx-tier--leaf{ animation:nfxPop .45s cubic-bezier(.22,1,.36,1) 1.0s forwards; }
  .slide[data-index="6"].active .nfx-baseline{ animation:nfxFade .4s ease 1.35s forwards, nfxSweep .7s cubic-bezier(.22,1,.36,1) 1.35s forwards; }
  .slide[data-index="6"].active .nfx-punch__lead{ animation:nfxRise .5s cubic-bezier(.22,1,.36,1) 1.6s forwards; }
  .slide[data-index="6"].active .nfx-punch__hook{ animation:nfxRise .5s cubic-bezier(.22,1,.36,1) 1.75s forwards; }
}

@keyframes nfxFade{ to{ opacity:1; } }
@keyframes nfxRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes nfxPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes nfxDraw{ to{ stroke-dashoffset:0; } }
@keyframes nfxSweep{ to{ clip-path:inset(0 0 0 0); } }