/* PROTOTYPE (throwaway): "The Descent" immersive layer.
   Active only when <html> has .imm. Without it the page is the classic page, unchanged.
   Remove: this file, immersive/, and the three tags marked IMMERSIVE in index.html. */

/* ---------- boot cover (until WebGL is ready; failsafe in index.html) ---------- */
.imm-boot { display: none; }
.imm-pending .imm-boot {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--bg-page);
  font: 500 var(--fs-label)/1.6 var(--font-mono); letter-spacing: var(--tracking-label); color: var(--brand-bright); text-transform: uppercase;
}
.imm-boot span::after { content: "\2588"; margin-left: 6px; animation: caret 1s steps(1) infinite; }

/* ---------- classic sections become the reading source (kept in the DOM for assistive tech and search) ---------- */
.imm .imm-src { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important; }
.imm .hud-rail, .imm .hud-scanbar { display: none !important; }
.imm-space { display: none; }
.imm .imm-space { display: block; position: relative; pointer-events: none; }

/* ---------- layers ---------- */
.imm-layers { position: fixed; inset: 0; z-index: 20; pointer-events: none; background: var(--bg-page); }
.imm-layers canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.imm-css { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.imm-css > div, .imm-css > div > div { pointer-events: none; }

/* ---------- in-world typography: text lives in space, not in cards ---------- */
/* !important: CSS3DObject sets an inline pointer-events:auto on every panel, which would make each whole (mostly empty) box swallow clicks meant for a panel behind it */
.imm-panel { color: var(--text-body); text-shadow: 0 0 28px rgba(2, 5, 10, 0.95), 0 0 4px rgba(2, 5, 10, 0.8); pointer-events: none !important; will-change: opacity; }
/* `backwards`, not `both`: a clip-path left on a 3D-transformed panel makes Chrome skip it when hit-testing, so nothing inside could be clicked */
.imm-panel.is-on { animation: imm-in 1.1s var(--ease) backwards; }
@keyframes imm-in { from { clip-path: inset(-80px 100% -80px -80px); } to { clip-path: inset(-80px -80px -80px -80px); } }
.imm-panel.is-live a, .imm-panel.is-live button { pointer-events: auto; }
.imm-panel h1, .imm-panel h2, .imm-panel h3 { text-shadow: 0 0 40px rgba(2, 5, 10, 0.9); }
.imm-panel .label { font-size: 15px; }

.imm-p-h1 h1 { font-size: 176px; line-height: 0.86; letter-spacing: -0.005em; max-width: none; text-shadow: 0 0 60px rgba(95, 237, 131, 0.28); }
.imm-p-h1 h1 .gold { color: var(--accent-gold); text-shadow: 0 0 44px rgba(255, 190, 46, 0.5); }
.imm-p-h1 .label { font-size: 17px; margin-bottom: 26px; }
.imm-p-h1 .label--bright::after { content: "\2588"; margin-left: 6px; animation: caret 1s steps(1) infinite; }
.imm-p-h1 .hero__head { transform: none !important; opacity: 1 !important; display: block; }

.imm-p-copy .lede { font-size: 27px; line-height: 1.5; max-width: none; color: var(--text-primary); }
.imm-p-copy .hero__cta { margin-top: 32px; }
.imm-p-copy .btn { font-size: 19px; padding: 16px 28px; }

.imm-p-viz .hero__viz { transform: none !important; box-shadow: none; border: 0; background: none; padding: 0; display: grid; gap: 22px; }
.imm-p-viz .viz-cap__text { font-size: 17px; }

.imm-p-ticker .ticker { border-block: 1px solid var(--border-active); background: rgba(2, 5, 10, 0.5); }

.imm-p-outcome .outcome { display: flex; gap: 18px; padding: 0 0 0 20px; border-left: 2px solid var(--brand-bright); background: none; }
.imm-p-outcome .outcome svg { width: 46px; height: 46px; }
.imm-p-outcome .outcome strong { font-size: 34px; line-height: 1.15; }
.imm-p-outcome .outcome span { font-size: 22px; margin-top: 8px; color: var(--text-body); }

.imm-p-head h2 { font-size: 118px; line-height: 0.9; max-width: none; }
.imm-p-head .sec-head { display: grid; gap: 28px; }
.imm-p-head .label { font-size: 17px; }

.imm-p-lead .overview__lead { font-size: 48px; line-height: 1.14; }
.imm-p-body .overview__body { font-size: 26px; line-height: 1.55; color: var(--text-primary); }
.imm-p-body mark { text-shadow: 0 0 22px rgba(95, 237, 131, 0.5); }
.imm-p-more .btn { font-size: 19px; padding: 16px 28px; pointer-events: auto; }

.imm-p-prob { display: grid; gap: 22px; }
.imm-p-prob h3 { font: 600 56px/1.04 var(--font-head); letter-spacing: -0.015em; color: var(--text-primary); }
.imm-p-prob p:not(.label) { font-size: 23px; line-height: 1.55; }
.imm-p-ans .card__answer { margin-top: 0; padding-top: 26px; border-top: 1px solid var(--border-active); gap: 18px; }
.imm-p-ans .mini { max-width: 520px; }
.imm-p-ans .mini text { font-size: 9px; }
.imm-p-ans p:not(.label) { font-size: 23px; line-height: 1.55; }
.imm-p-ans p:last-child { color: var(--text-primary); }

.imm-p-cap { display: grid; gap: 22px; }
.imm-p-cap .imm-cap-no { font-size: 20px; display: flex; align-items: center; gap: 16px; color: var(--accent-gold); }
.imm-p-cap .cap-tab__no { color: var(--brand-bright); font-size: 20px; }
.imm-p-cap .cap-panel { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 0; }
.imm-p-cap .cap-panel h3 { font: 600 42px/1.1 var(--font-head); max-width: none; letter-spacing: -0.012em; color: var(--text-primary); }
.imm-p-cap .cap-panel__text p { font-size: 22px; line-height: 1.55; max-width: none; }
.imm-p-cap .cap-art { max-width: 540px; }
.imm-p-cap .chip { font-size: 15px; padding: 8px 14px; }
.imm-p-note .label { font-size: 15px; color: var(--text-muted); }

.imm-p-gate { text-align: center; }
.imm-p-gate .label { font-size: 20px; justify-content: center; }
.imm-p-gate .imm-gate__line { margin-top: 14px; font-size: 30px; line-height: 1.2; color: var(--text-primary); }
.imm-p-lane { font: 600 30px/1 var(--font-mono); letter-spacing: 0.3em; color: var(--brand-bright); text-shadow: 0 0 24px rgba(95, 237, 131, 0.7); }

/* ---------- HUD ---------- */
.imm-ui { position: fixed; inset: 0; z-index: 48; pointer-events: none; }
.imm-ui[hidden] { display: none; }
.imm-steps { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 2px; pointer-events: auto; justify-items: end; }
.imm-step { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; background: none; border: 0; padding: 10px 4px; cursor: pointer; color: var(--text-muted); font: 500 var(--fs-label-sm)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.imm-step i { order: 2; width: 16px; height: 2px; background: currentColor; opacity: 0.5; transition: width 0.3s var(--ease), opacity 0.3s, background-color 0.3s; }
.imm-step span { order: 1; opacity: 0; transform: translateX(6px); transition: opacity 0.25s, transform 0.25s var(--ease); background: var(--bg-panel-strong); padding: 5px 8px; border: 1px solid var(--border-hairline); white-space: nowrap; }
.imm-step:hover span, .imm-step:focus-visible span { opacity: 1; transform: none; }
.imm-step:hover, .imm-step:focus-visible { color: var(--text-primary); }
.imm-step.is-cur { color: var(--brand-bright); }
.imm-step.is-cur i { width: 34px; opacity: 1; box-shadow: 0 0 10px var(--brand-bright); }
.imm-scene { position: absolute; left: 22px; bottom: 22px; font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); color: var(--text-muted); text-transform: uppercase; }
.imm-scene b { color: var(--brand-bright); font-weight: 500; }
.imm-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: 0.3em; color: var(--brand-bright); text-transform: uppercase; text-shadow: 0 0 14px rgba(95, 237, 131, 0.8); transition: opacity 0.5s; display: grid; justify-items: center; gap: 10px; }
.imm-hint::after { content: ""; width: 1px; height: 36px; background: linear-gradient(var(--brand-bright), transparent); animation: imm-drip 1.6s var(--ease) infinite; transform-origin: top; }
@keyframes imm-drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.imm-mode { position: absolute; right: 22px; bottom: 22px; pointer-events: auto; font: 500 var(--fs-label-sm)/1 var(--font-mono); letter-spacing: var(--tracking-label); color: var(--text-muted); text-decoration: none; border: 1px solid var(--border-hairline); border-radius: 999px; padding: 9px 14px; background: var(--bg-panel-strong); }
.imm-mode:hover { color: var(--text-primary); border-color: var(--border-active); }
/* the same switch on the classic page: it stays in the same corner, in both modes */
.imm-mode--page { position: fixed; z-index: 60; text-transform: uppercase; }
/* long jumps dissolve instead of flying through every scene in between: quick out, slower in */
.imm-curtain { position: fixed; inset: 0; z-index: 30; background: var(--bg-page); opacity: 0; pointer-events: none; transition: opacity 0.55s var(--ease); }
.imm-curtain.is-shut { opacity: 1; transition-duration: 0.26s; }
.imm-skip { position: fixed; left: 12px; top: 12px; z-index: 400; transform: translateY(-200%); }
.imm-skip:focus { transform: none; }

