/* ═══════════════════════════════════════════════════════════════════
   LIVING BAOBAB — SCENE PATCH  v6  (golden-hour hero)
   legacy-room-tree-patch.css   ·   load AFTER legacy-room-styles.css
   Pairs with the v6 engine _SLOT_XY (matched card positions).

   The baobab-color.webp is now a full-bleed cinematic sunset scene.
   The whole viewport is the landscape. The UI floats over it, light.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. SCENE: the sunset owns the whole viewport ─────────────────────*/
.tree-scene {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #19110a;                 /* warm-dark fallback before image */
}
.tree-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/baobab-color.webp') no-repeat center center;
  background-size: cover;
}
/* soft scrim at top + bottom so light UI text stays readable on the scene */
.tree-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,12,4,.42) 0%, rgba(20,12,4,0) 22%),
    linear-gradient(0deg,  rgba(20,12,4,.34) 0%, rgba(20,12,4,0) 18%);
}

/* ── 2. CANVAS: transparent coordinate plane over the tree ────────────*/
.tree-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  aspect-ratio: unset;
  z-index: 3;
}

/* Connectors: warm light branches threading between the people */
.tree-vines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  fill: none;
  stroke: rgba(255,214,120,.5);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(.4px) drop-shadow(0 0 4px rgba(255,196,90,.45));
}
.tree-vines path { vector-effect: non-scaling-stroke; }

/* ── 3. HEADER: light text over the sky, just eyebrow + title ─────────*/
.tree-scene-head {
  position: relative;
  z-index: 8;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 20px 0;
}
.tree-standing-eyebrow {
  display: block;
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,214,140,.92);
  font-weight: 700;
  margin-bottom: 3px;
  text-shadow: 0 1px 6px rgba(20,10,2,.6);
}
.tree-scene-title {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.65rem, 2.9vw, 2.35rem);
  font-weight: 600;
  line-height: 1.04;
  color: #fdf4e2;
  margin: 0;
  text-shadow: 0 2px 14px rgba(20,10,2,.6), 0 1px 2px rgba(20,10,2,.5);
}
.tree-scene-sub { display: none; }

/* Lens row: dark glass pills with warm text, readable on the canopy */
.tree-lens {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px auto 0;
  max-width: 640px;
  padding: 0 16px;
}
.tree-lens-btn {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .03em;
  color: rgba(245,234,214,.92);
  background: rgba(28,18,8,.44);
  border: 1px solid rgba(255,214,140,.32);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: background .15s, color .15s, border-color .15s;
}
.tree-lens-btn:hover { border-color: rgba(255,214,140,.6); }
.tree-lens-btn.is-active {
  background: rgba(201,162,74,.95);
  color: #1c1206;
  border-color: rgba(201,162,74,.95);
}

/* ── 4. PERSON CARDS: parchment plates nestled on the limbs ───────────
   %s matched to the v6 engine _SLOT_XY so the branches reach the cards. */
#screen-tree .tree-canvas .tnode {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
  min-width: 140px;
  max-width: 190px;
  left: auto; top: auto; right: auto;
  background: rgba(252,247,235,.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(201,162,74,.42);
  border-radius: 16px;
  box-shadow: 0 6px 20px -6px rgba(10,6,2,.5), inset 0 1px 0 rgba(255,250,232,.9);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
#screen-tree .tree-canvas .tnode:hover {
  transform: translate(-50%, -50%) translateY(-4px);
  border-color: rgba(201,162,74,.7);
  box-shadow: 0 12px 30px -6px rgba(10,6,2,.55), inset 0 1px 0 rgba(255,250,232,.9);
  z-index: 12;
}

