/* R6: Ref-image-led page CSS, NOT newly generated art.
   Built on R5; preserves original assets, real Winnie photographs, 10 interactive
   node buttons and 3 matrix axes. Reference = spatial depth, light, material.
   On-site local candidate only / 2026-10-30. */

/* THRESHOLD: stop making a beige void beside a pasted picture. The existing
   approved portal image fills the whole scene, with a deliberate text veil. */
.threshold{
  isolation:isolate;
  background:#eadbdc;
  background-image:
    linear-gradient(90deg,rgba(253,248,244,.87) 0%,rgba(254,247,239,.71) 34%,
      rgba(245,228,236,.18) 58%,rgba(199,164,197,.06) 100%),
    url("assets/threshold_portal_from_approved.webp");
  background-size:cover,cover;
  background-position:center,64% 44%;
  background-repeat:no-repeat;
}
.threshold::before{
  z-index:1;width:68%;
  background:radial-gradient(ellipse 76% 58% at 28% 38%,rgba(255,251,244,.86),transparent 100%);
}
.threshold::after{
  content:"";position:absolute;z-index:1;pointer-events:none;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 47%,rgba(63,34,73,.10) 100%),
    radial-gradient(ellipse 20% 47% at 57% 58%,rgba(255,240,214,.19),transparent 90%);
}
.threshold-content{position:relative;z-index:4;max-width:54%}
.threshold h2{color:#2d203e;text-shadow:0 1px 2px rgba(255,255,255,.6)}
.threshold .quiet-copy{
  color:#52415c;font-weight:400;
  text-shadow:0 1px 2px rgba(255,255,255,.75);
}
.threshold-scenography{
  right:-4%;top:3%;width:67%;height:94%;
  opacity:.96;filter:saturate(1.05) contrast(1.07);
  background-position:55% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 9%,rgba(0,0,0,.65) 26%,black 50%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 9%,rgba(0,0,0,.65) 26%,black 50%);
}
.threshold .scene-footnote{color:#594566;font-weight:500;text-shadow:0 1px 4px #fffcfa}

/* TREE: the reference is a luminous *installation inside architecture*,
   not ten old diamond buttons on a flat charcoal diagram. Artwork from the
   already approved clean structural scene stays background-only. */
.tree-section{
  background-color:#20162c;
  background-image:
   linear-gradient(90deg,rgba(20,10,33,.16) 0%,rgba(20,12,38,.08) 52%,rgba(17,10,29,.39) 100%),
   url("assets/tree_stage_composite_v3.webp");
  background-position:center,center 45%;
  background-size:cover,cover;
}
.tree-section::before{opacity:0}
.tree-section::after{
  background:linear-gradient(180deg,
     rgba(20,11,34,.63) 0%,rgba(18,9,28,.23) 23%,rgba(23,13,39,.02) 46%,
     rgba(18,11,32,.12) 77%,rgba(15,10,27,.62) 100%);
}
.tree-intro{position:relative;z-index:2}
.tree-intro h2,.tree-intro .eyebrow{
  text-shadow:0 3px 18px #130b22db,0 1px 2px #100a20;
}
.tree-intro .quiet-copy{
  color:#eee0ec;font-weight:400;line-height:2.15;
  text-shadow:0 2px 13px #0f0920ef;
}
.tree-experience{position:relative;z-index:2;grid-template-columns:minmax(0,60%) minmax(0,40%);gap:0}
.tree-experience::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  left:0;top:0;bottom:0;width:63%;
  background:radial-gradient(ellipse 46% 45% at 51% 45%,rgba(240,194,232,.23) 0%,rgba(161,112,183,.13) 55%,transparent 94%);
}
.tree-environment{
  position:relative;z-index:1;
  background:transparent;
  isolation:isolate;
}
.tree-environment::before{opacity:.36}
.tree-environment::after{opacity:.56}
.tree-aura{
  background:radial-gradient(ellipse 44% 51% at 51% 42%,rgba(255,228,184,.27) 0%,rgba(229,167,234,.17) 51%,transparent 84%);
  filter:blur(19px);opacity:1;
}
.sculpture-frame{
  width:min(97%,700px);
  top:49%;left:50%;
  filter:drop-shadow(0 18px 36px rgba(24,10,34,.48));
}
.tree-backplate{
  inset:0 5%;
  border-radius:47% 47% 8% 8%/35% 35% 3% 3%;
  border:1px solid rgba(248,223,183,.64);
  background:
    linear-gradient(105deg,rgba(42,23,59,.19),rgba(55,31,75,.12) 50%,rgba(28,18,48,.27));
  box-shadow:
    inset 2px 0 13px rgba(255,236,202,.19),
    inset -12px -20px 30px rgba(28,9,45,.20),
    0 0 30px rgba(240,203,178,.19),
    0 18px 52px rgba(12,8,28,.16);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}