[data-motion="off"] .imm-hint::after, [data-motion="off"] .imm-boot span::after { animation: none; }

/* ======================================================================
   v2: every scene, and the generic block types the page composer emits
   ====================================================================== */

/* performance: the site's own decorative loops are covered by the world while it flies */
.imm .hero__fx, .imm .ticker { display: none !important; }
.imm body::before { display: none !important; animation: none !important; }
.imm-measure { position: fixed; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }
.imm-stats { position: fixed; left: 12px; top: 76px; font-size: 11px; z-index: 500; margin: 0; padding: 8px 10px; font: 500 11px/1.4 var(--font-mono); color: var(--brand-bright); background: rgba(2, 5, 10, 0.8); border: 1px solid var(--border-active); white-space: pre-wrap; max-width: 420px; pointer-events: none; }

.imm-panel .prose, .imm-panel .lede { font-size: inherit; }
.imm-panel li { list-style: none; }

/* homepage: districts, recognition, contact */
.imm-p-sol { display: block; }
.imm-p-sol .sol { display: block; }
.imm-p-sol a { display: grid; gap: 16px; text-decoration: none; color: var(--text-body); }
.imm-p-sol .label { font-size: 15px; }
.imm-p-sol .sol__icon { width: 54px; height: 54px; }
.imm-p-sol h3 { font: 600 50px/1.05 var(--font-head); letter-spacing: -0.015em; color: var(--text-primary); }
.imm-p-sol .sol__tag { font-size: 24px; line-height: 1.4; }
.imm-p-sol p:not(.label):not(.sol__tag) { font-size: 20px; line-height: 1.55; }
.imm-p-sol .sol__more { font-size: 20px; margin-top: 8px; }
.imm-p-sol a:hover .sol__more { color: var(--text-primary); }