/* Hover preview: dates, what's been preserved, and a clear way in */
#screen-tree .tree-canvas .tnode .tnode-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 150px; max-width: 230px;
  background: rgba(255,252,242,.98);
  border: 1px solid rgba(201,162,74,.5);
  border-radius: 12px;
  box-shadow: 0 14px 34px -10px rgba(10,6,2,.5);
  padding: 9px 13px; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 13;
}
#screen-tree .tree-canvas .tnode:hover .tnode-pop,
#screen-tree .tree-canvas .tnode:focus-visible .tnode-pop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.tnode-pop .tp-yr { display: block; font-size: .78rem; color: #9a7a2e; font-variant-numeric: tabular-nums; }
.tnode-pop .tp-counts { display: block; font-size: .8rem; color: #2c1a0e; margin-top: 2px; }
.tnode-pop .tp-cta { display: block; font-size: .74rem; font-weight: 600; color: #a85a32; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  #screen-tree .tree-canvas .tnode .tnode-pop { transition: none; }
}

#screen-tree .tree-canvas .tnode.n3 { left: 28%; top: 25%; }   /* grandparent L */
#screen-tree .tree-canvas .tnode.n4 { left: 72%; top: 26%; }   /* grandparent R */
#screen-tree .tree-canvas .tnode.n1 { left: 34%; top: 42%; }   /* parent L */
#screen-tree .tree-canvas .tnode.n2 { left: 66%; top: 40%; }   /* parent R */
#screen-tree .tree-canvas .tnode.n5 { left: 35%; top: 84%; }   /* child L (roots) */
#screen-tree .tree-canvas .tnode.n6 { left: 65%; top: 86%; }   /* child R (roots) */

#screen-tree .tree-canvas .wisdom-leaf { position: absolute; z-index: 6; }
#screen-tree .tree-canvas .wisdom-leaf.w1 { left: 36%; top: 12%; }
#screen-tree .tree-canvas .wisdom-leaf.w2 { left: 62%; top: 10%; }
#screen-tree .tree-canvas .wisdom-leaf.w3 { left: 50%; top: 16%; }

/* ── 5. CENTER PERSON: a lantern in the trunk ─────────────────────────*/
#screen-tree .tree-canvas .tnode.center {
  left: 50%;
  top: 54%;
  min-width: 222px;
  max-width: 272px;
  z-index: 7;
  background: rgba(255,252,240,.97);
  border: 1.5px solid rgba(201,162,74,.7);
  border-radius: 20px;
  padding: 15px 20px;
  animation: lanternPulse 4.6s ease-in-out infinite;
}
@keyframes lanternPulse {
  0%, 100% { box-shadow:
    0 0 0 6px rgba(255,200,90,.10),
    0 0 34px 10px rgba(255,190,80,.30),
    0 16px 48px -10px rgba(10,6,2,.55),
    inset 0 1px 0 rgba(255,252,228,.98); }
  50% { box-shadow:
    0 0 0 8px rgba(255,200,90,.16),
    0 0 52px 16px rgba(255,190,80,.42),
    0 16px 48px -10px rgba(10,6,2,.55),
    inset 0 1px 0 rgba(255,252,228,.98); }
}
@media (prefers-reduced-motion: reduce) {
  #screen-tree .tree-canvas .tnode.center { animation: none;
    box-shadow: 0 0 0 7px rgba(255,200,90,.12), 0 0 40px 13px rgba(255,190,80,.34),
      0 16px 48px -10px rgba(10,6,2,.55), inset 0 1px 0 rgba(255,252,228,.98); }
}
#screen-tree .tree-canvas .tnode.center:hover { transform: translate(-50%, -50%) translateY(-4px); }
#screen-tree .tree-canvas .tnode.center .tnode-av { width: 52px; height: 52px; font-size: 1.4rem; border-width: 2.5px; }
#screen-tree .tree-canvas .tnode.center .tnode-body b { font-size: 1.22rem; }

/* ── 6. LIVING LAYER ─────────────────────────────────────────────────*/
.tree-living-layer { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

/* ── 7. CARVING: glowing inscription in the dark roots ────────────────*/
.tree-carving {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 13%;
  z-index: 6;
  width: min(620px, 82vw);
  text-align: center;
  margin: 0;
  pointer-events: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.82rem, 1.2vw, 1rem);
  line-height: 1.55;
  letter-spacing: .05em;
  color: rgba(255,224,150,.62);
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 14px rgba(120,70,10,.4);
}

