/* Scoped to stage zero. Header, research stages 1–6 and page sections use their original styles. */
#stage0-overview.tree-opening{display:block;gap:0;border:1px solid #bba97380;border-radius:24px;background:#05180f;overflow:hidden;isolation:isolate;cursor:default;box-shadow:0 18px 55px #0005}
.tree-opening-art{position:absolute;inset:0;z-index:-2;transform:translate3d(var(--tree-pan-x,0px),var(--tree-pan-y,0px),0) scale(1.035);will-change:transform}
.tree-opening-art>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.tree-opening-signals{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:screen;pointer-events:none}
.tree-signal-paths path{stroke-dasharray:22 1100;stroke-dashoffset:1122;opacity:0;animation:tree-opening-flow 15s linear infinite;animation-delay:var(--signal-delay);filter:drop-shadow(0 0 4px #f5d99d)}
@keyframes tree-opening-flow{0%{stroke-dashoffset:1122;opacity:0}4%{opacity:.7}38%{stroke-dashoffset:0;opacity:.7}45%,100%{stroke-dashoffset:0;opacity:0}}
.tree-opening-root{transform-origin:835px 800px;animation:tree-opening-breathe 6s ease-in-out infinite}
@keyframes tree-opening-breathe{0%,100%{opacity:.06;transform:scale(.8)}50%{opacity:.18;transform:scale(1.12)}}
.tree-opening-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#00130b20,transparent 60%,#001109a0),linear-gradient(90deg,#00110930,transparent 70%)}
.tree-opening-copy{position:absolute;top:7%;left:4.8%;right:4%;pointer-events:none}
#stage0-overview.tree-opening h1{font:400 clamp(30px,3.6vw,62px)/1.05 Georgia,'Times New Roman',serif!important;letter-spacing:-.035em!important;color:#f4f0dd!important;max-width:95%!important;margin:0!important;text-shadow:0 2px 20px #05180f70}
#stage0-overview.tree-opening h1 span{color:#d99c6e}
#stage0-overview.tree-opening p{font:400 clamp(14px,1.5vw,23px)/1.4 Georgia,serif!important;color:#e4e3cf!important;width:19ch!important;max-width:19ch!important;margin:15px 0 0!important}
.tree-opening-explore{position:absolute;bottom:20px;left:4.8%;padding:10px 0;border:0;border-bottom:1px solid #c9a77788;background:none;color:#f0d6ad;font:14px Georgia,serif;cursor:pointer;display:flex;align-items:center;gap:24px}
.tree-opening-explore span{display:inline-block;animation:tree-opening-arrow 3s ease-in-out infinite}.tree-opening-explore:focus-visible{outline:2px solid #f0d6ad;outline-offset:6px}
@keyframes tree-opening-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.tree-opening.is-zooming-out .tree-opening-art,.tree-opening.is-zooming-out .tree-opening-signals *,.tree-opening.is-zooming-out .tree-opening-explore span{animation-play-state:paused!important}
@media(max-width:1120px){#stage0-overview.tree-opening h1{font-size:clamp(32px,4.5vw,55px)!important}.tree-opening-copy{top:8%}}
@media(max-width:767px){#stage0-overview.tree-opening{border-radius:18px}.tree-opening-copy{left:7%;right:7%;top:7%}#stage0-overview.tree-opening h1{font-size:clamp(27px,6.8vw,42px)!important;max-width:100%!important}#stage0-overview.tree-opening p{font-size:15px!important;width:18ch!important;max-width:18ch!important}.tree-opening-art>img{object-position:52% center}.tree-opening-shade{background:linear-gradient(180deg,#00130bd0,transparent 50%,#001109c0)}.tree-opening-explore{left:7%;bottom:18px;font-size:13px}}
@media(prefers-reduced-motion:reduce){#stage0-overview.tree-opening *,#stage0-overview.tree-opening{animation:none!important;transition:none!important}.tree-opening-signals{display:none}.tree-opening-art{transform:none;will-change:auto}}

@media(max-aspect-ratio:1/1){.tree-opening-art>img{object-fit:contain}.tree-opening-signals{height:auto;aspect-ratio:1672/941;top:50%;transform:translateY(-50%)}}
/* Expand just the opening card beneath the horizontal stage rail on phones. */
@media(max-width:767px){#reactor-viewport:not(.is-pipeline-mode):has(.tree-opening) .center-holo-theatre{left:16px;right:16px;top:136px;bottom:82px}.tree-opening-art{inset:26% 0 7%}}

/* Same artwork and fit, rendered with local motion in the animal regions. */
.tree-animal-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:none;pointer-events:none}
.tree-opening-art.has-animal-motion>.tree-animal-motion{display:block}
.tree-opening-art.has-animal-motion>img{visibility:hidden}
@media(max-width:767px){.tree-animal-motion{object-position:52% center}}
@media(max-aspect-ratio:1/1){.tree-animal-motion{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.tree-opening-art>.tree-animal-motion{display:none!important}.tree-opening-art>img{visibility:visible!important}}

/* Keep the opening artwork free of the outer lab label and research strip. */
#reactor-viewport:not(.is-pipeline-mode):has(.tree-opening) .reactor-hud-corner--tl,
#reactor-viewport:not(.is-pipeline-mode):has(.tree-opening) .bottom-pipeline-bar{display:none!important}

#stage0-overview.tree-opening p{width:auto!important;max-width:none!important;white-space:nowrap!important}
@media(max-width:767px){#stage0-overview.tree-opening p{font-size:clamp(11px,3.4vw,15px)!important}}

/* Stage navigation starts with the research pipeline, after the opening card. */
#reactor-viewport:not(.is-pipeline-mode):has(.tree-opening) .reactor-left-rail{display:none!important}

/* Center the opening card once its stage rail is hidden. */
@media(min-width:768px){#reactor-viewport:not(.is-pipeline-mode):has(.tree-opening) .center-holo-theatre{left:48px;right:48px}}

/* The organism relationships are explicit SVG edges, not painted branches. */
.tree-phylogeny{mix-blend-mode:normal}.phylogeny-branches{opacity:.88;filter:drop-shadow(0 1px 2px #0007)}.phylogeny-labels{paint-order:stroke;stroke:#04130c;stroke-width:5px;stroke-linejoin:round}.phylogeny-clades{paint-order:stroke;stroke:#04130c;stroke-width:4px;stroke-linejoin:round}
.tree-phylogeny-caption{position:absolute;right:4%;bottom:22px;text-align:right;font:11px/1.5 'Aptos',sans-serif;color:#aebba8;letter-spacing:.03em;pointer-events:none}
.phylogeny-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:767px){.tree-phylogeny-caption{font-size:9px;bottom:18px;right:7%;max-width:40%}.tree-opening-explore{font-size:11px;gap:10px}.phylogeny-labels{font-size:23px}.phylogeny-clades{font-size:17px}}
@media(max-width:767px){.tree-phylogeny .phylogeny-labels{font-size:44px;stroke-width:7px}.tree-phylogeny .phylogeny-clades{font-size:30px;letter-spacing:1px;stroke-width:6px}}
/* The tree is a fixed plate; only the independent animal frames move. */
.tree-opening-art{transform:none!important;will-change:auto}