.imm-p-award .award__img { border-radius: 8px; box-shadow: 0 0 60px rgba(255, 190, 46, 0.25); }
.imm-p-awardcopy { display: grid; gap: 26px; font-size: 25px; line-height: 1.5; color: var(--text-primary); }
.imm-p-awardcopy .award__copy { font-size: inherit; gap: 26px; }
.imm-p-awardcopy .badge { font-size: 17px; }
.imm-p-awardcopy .btn { font-size: 19px; padding: 16px 28px; }
.imm-p-logos .logos { margin: 0; gap: 30px; }
.imm-p-logos .logos__row { gap: 36px 56px; justify-content: center; }
.imm-p-logos .logos__row img { height: 44px; max-width: 240px; filter: grayscale(1) brightness(1.7); opacity: 0.9; }
.imm-p-logos .logos__row li:nth-child(4) img, .imm-p-logos .logos__row li:nth-child(7) img { height: 58px; }
.imm-p-logos .label { text-align: center; font-size: 16px; }

.imm-p-ccopy .cta__copy { gap: 26px; }
.imm-p-ccopy .cta__copy h2 { font-size: 84px; }
.imm-p-ccopy .cta__copy > p:not(.label) { font-size: 24px; max-width: none; }
.imm-p-ccopy .btn { font-size: 19px; padding: 16px 28px; }
.imm-p-ccopy .cta__direct a { font-size: 24px; }
.imm-p-form { text-shadow: none; }
.imm-p-form .form { background: rgba(5, 9, 13, 0.82); border-color: var(--border-active); box-shadow: 0 0 60px -20px rgba(95, 237, 131, 0.5); }
.imm-p-form.is-live .form input, .imm-p-form.is-live .form select, .imm-p-form.is-live .form textarea, .imm-p-form.is-live .form button { pointer-events: auto; }