/* ── 8. CORNER CARDS: dark glass, warm text — Change center / Time rings */
.tree-corner {
  position: absolute;
  bottom: 26px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: min(240px, 42vw);
  text-align: left;
  cursor: pointer;
  background: rgba(26,16,6,.6);
  border: 1px solid rgba(255,214,140,.3);
  border-radius: 14px;
  padding: 11px 13px;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.6);
  transition: transform .15s, border-color .15s;
}
.tree-corner:hover { transform: translateY(-3px); border-color: rgba(255,214,140,.55); }
.tree-corner.left  { left: 24px; }
.tree-corner.right { right: 24px; }
.tree-corner-ic { flex: 0 0 auto; width: 20px; height: 20px; color: rgba(255,206,120,.95); margin-top: 2px; }
.tree-corner-ic svg { width: 100%; height: 100%; }
.tree-corner-tx b { display: block; font-family: var(--serif); font-size: 1.02rem; color: #fdf4e2; line-height: 1.1; }
.tree-corner-tx small { display: block; font-size: .7rem; line-height: 1.35; color: rgba(245,234,214,.78); margin-top: 1px; }
.tree-corner-years { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,214,140,.22); }
.tree-corner-years span { font-size: .66rem; color: rgba(245,234,214,.72); font-variant-numeric: tabular-nums; }
.tree-corner-years span.year { color: #f3c470; font-weight: 700; }

/* hide any stale center-row markup */
.tree-labels, .tree-hint, .tree-rings-float { display: none !important; }

/* ── 9. SIDE DRAWERS: dark edge tabs, slide-in panels ─────────────────*/
.tree-float.tree-person-float,
.tree-float.tree-holds-float { left: unset; right: unset; top: unset; bottom: unset; }

.tree-drawer {
  position: fixed; top: 0; z-index: 21; max-height: 100vh; overflow-y: auto;
  background: rgba(248,241,226,.98);
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 0 60px rgba(0,0,0,.5);
}
.tree-drawer.left  { left: 0; }
.tree-drawer.right { right: 0; }

.tree-drawer-tab {
  position: fixed; top: 50%; z-index: 20;
  background: rgba(26,16,6,.55);
  border: 1px solid rgba(255,214,140,.32);
  color: rgba(255,214,140,.85);
  font-family: var(--sans); font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800;
  padding: 22px 5px; cursor: pointer; writing-mode: vertical-rl;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s, color .2s, opacity .2s;
}
.tree-drawer-tab:hover { background: rgba(40,26,10,.8); color: #ffdca0; }
.tree-drawer-tab.left  { left: 0;  transform: translateY(-50%); border-radius: 0 10px 10px 0; }
.tree-drawer-tab.right { right: 0; transform: translateY(-50%) rotate(180deg); border-radius: 0 10px 10px 0; }
.tree-scene[data-drawer="left"]  .tree-drawer-tab.left,
.tree-scene[data-drawer="right"] .tree-drawer-tab.right { opacity: 0; pointer-events: none; }

.tree-scrim {
  position: fixed; inset: 0; z-index: 19;
  background: rgba(10,6,2,.34); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.tree-scene[data-drawer="left"]  .tree-scrim,
.tree-scene[data-drawer="right"] .tree-scrim { opacity: 1; pointer-events: auto; }

.tree-drawer-close {
  position: absolute; top: 9px; right: 11px; width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: rgba(201,162,74,.16);
  color: var(--ink, #141414); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.tree-drawer-close:hover { background: rgba(201,162,74,.32); }

/* ── 10. RESPONSIVE ───────────────────────────────────────────────────*/
@media (max-width: 980px) {
  .tree-scene { min-height: auto; padding-bottom: 30px; }
  .tree-canvas { position: relative; height: 132vw; min-height: 540px; }
  .tree-scene::before { background-size: cover; background-position: center center; }
  .tree-scene::after { background:
    linear-gradient(180deg, rgba(20,12,4,.5) 0%, rgba(20,12,4,0) 18%),
    linear-gradient(0deg,  rgba(20,12,4,.4) 0%, rgba(20,12,4,0) 16%); }

  #screen-tree .tree-canvas .tnode.n3 { left: 22%; top: 23%; }
  #screen-tree .tree-canvas .tnode.n4 { left: 78%; top: 24%; }
  #screen-tree .tree-canvas .tnode.n1 { left: 29%; top: 41%; }
  #screen-tree .tree-canvas .tnode.n2 { left: 71%; top: 39%; }
  #screen-tree .tree-canvas .tnode.center { top: 55%; min-width: 178px; max-width: 220px; }
  #screen-tree .tree-canvas .tnode.n5 { left: 30%; top: 83%; }
  #screen-tree .tree-canvas .tnode.n6 { left: 70%; top: 85%; }

  .tree-drawer-tab { position: absolute; top: 44%; }
  .tree-drawer { position: absolute; top: 0; max-height: 100%; }
  .tree-scrim  { position: absolute; }

  .tree-carving { position: static; transform: none; width: min(520px,90vw); margin: 14px auto 0; }
  .tree-corner { position: static; width: min(420px, 92vw); margin: 10px auto 0; }
  .tree-corner.left, .tree-corner.right { left: auto; right: auto; }
}

/* ── 11. PERMANENT TIME RINGS: the family across time, always present ──
   Built from every person's birth year — exists before any story is added.
   A glowing marker per life; the focus glows brightest. Click = re-center. */
.tree-timeline {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 9px clamp(40px, 8vw, 130px) 14px;
  background: linear-gradient(0deg, rgba(16,10,3,.66) 0%, rgba(16,10,3,.32) 55%, transparent 100%);
}
.tl-cap {
  display: block; text-align: center;
  font-family: var(--sans); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 800;
  color: rgba(255,214,140,.74); margin-bottom: 9px;
}
.tl-track { position: relative; height: 26px; margin: 0 auto; max-width: 1100px; }
.tl-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,214,140,.55) 12%, rgba(255,214,140,.55) 88%, transparent);
}
.tl-tick {
  position: absolute; top: calc(50% + 9px); transform: translateX(-50%);
  font-size: .6rem; color: rgba(245,234,214,.6); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-mark {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #ffe9b0, #e0a83f);
  box-shadow: 0 0 8px 2px rgba(255,200,90,.5);
  transition: transform .15s, box-shadow .15s;
}
.tl-mark:hover { transform: translate(-50%,-50%) scale(1.5); box-shadow: 0 0 12px 3px rgba(255,210,110,.85); z-index: 3; }
.tl-mark.is-focus {
  width: 15px; height: 15px; background: radial-gradient(circle at 50% 40%, #fff3d0, #f0b94a);
  box-shadow: 0 0 16px 5px rgba(255,205,95,.85); z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .tl-mark { transition: none; } }

@media (max-width: 980px) {
  .tree-timeline { position: static; margin-top: 14px; padding: 10px 18px 6px;
    background: linear-gradient(0deg, rgba(16,10,3,.5), transparent); }
  .tl-track { height: 24px; }
}