:root{--bg-top:#0d1a15;--bg-bottom:#050a08;--branch:#549be2;--leaf-rest:#46C0C0;--amber:#86C98E;--amber-bright:#3bdddd;--cream:#f5efe3;--cream-dim:#cdc4b4;--card-bg:#f7f4ec;--card-border:#00000014;--card-eyebrow:#3f6fa8;--card-title:#22375a;--card-body:#5c6570;--card-close-border:#00000024;--card-close-fg:#4a5560}
.scene{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:56px 20px 40px}
.scene .eyebrow{letter-spacing:.28em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:14px}
.scene h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(32px,5vw,52px);margin:0 0 10px;text-align:center;letter-spacing:-.01em}
.scene .subtitle{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:17px;color:var(--cream-dim);text-align:center;max-width:480px;margin:0 0 8px}
.scene .hint{font-size:13px;color:var(--cream-dim);opacity:.7;margin-bottom:30px}
.scene .tree-wrap{position:relative;width:min(760px,92vw)}
.scene svg#treeSvg{width:100%;height:auto;display:block;overflow:visible}
.scene #treeSvg .tree-path{fill:var(--branch);transform-box:fill-box;transform-origin:center;outline:none}
.scene #treeSvg .tree-path.is-leaf{fill:var(--leaf-rest);cursor:pointer;transform-box:fill-box;transform-origin:center;transition:fill .25s ease,transform .25s ease,filter .25s ease;animation:leaf-invite 1.8s cubic-bezier(.22,.8,.3,1) infinite;will-change:transform,filter}
.scene #treeSvg .tree-path.is-leaf:nth-of-type(2n){animation-delay:-1.2s}
.scene #treeSvg .tree-path.is-leaf:nth-of-type(3n){animation-delay:-2.6s}
.scene #treeSvg .tree-path.is-leaf:nth-of-type(5n){animation-delay:-3.7s}
@keyframes leaf-invite {
0%,72%,100%{transform:scale(1);filter:drop-shadow(0 0 0 #f2c57200)}
82%{transform:scale(1.045);filter:drop-shadow(0 0 8px #f2c5728c)}
90%{transform:scale(1.015);filter:drop-shadow(0 0 3px #f2c57240)}
}
.scene #treeSvg .tree-path.is-leaf:hover,.scene #treeSvg .tree-path.is-leaf:focus-visible{animation:none;fill:#20cbcb;transform:scale(1.12);filter:drop-shadow(0 0 14px #153f174d) drop-shadow(0 0 4px #153f1740);outline:none}
@media (prefers-reduced-motion: reduce) {
.scene #treeSvg .tree-path.is-leaf{animation:none}
}
.scene #treeSvg .tree-path.is-leaf.opened{fill:var(--amber);animation:none}
.scene #treeSvg .tree-path.is-leaf:focus-visible{stroke:var(--cream);stroke-width:3}
.scene .leaf-tooltip{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 10px));background:#20cbcb;color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;z-index:20;box-shadow:0 8px 20px #00000059}
html[lang="ar"] .leaf-tooltip{font-family:'Tajawal',sans-serif}
.scene .leaf-tooltip.visible{opacity:1;transform:translate(-50%,calc(-100% - 16px))}
.scene .leaf-tooltip::after{content:"";position:absolute;left:50%;top:100%;width:8px;height:8px;background:#20cbcb;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.scene .progress{margin-top:26px;display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:320px;background-color:transparent;padding-top:3px}
.scene .progress span{width:9px;height:9px;border-radius:50%;background:#a39372b0;transition:background .3s ease,transform .3s ease}
.scene .progress span.filled{background:var(--amber-bright);transform:scale(1.15)}
.overlay{position:fixed;inset:0;background:#0306058c;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:100}
.overlay.visible{opacity:1;pointer-events:auto}
.tree-card{position:relative;direction:ltr;width:min(880px,100%);max-height:min(560px,88vh);background:var(--card-bg);border:1px solid var(--card-border);border-radius:26px;box-shadow:0 40px 90px #00000073;display:flex;overflow:hidden;transform:translateY(18px) scale(0.97);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);flex-direction:row}
.overlay.visible .tree-card{transform:translateY(0) scale(1)}
.card-text{flex:1 1 55%;min-width:0;padding:44px;display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:left;direction:ltr}
html[lang="ar"] .card-text{text-align:right;direction:rtl}
.card-media{flex:1 1 45%;min-width:0;position:relative;background:#dfe3dc}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-eyebrow{font-size:15px;font-weight:600;color:var(--card-eyebrow);letter-spacing:.02em}
.card-eyebrow .card-num{font-weight:700;display:none}
.card-text h2{font-family:'Fraunces',serif;font-weight:600;font-size:30px;margin:0;color:var(--card-title);line-height:1.25}
html[lang="ar"] .card-text h2{font-family:'Tajawal',sans-serif;font-weight:700}
.card-text p{font-size:15px;line-height:1.7;color:var(--card-body);margin:0;white-space:pre-wrap}
.close-btn{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--card-close-border);background:#ffffffbf;color:var(--card-close-fg);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease,color .25s ease,transform .25s ease;z-index:2}
.close-btn:hover,.close-btn:focus-visible{background:var(--card-title);color:#fff;transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce) {
#treeSvg .tree-path.is-leaf{animation:none}
.tree-card{transition:none}
.overlay{transition:none}
}
@media (max-width: 720px) {
.tree-card{flex-direction:column;max-height:min(640px,90vh);overflow-y:auto}
.card-media{order:-1;flex-basis:220px}
.card-text{padding:30px 26px 34px}
}
@media (max-width: 480px) {
.card-text h2{font-size:24px}
}