/* inner pages */
.imm-p-title { display: grid; gap: 24px; justify-items: start; }
.imm-p-title h1 { font-size: 112px; line-height: 0.9; letter-spacing: 0; max-width: none; text-shadow: 0 0 60px rgba(95, 237, 131, 0.25); }
.imm-p-title--article h1 { font-size: 76px; line-height: 1; }
.imm-p-title .lede { font-size: 27px; line-height: 1.5; color: var(--text-primary); max-width: none; }
.imm-p-title .crumbs ol { font-size: 14px; }
.imm-p-title .label { font-size: 17px; }
.imm-p-title .chip { font-size: 14px; padding: 7px 12px; }
.imm-p-title .article-meta { font-size: 15px; }
.imm-p-title .btn { font-size: 19px; padding: 16px 28px; }
.imm-p-title .hero__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.imm-p-emblem .page-hero__art { display: grid !important; padding: 0; border: 0; background: none; box-shadow: none; }
.imm-p-emblem .emblem { width: 400px; height: 400px; }

.imm-p-head--m h2 { font-size: 84px; }
.imm-p-head--s h2 { font-size: 62px; }
.imm-p-head .sec-head__sub { font-size: 28px; max-width: none; }

.imm-p-text { display: grid; gap: 20px; font-size: 24px; line-height: 1.6; color: var(--text-body); }
.imm-p-text--lg { font-size: 30px; line-height: 1.45; color: var(--text-primary); }
.imm-p-text .label { font-size: 16px; }
.imm-p-text h2 { font-size: 66px; line-height: 0.95; letter-spacing: 0; }
.imm-p-text h3 { font: 600 38px/1.1 var(--font-head); color: var(--text-primary); }
.imm-p-text .split__text { gap: 20px; }
.imm-p-text .split__text h2 { font-size: 66px; }
.imm-p-text .statement { font-size: 40px; line-height: 1.25; max-width: none; }
.imm-p-text li { padding-left: 28px; }
.imm-p-text .prose__label { font-size: 15px; }
.imm-p-text .btn { font-size: 19px; padding: 16px 28px; }
.imm-p-media { display: grid; place-items: center; }
.imm-p-media img, .imm-p-media .scene { width: 100%; max-width: 480px; height: auto; }
.imm-p-media .scene { max-width: 520px; }

.imm-p-li { display: grid; gap: 16px; font-size: 21px; line-height: 1.55; color: var(--text-body); }
.imm-p-li h3 { font: 600 34px/1.1 var(--font-head); letter-spacing: -0.012em; color: var(--text-primary); }
.imm-p-li p { font-size: inherit; }
.imm-p-li .label { font-size: 15px; }
.imm-p-li--feature { font-size: 22px; }
.imm-p-li--feature h3 { font-size: 44px; }
.imm-p-li--feature .feature__sub { font-size: 25px; }
.imm-p-li .feature__text, .imm-p-li .principle { gap: 16px; }
.imm-p-li .minicards__icon, .imm-p-li .sol__icon { width: 46px; height: 46px; }
.imm-p-li a { display: grid; gap: 14px; text-decoration: none; color: var(--text-body); }
.imm-p-li .sol__more { font-size: 19px; }
.imm-p-li .icard__img { border-radius: 8px; }
.imm-p-li .icard__body { padding: 0; }
.imm-p-li .logo-badge img { height: 44px; width: auto; }
.imm-p-li--stats, .imm-p-li--stats.stats { display: grid; gap: 22px; }
.imm-p-li .stat p, .imm-p-li--stats .stat p { font-size: 34px; line-height: 1.25; }
.imm-p-li .stat mark { font-size: 1.9em; }
.imm-p-li .fact p { font-size: 25px; line-height: 1.45; }
.imm-p-li .stat, .imm-p-li .fact { padding: 0 0 0 22px; border-left: 2px solid var(--brand-bright); }
.imm-p-li--stats .stat { padding: 0 0 0 22px; border-left: 2px solid var(--brand-bright); }
.imm-p-li .principle__fig .scene, .imm-p-li .principle__fig img { max-width: 220px; }

