/* ══════════════════════════════════════════════════════
   TREE.CSS — Photo nodes, living wood branches, animations
   ══════════════════════════════════════════════════════ */

/* ── MAIN SVG ── */
#canvas-wrap{position:fixed;inset:0;z-index:var(--z-tree);}
svg{width:100%;height:100%;}
#viewport{will-change:transform;}

/* ── NODE GROUPS ── */
.node-group{cursor:pointer;}

/* ── PHOTO NODE CIRCLES ── */
.node-border{transition:filter var(--transition-fast);}
.node-group:hover .node-border{
  filter:brightness(1.4) drop-shadow(0 0 6px var(--nc,currentColor));
}

/* Photo wrapper inside foreignObject */
.node-img-wrap{
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
}
.node-img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  opacity:var(--tree-photo-opacity);
  transition:opacity var(--transition-fast);
}
.node-img.loaded{opacity:var(--tree-photo-opacity);}
.node-group:hover .node-img.loaded{opacity:var(--tree-photo-opacity-hover);}

/* ── SILHOUETTE FALLBACK ── */
.node-fallback-icon{pointer-events:none;}

/* ── LABELS ── */
.node-label-name{
  pointer-events:none;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:var(--tree-label-name-size);
}
.node-label-latin{
  pointer-events:none;
  font-family:var(--font-sans);
  font-style:italic;
  font-weight:400;
  font-size:var(--tree-label-latin-size);
  fill:rgba(237,232,223,0.45);
}
[data-theme="light"] .node-label-latin{fill:rgba(0,0,0,0.45);}

/* ── COLLAPSED INDICATORS ── */
.node-stack-card{pointer-events:none;}
.node-ghost{pointer-events:none;}
.node-ghost-wrap{border-radius:50%;overflow:hidden;pointer-events:none;}
.node-ghost-img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.node-badge-bg{fill:rgba(255,255,255,0.1);}
[data-theme="light"] .node-badge-bg{fill:rgba(0,0,0,0.06);}

/* ── INFO BUTTON (ⓘ on internal nodes) ── */
.node-info-btn{opacity:0.7;transition:opacity 0.2s;}
.node-info-btn:hover{opacity:1;}
.node-info-bg{
  fill:var(--surface-raised,rgba(30,30,30,0.85));
  stroke:var(--gold,#c8883a);
  stroke-width:1.5;
  transition:fill 0.15s,stroke 0.15s;
}
.node-info-bg.hover{
  fill:var(--gold,#c8883a);
  stroke:var(--gold,#c8883a);
}
.node-info-icon{
  fill:var(--gold,#c8883a);
  font-size:11px;
  font-weight:700;
  font-style:italic;
  font-family:'Georgia','Times New Roman',serif;
  pointer-events:none;
  transition:fill 0.15s;
}
.node-info-bg.hover+.node-info-icon{
  fill:var(--bg,#070503);
}
[data-theme="light"] .node-info-bg{
  fill:rgba(255,255,255,0.9);
  stroke:var(--gold,#c8883a);
}
[data-theme="light"] .node-info-bg.hover{
  fill:var(--gold,#c8883a);
}
[data-theme="light"] .node-info-bg.hover+.node-info-icon{
  fill:#fff;
}

/* ── BRANCHES ── */
.branch-path{fill:none;stroke-linecap:round;stroke-linejoin:round;cursor:default;}

/* Human path overlay */
.branch-human-path{fill:none;stroke:var(--tree-human-path);stroke-linecap:round;pointer-events:none;}
[data-theme="light"] .branch-human-path{stroke:var(--tree-human-path-light);}

/* Human path golden arrow */
.human-path-arrow{cursor:pointer;transition:filter var(--transition-fast);}
.human-path-arrow:hover{filter:brightness(1.3) drop-shadow(0 0 4px var(--tree-human-path));}

/* Human path dashed continuation */
.human-path-dash{fill:none;stroke:var(--tree-human-path);stroke-dasharray:4 3;stroke-width:1;opacity:0.2;pointer-events:none;}

/* ── BRANCH ANIMATIONS ── */
.branch-entering{stroke-dasharray:9999;stroke-dashoffset:9999;}
.branch-entered{stroke-dashoffset:0;transition:stroke-dashoffset 0.4s cubic-bezier(.4,0,.2,1) calc(var(--stagger,0) * 80ms);}

/* ── NODE ANIMATIONS ��─ */
.node-entering{opacity:0;transform:translateX(-8px);}
.node-entered{
  opacity:1;transform:translateX(0);
  transition:opacity 0.3s ease calc(var(--stagger,0) * 80ms),
             transform 0.3s ease calc(var(--stagger,0) * 80ms);
}

/* Sibling dimming */
.node-group.dimmed{opacity:var(--tree-sibling-dim);transition:opacity 0.2s ease;}
.branch-path.dimmed{opacity:calc(var(--tree-sibling-dim) * 0.5);transition:opacity 0.2s ease;}
.node-group.undimmed,.branch-path.undimmed{opacity:1;transition:opacity 0.2s ease;}

/* ── HOMININ GROUP CHIPS ── */
.chip-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:0 12px;border-radius:14px;
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:500;
  white-space:nowrap;cursor:pointer;
  transition:background var(--transition-fast),border-color var(--transition-fast);
}

/* ── BADGE PULSE ── */
.badge-pulse{animation:badgePulse 2s ease-in-out infinite;}
@keyframes badgePulse{
  0%,100%{filter:drop-shadow(0 0 2px rgba(200,136,58,0.3));}
  50%{filter:drop-shadow(0 0 8px rgba(200,136,58,0.7));}
}

/* ── PLAYBACK LOCKED NODE ── */
.node-locked{fill:none;stroke:var(--text-muted);stroke-width:1.5;stroke-dasharray:4 3;opacity:0.35;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .node-label-name{font-size:var(--tree-label-name-size-mobile);}
  .node-label-latin{font-size:var(--tree-label-latin-size-mobile);}
}

/* ── Collapsed-by-default parent affordances ── */

/* Glowing ring on collapsed parents */
.node-ring-expandable{
  fill:none;
  stroke:var(--gold);
  stroke-width:2;
  opacity:0.55;
  filter:drop-shadow(0 0 6px var(--gold));
  animation:nodeRingPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes nodeRingPulse{
  0%,100%{opacity:0.35;}
  50%    {opacity:0.75;}
}

/* +/- toggle badge (bottom-right of parent nodes) */
.node-toggle-badge-bg{
  fill:rgba(10,8,6,0.85);
  stroke:var(--gold);
  stroke-width:1;
}
.node-toggle-badge-text{
  fill:var(--gold);
  font:700 10px/1 'Inter',sans-serif;
  pointer-events:none;
  user-select:none;
}

/* Fully-expanded parents: force info button visible */
.node-fully-expanded .node-info-btn{opacity:1;}

/* Cursor states for node circles */
.node-circle-parent{cursor:zoom-in;}
.node-circle-parent.expanded{cursor:zoom-out;}
.node-circle-leaf{cursor:help;}

/* Mobile: info button slightly dimmer at rest */
@media (hover:none),(max-width:768px){
  .node-info-btn{opacity:0.6;}
  .node-info-btn:active{opacity:1;}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  .branch-entered{transition:none;}
  .node-entered{transition:none;}
  .node-group.dimmed,.branch-path.dimmed,
  .node-group.undimmed,.branch-path.undimmed{transition:none;}
}