.tree-backplate::before{
  inset:2.1% 3.3%;border:1px solid rgba(251,213,174,.55);
  box-shadow:inset 0 0 22px rgba(242,198,153,.14),0 0 16px rgba(253,226,170,.09);
}
.tree-backplate::after{inset:9% 11%;border-color:rgba(245,210,188,.25)}
#tree-lines{
  filter:drop-shadow(0 0 6px rgba(253,201,151,.64))
         drop-shadow(0 0 17px rgba(247,176,225,.26));
}
.tree-path{stroke-width:2.3;opacity:1;filter:drop-shadow(0 0 4px rgba(253,217,178,.52))}
.tree-path.foreground{stroke-width:2.1;opacity:.52}
.tree-path.active{
  stroke:#ffe3b5;stroke-width:3.7;
  filter:drop-shadow(0 0 8px #ffdeb7) drop-shadow(0 0 14px #e8accf);
}
.node-orb{z-index:5}
.node-crystal{
  width:31px;height:31px;
  border:1px solid rgba(255,237,201,.95);
  border-radius:2px;
  background:linear-gradient(137deg,
    rgba(255,249,228,.99) 0%,rgba(245,202,236,.90) 19%,
    rgba(164,119,197,.84) 46%,rgba(88,65,142,.95) 62%,rgba(249,202,220,.93) 100%);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,245,.92),
    inset -3px -4px 10px rgba(75,37,114,.74),
    0 0 0 5px rgba(244,209,227,.10),
    0 0 18px 3px rgba(255,216,179,.72),
    0 0 42px rgba(235,176,230,.44);
}
.node-orb::before{
  inset:-14px;
  background:radial-gradient(circle,rgba(255,236,180,.53),rgba(229,156,220,.18) 36%,transparent 68%);
}
.node-orb .num{
  font-family:var(--display);font-weight:500;
  text-shadow:0 1px 7px #2a1539,0 0 4px rgba(37,9,52,.75);
  color:#fff9ef;
}
.node-orb .node-label{
  color:#fff1e7;opacity:.97;font-size:11px;
  text-shadow:0 2px 6px #170923,0 0 10px #130b22;
  letter-spacing:.05em;
}
.node-orb[aria-pressed="true"] .node-crystal,
.node-orb:hover .node-crystal{
  transform:rotate(45deg) scale(1.32);
  background:linear-gradient(132deg,#fffaf0,#f6e1f0 30%,#ebbdcf 60%,#ab81d3 100%);
  box-shadow:inset 2px 2px 3px white,inset -3px -5px 10px #8a61a5,
     0 0 0 9px #f1cebd28,0 0 31px 10px #ffe3acb3,0 0 90px #f3c0e47d;
}
.tree-ground{
  bottom:6%;height:83px;left:19%;right:19%;
  background:radial-gradient(ellipse,rgba(252,225,186,.58) 0%,rgba(240,170,223,.22) 38%,transparent 72%);
  filter:blur(16px);
}
.tree-insight{
  position:relative;z-index:2;
  min-height:660px;
  border:1px solid rgba(248,208,174,.36);
  border-right:0;
  background:linear-gradient(95deg,rgba(25,13,40,.93) 0%,rgba(35,20,52,.91) 67%,rgba(21,12,36,.96) 100%);
  box-shadow:-16px 22px 55px #09061467,inset 1px 0 24px #d3adbc24;
  backdrop-filter:blur(14px) saturate(1.3);
}
.tree-insight h3{color:#fff6e8;text-shadow:0 1px 16px #e9b5c842}
.tree-insight .insight-context{color:#f0cb9f}
.tree-insight .insight-question{color:#f6e7e6}
.tree-controls button{border-color:#e8bfab75}
.sculpture-legend{font-size:10px;letter-spacing:.10em;color:#f8e4df;text-shadow:0 2px 9px #1b0a2d}

/* CLOSING: reference shows side columns, reflective floor and luminous horizon.
   Leave the center readable without killing the entire picture. */
.last-section{
  background-image:
    linear-gradient(180deg,rgba(18,10,33,.20) 0%,rgba(16,9,28,.12) 40%,rgba(16,9,31,.31) 100%),
    url("assets/outro_architecture_from_approved.webp");
}
.last-section::before{
  background:radial-gradient(ellipse 43% 43% at 50% 41%,
    rgba(18,10,34,.87) 0%,rgba(18,10,34,.75) 57%,transparent 100%);
}
.last-section::after{
  background:linear-gradient(0deg,rgba(14,8,25,.39),transparent 30%,transparent 77%,rgba(18,11,31,.18));
}
.last-section h2{text-shadow:0 4px 22px #0c0619e0}
.last-section>p:not(.eyebrow){color:#f2dbe9;text-shadow:0 2px 12px #140a26}

/* Preserve the already-accepted mobile ten-node accessibility and geometry. */
@media(max-width:1100px) and (min-width:761px){
 .tree-experience{grid-template-columns:minmax(0,58%) minmax(0,42%)}
 .tree-insight{padding-left:40px}
 .threshold-content{max-width:57%}
}
@media(max-width:760px){
 .threshold{
  background-image:
    linear-gradient(180deg,rgba(253,249,243,.94) 0%,rgba(253,247,238,.82) 33%,rgba(246,228,233,.03) 62%,rgba(183,146,195,.07) 100%),
    url("assets/threshold_portal_from_approved.webp");
  background-size:cover,auto 100%;background-position:center,50% 50%;
 }
 .threshold::before{
  height:54%;background:linear-gradient(180deg,rgba(255,250,245,.94),rgba(255,249,242,.71) 69%,transparent);
 }
 .threshold-content{max-width:100%}
 .threshold-scenography{right:0;top:42%;width:100%;height:55%;opacity:1;
   filter:saturate(1.07) contrast(1.10);
   -webkit-mask-image:linear-gradient(180deg,transparent 0%,black 17%,black 91%,transparent 100%);
   mask-image:linear-gradient(180deg,transparent 0%,black 17%,black 91%,transparent 100%);
 }
 .tree-section{
  background-image:
    linear-gradient(180deg,rgba(19,10,34,.39),rgba(25,12,41,.25) 41%,rgba(19,11,33,.38) 100%),
    url("assets/tree_mobile_pillar_from_approved.webp");
  background-position:center,58% 48%;background-size:cover,auto 100%;
 }
 .tree-section::after{
   background:linear-gradient(180deg,rgba(18,10,33,.52) 0%,rgba(18,10,33,.06) 38%,rgba(16,10,31,.35) 95%);
 }
 .tree-experience{display:flex;flex-direction:column}
 .tree-experience::before{left:0;width:100%;height:64%;bottom:auto;top:0;
  background:radial-gradient(ellipse 55% 42% at 50% 45%,rgba(248,210,174,.23),transparent 100%)}
 .tree-insight{min-height:470px;width:100%;border-left:0;border-right:0;
  background:linear-gradient(135deg,rgba(28,14,46,.96),rgba(16,10,33,.96));
 }
 .tree-environment{height:580px}
 .sculpture-frame{width:min(95%,590px);top:48%}
 .node-crystal{width:25px;height:25px}
 .node-orb .node-label{font-size:10px;opacity:.99}
 .last-section{
  background-image:linear-gradient(180deg,rgba(19,11,33,.17),rgba(18,11,32,.18) 45%,rgba(16,10,31,.34)),
   url("assets/outro_mobile_columns_from_approved.webp");
 }
 .last-section::before{
  background:radial-gradient(ellipse 68% 50% at 50% 43%,
     rgba(17,10,32,.88),rgba(17,10,32,.65) 60%,transparent);
 }
}
@media(max-width:480px){
 .tree-environment{height:575px}
 .sculpture-frame{width:105%;top:45%;left:50%}
 .node-orb{width:46px;height:46px}
 .node-crystal{width:23px;height:23px}
 .node-orb .node-label{font-size:9px}
 .node-orb[data-id="10"] .node-label{
  left:50%;right:auto;top:42px;transform:translateX(-50%);
 }
 .sculpture-legend{bottom:8px}
}
@media(prefers-reduced-motion:reduce){
 .tree-aura{animation:none!important}
 .tree-backplate{backdrop-filter:none}
}

/* Visual screenshot readback 1: remove Threshold end-of-plate seam, align
   the actual glass sculpture's tenth point above the native helper. */
@media(min-width:761px){
 .threshold-scenography{top:0;height:100%;bottom:0}
 .tree-environment{height:805px}
 .sculpture-frame{width:min(96%,675px);top:45.5%}
 .node-orb[data-id="10"] .node-label{
  left:50%;right:auto;top:43px;transform:translateX(-50%);
  white-space:nowrap;
 }
 .sculpture-legend{bottom:10px}
}
@media(max-width:760px){
 .threshold-scenography{top:41%;height:59%;bottom:0}
 .node-orb .node-label{font-weight:500;text-shadow:0 2px 7px #11071c,0 0 12px #100719}
}