.imm-p-embed { pointer-events: none; }
.imm-p-embed.is-live .embed, .imm-p-embed.is-live .embed * { pointer-events: auto; }
.imm-p-embed .embed { box-shadow: 0 0 70px -20px rgba(95, 237, 131, 0.5); }
.imm-p-cta .cta-band { display: grid; gap: 34px; justify-items: start; padding: 0; border: 0; background: none; }
.imm-p-cta h2 { font-size: 74px; line-height: 0.95; }
.imm-p-cta .cta-band__actions { display: flex; flex-wrap: wrap; gap: 18px; }
.imm-p-cta .btn { font-size: 21px; padding: 18px 32px; }

/* the page's draw-on-scroll masks belong to the page; in space everything is simply there */
.imm-panel h1, .imm-panel h2, .imm-panel h3 { -webkit-mask-image: none !important; mask-image: none !important; animation: none; }
.imm-panel .sec-head .label::after { transform: none !important; }
.imm-panel .btn { text-shadow: none; }
.imm-panel .btn--primary { color: var(--on-brand); }

/* v2.1: type scale tuned so a plate fits one frame */
.imm-p-li .feature, .imm-p-li .principle { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; gap: 16px; }
.imm-p-li--feature { font-size: 20px; }
.imm-p-li--feature h3 { font-size: 38px; }
.imm-p-li--feature .feature__sub { font-size: 22px; }
.imm-p-li--feature .prose { font-size: inherit; }
.imm-p-li--feature .prose ul { gap: 6px; }
.imm-p-text { font-size: 21px; line-height: 1.55; gap: 16px; }
.imm-p-text--lg { font-size: 27px; }
.imm-p-text h2, .imm-p-text .split__text h2 { font-size: 54px; line-height: 0.95; }
.imm-p-text .prose { font-size: inherit; }
.imm-p-li--principles, .imm-p-li--list { font-size: 21px; }
.imm-steps[hidden] { display: none; }
.imm-p-title--long h1 { font-size: 92px; }
.imm-p-title--article.imm-p-title--long h1 { font-size: 68px; }
/* panels out of focus hold still: no CSS animation, no repaint */
.imm-panel:not(.is-live) *, .imm-panel:not(.is-live) *::before, .imm-panel:not(.is-live) *::after { animation-play-state: paused !important; }

/* v3: cheaper compositing while the world is live */
.imm .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 9, 13, 0.9); }   /* a live blur over a moving canvas is re-done every frame */
.imm body::after { display: none; }
.imm-panel { will-change: transform; text-shadow: 0 0 14px rgba(2, 5, 10, 0.95), 0 1px 2px rgba(2, 5, 10, 0.9); }
.imm-panel h1, .imm-panel h2, .imm-panel h3 { text-shadow: 0 0 18px rgba(2, 5, 10, 0.9); }
.imm-p-h1 h1 { text-shadow: 0 0 22px rgba(95, 237, 131, 0.22); }
.imm-p-h1 h1 .gold { text-shadow: 0 0 20px rgba(255, 190, 46, 0.35); }
.imm-p-title h1 { text-shadow: 0 0 22px rgba(95, 237, 131, 0.2); }

/* guided flight: the page is pinned to one screen while the world flies; scrolling is handed back at the end */
html.imm { scrollbar-gutter: stable; }
html.imm-lock { overflow: hidden !important; }   /* html only: overflow on body too would make it a scroll container and the sticky top bar would scroll away with it */
.imm-hint { bottom: 84px; }
.imm-pager { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.imm-pager[hidden] { display: none; }
.imm-pager__b { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-active); background: var(--bg-panel-strong); color: var(--brand-bright); font: 600 16px/1 var(--font-mono); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.imm-pager__b:hover, .imm-pager__b:focus-visible { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 18px rgba(95, 237, 131, 0.5); }
.imm-pager__n { min-width: 70px; text-align: center; font: 500 var(--fs-label) var(--font-mono); letter-spacing: var(--tracking-label); color: var(--text-muted); }

/* the architecture diagram is one wide plate of real SVG text; the card chrome of the page is dropped, as everywhere in space */
.imm-p-diagram .arch-fig { padding: 22px 26px; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: rgba(2, 5, 10, 0.72); overflow: visible; }   /* a dim plate: thin text must stay readable over the world's gate lines */
.imm-p-diagram .arch { min-width: 0; }
.imm-p-diagram .arch .tx-body { fill: var(--text-primary); }