/* INPOWER VERSE — the HTML layer (intro, list, contact, nav) and the 3D overlay chrome.
Two page states, as classes on :
(none) a plain document: nav, intro, list. Works without WebGL and before 3D loads.
.vload 3D is loading behind the intro (progress bar shown).
.v3d the 3D hub is live: the page stops scrolling, the intro collapses into the nav,
the list becomes a side panel over the scene. */
:root{
--ember:#ff7a2a; --gold:#ffc24a; --crim:#c81e3c; --deep:#4b2a7b;
--ink:#07060b; --paper:#f4f1ee; --mut:#a9b1c1;
--glass:rgba(10,8,14,.86); --line:rgba(255,122,42,.38);
--btn:linear-gradient(90deg,#b0172f,#c2410c); /* white text on it stays >= 4.5:1 */
--nav-h:56px;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* our own display rules must not beat the attribute */
html,body{margin:0;background:#07060b;color:var(--paper);
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
html.v3d,html.v3d body{height:100%;overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none}
#gl{position:fixed;inset:0;z-index:0}
button{font-family:inherit}
a{color:var(--ember)}
a:hover{color:#ffab75}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:10px;top:-60px;z-index:100;background:#111;color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{top:10px}
/* RU text waits for intro.js instead of flashing the English markup */
html[data-l10n=wait] [data-i18n]{visibility:hidden}
/* the 3D chrome exists only while the hub is live */
html:not(.v3d) :is(#gl,#fade,#focus,#world,#prog,#hint,#raise,#gyroBtn){display:none!important}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;
padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:rgba(10,8,14,.6);
color:var(--gold);font:600 14px/1.25 'Segoe UI',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:rgba(40,16,20,.8);color:#fff}
.btn.primary{background:var(--btn);border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.small{min-height:34px;padding:6px 12px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.acts{display:flex;flex-wrap:wrap;gap:8px}
/* ---------- nav ---------- */
#vnav{position:fixed;top:0;left:0;right:0;z-index:75;height:var(--nav-h);display:flex;align-items:center;
gap:10px;padding:0 12px;background:linear-gradient(180deg,rgba(7,6,11,.95),rgba(7,6,11,.72));
border-bottom:1px solid rgba(255,122,42,.18);backdrop-filter:blur(8px)}
#vmark{width:34px;height:34px;flex:none;filter:drop-shadow(0 0 10px rgba(255,122,42,.45))}
#navLinks{margin-left:auto;display:flex;align-items:center;gap:2px}
#navLinks a{color:#e6e0ea;text-decoration:none;font-size:13.5px;padding:8px 10px;border-radius:8px;white-space:nowrap}
#navLinks a:hover,#navLinks a[aria-expanded=true]{background:rgba(255,122,42,.14);color:#fff}
#navLang{font-weight:700;color:var(--gold)!important}
#navMenu{display:none;margin-left:auto;min-height:40px;padding:6px 14px;border-radius:10px;cursor:pointer;
background:rgba(10,8,14,.7);border:1px solid var(--line);color:var(--gold);font:600 14px 'Segoe UI',sans-serif}
@media (max-width:1080px){
#navMenu{display:inline-flex;align-items:center}
#navLinks{display:none;position:absolute;top:calc(var(--nav-h) - 4px);right:8px;flex-direction:column;
align-items:stretch;min-width:230px;padding:8px;background:rgba(10,8,14,.97);border:1px solid var(--line);
border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
#vnav.open #navLinks{display:flex}
#navLinks a{padding:11px 12px;font-size:15px}
}
/* ---------- intro (plain document) ---------- */
#main{padding-top:var(--nav-h)}
#intro{min-height:calc(100vh - var(--nav-h));min-height:calc(100dvh - var(--nav-h));display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:16px;padding:32px 20px 40px;text-align:center;
background:radial-gradient(60% 60% at 50% 42%,#1a0a18 0%,#07060b 75%)}
#introMark{width:96px;height:96px;filter:drop-shadow(0 0 26px rgba(255,122,42,.45))}
#introTitle{margin:0;font:800 clamp(26px,5.4vw,46px)/1.12 'Segoe UI',system-ui,sans-serif;letter-spacing:.01em;
color:#fff;text-shadow:0 0 30px rgba(255,122,42,.35)}
#introPurpose{margin:0;max-width:640px;color:#d3d8e2;font-size:16px;line-height:1.6}
#introActs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
#introNote{margin:0;max-width:560px;color:var(--gold);font-size:14px;line-height:1.5}
#introFail{display:none;margin:0;color:var(--gold);font-size:14px}
html[data-verse-fail] #introFail{display:block}
html:lang(ru) #introFail span:lang(en),html:not(:lang(ru)) #introFail span:lang(ru){display:none}
#intro p a{font-size:14px}
@media (max-width:480px),(max-height:700px){ /* 360×640: the three buttons stay above the consent bar */
#intro{gap:11px;padding-top:18px}
#introMark{width:64px;height:64px}
#introPurpose{font-size:15px;line-height:1.5}
}
#bootProg{display:none;flex-direction:column;align-items:center;gap:8px;margin-top:4px}
html.vload #bootProg{display:flex}
#bootLabel{color:var(--mut);font-size:13px;letter-spacing:.04em}
#bootTrack{width:min(360px,68vw);height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
#bootBar{width:0;height:100%;background:linear-gradient(90deg,var(--crim),var(--ember),var(--gold));transition:width .35s ease}
#bootPct{font:12px/1 'Consolas',monospace;color:var(--ember)}
/* ---------- intro collapsed into the nav (3D live) ---------- */
/* #main stays static here: its fixed children must stack against the nav, not inside #main */
html.v3d #main{padding:0}
html.v3d #intro{position:fixed;top:0;left:54px;height:var(--nav-h);min-height:0;padding:0;background:none;
z-index:76;flex-direction:row;justify-content:flex-start;pointer-events:none}
html.v3d #intro>:not(h1){display:none}
html.v3d #introTitle{font:700 14px/1 'Segoe UI',system-ui,sans-serif;letter-spacing:.06em;text-shadow:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 160px)}
@media (min-width:1081px){ html.v3d #introTitle{max-width:calc(100vw - 820px)} }
/* ---------- project list ---------- */
#list{max-width:980px;margin:0 auto;padding:28px 18px 48px;scroll-margin-top:var(--nav-h)}
#listTitle,.card{scroll-margin-top:calc(var(--nav-h) + 12px)}
html.v3d #list{position:fixed;top:var(--nav-h);right:0;bottom:0;z-index:72;width:min(560px,100vw);max-width:none;
margin:0;overflow:auto;overscroll-behavior:contain;background:rgba(8,7,12,.95);
border-left:1px solid var(--line);padding:18px 16px 32px}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#listTitle{margin:0;font:800 26px/1.2 'Segoe UI',system-ui,sans-serif;color:#fff}
.list-intro{color:var(--mut);font-size:14.5px;line-height:1.5;margin:8px 0 18px}
#listItems{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:900px){ html:not(.v3d) #listItems{grid-template-columns:1fr 1fr} }
.card{background:rgba(16,12,22,.9);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 16px 14px}
.card h3{margin:0 0 6px;font:700 18px/1.3 'Segoe UI',system-ui,sans-serif;color:#fff}
.cap-meta{margin:0 0 8px;color:var(--gold);font-size:12.5px;line-height:1.45}
.cap-purpose,.cap-role{margin:0 0 8px;color:#d6dbe4;font-size:14px;line-height:1.55}
.cap-role{color:#bfc6d3}
.cap-credit{margin:0 0 8px;color:var(--mut);font-size:12.5px;font-style:italic}
.card details{margin:4px 0 12px;font-size:13.5px;color:#cfd5df}
.card summary{cursor:pointer;color:var(--ember);padding:4px 0}
.card dl{margin:8px 0 0}
.card dt{font-weight:700;color:#e8e2ec;margin-top:8px}
.card dd{margin:2px 0 0;line-height:1.55}
.card .acts .lnk{align-self:center;font-size:13.5px;padding:4px 2px}
.list-foot{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;font-size:14px}
/* ---------- contact panel ---------- */
#contact{position:fixed;top:calc(var(--nav-h) + 8px);right:12px;z-index:85;width:min(400px,calc(100vw - 24px));
max-height:calc(100dvh - var(--nav-h) - 20px);overflow:auto;background:rgba(10,8,14,.97);
border:1px solid var(--line);border-radius:16px;padding:14px 18px 18px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#contact h2{margin:0;font:700 19px/1.3 'Segoe UI',system-ui,sans-serif;color:#fff}
#contact h3{margin:18px 0 6px;font:700 14px/1.3 'Segoe UI',system-ui,sans-serif;color:#e8e2ec}
.panel-note{color:var(--mut);font-size:13.5px;line-height:1.5;margin:8px 0 14px}
#chatNote{color:var(--gold)}
#contactList{margin:0;padding-left:18px;line-height:1.9;font-size:14px}
.x{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:transparent;
color:#fff;font-size:20px;line-height:1;cursor:pointer}
/* ---------- portal iris ---------- *
* one element does the whole flight: a radial hole that closes to black, tinted ember at the
* rim so the tunnel reads as fire rather than a fade-to-black cut. */
#fade{position:fixed;inset:0;z-index:65;opacity:0;pointer-events:none;
--iris:78%; --warp:.6;
background:
radial-gradient(circle at 50% 50%, rgba(255,122,42,0) calc(var(--iris) - 10%),
rgba(255,122,42,calc(.30 * var(--warp))) calc(var(--iris) - 2%),
rgba(120,20,40,calc(.55 * var(--warp))) calc(var(--iris) + 4%),
#07060b calc(var(--iris) + 16%));
transition:opacity .25s linear}
/* ---------- the silent gyro nudge ---------- */
#raise{position:fixed;right:18px;top:calc(var(--nav-h) + 54px);z-index:58;display:flex;align-items:center;
justify-content:center;padding:6px;border-radius:12px;background:rgba(10,8,14,.55);
border:1px solid rgba(255,194,74,.28);opacity:0;transform:translateY(-6px);
transition:opacity .35s,transform .35s;pointer-events:none}
#raise.in{opacity:1;transform:translateY(0)}
.phone-scene{position:relative;width:104px;height:76px;display:flex;align-items:flex-end;justify-content:center}
.phone-scene.small{width:46px;height:38px;flex:0 0 46px}
.phone{width:34px;height:56px;border-radius:7px;border:2px solid rgba(255,194,74,.85);
background:linear-gradient(180deg,rgba(255,122,42,.30),rgba(138,60,255,.22));
transform-origin:50% 92%;animation:phoneLift 2.8s cubic-bezier(.5,0,.3,1) infinite;
box-shadow:0 0 16px rgba(255,122,42,.35)}
.phone-scene.small .phone{width:17px;height:28px;border-width:1.5px;border-radius:4px}
.phone i{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:10px;height:2px;
border-radius:2px;background:rgba(255,194,74,.8)}
.phone-scene.small .phone i{width:6px;top:4px}
.phone-arc{position:absolute;left:50%;bottom:4px;width:74px;height:38px;margin-left:-37px;
border:1.5px dashed rgba(255,122,42,.35);border-bottom:none;border-radius:74px 74px 0 0;opacity:.75}
.phone-scene.small .phone-arc{width:34px;height:18px;margin-left:-17px;border-radius:34px 34px 0 0}
@keyframes phoneLift{
0%,12% {transform:rotateX(0deg) rotate(-72deg)}
46%,78% {transform:rotateX(0deg) rotate(0deg)}
100% {transform:rotateX(0deg) rotate(-72deg)}
}
/* ---------- focused project ---------- */
#focus{position:fixed;right:18px;bottom:18px;z-index:50;width:min(360px,calc(100vw - 36px));
max-height:calc(100dvh - var(--nav-h) - 36px);overflow:auto;
background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
backdrop-filter:blur(10px);opacity:0;transform:translateY(14px) scale(.98);
transition:all .32s cubic-bezier(.2,.8,.3,1);pointer-events:none;
box-shadow:0 18px 50px rgba(0,0,0,.55)}
#focus.in{opacity:1;transform:none;pointer-events:auto}
#focusTitle{margin:0 0 6px;font:800 19px/1.2 'Segoe UI',system-ui,sans-serif;color:#fff;letter-spacing:.01em}
#focusBody .cap-purpose,#focusBody .cap-role{font-size:13px;margin-bottom:6px}
#focusBody .acts{margin:10px 0}
#focusGo{width:100%}
/* ---------- hint / toast ---------- */
#hint{position:fixed;left:50%;bottom:20px;transform:translate(-50%,10px);z-index:45;
background:rgba(8,7,12,.7);border:1px solid rgba(255,255,255,.1);border-radius:22px;
padding:7px 16px;font-size:12.5px;color:#cdd5e2;opacity:0;transition:all .35s;
pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#hint.in{opacity:1;transform:translate(-50%,0)}
#err{position:fixed;left:50%;top:calc(var(--nav-h) + 10px);transform:translate(-50%,-8px);z-index:90;
background:rgba(120,20,30,.92);border:1px solid rgba(255,120,120,.5);border-radius:10px;
padding:9px 16px;font-size:13px;color:#fff;opacity:0;transition:all .3s;pointer-events:none}
#err.in{opacity:1;transform:translate(-50%,0)}
/* ---------- gyro ---------- */
#gyroBtn{position:fixed;top:calc(var(--nav-h) + 10px);right:18px;z-index:50;background:rgba(10,8,14,.72);
border:1px solid var(--line);color:var(--gold);border-radius:20px;padding:8px 14px;
font:12px 'Consolas',monospace;cursor:pointer;backdrop-filter:blur(8px)}
#gyroBtn.on{color:#8effc0;border-color:rgba(46,255,140,.45)}
/* ---------- portal loading ---------- */
#prog{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:14px;opacity:0;transition:opacity .4s;pointer-events:none}
#prog.in{opacity:1}
#progLabel{font:700 13px 'Consolas',monospace;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);text-shadow:0 0 20px rgba(255,122,42,.5)}
#progTrack{width:min(360px,60vw);height:2.5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
#progBar{width:0;height:100%;background:linear-gradient(90deg,var(--crim),var(--ember),var(--gold));
transition:width .3s ease;box-shadow:0 0 14px rgba(255,122,42,.7)}
#progPct{font:11.5px 'Consolas',monospace;color:var(--mut)}
/* ---------- inside a world ---------- */
#world{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;transition:opacity .4s}
#world.in{opacity:1}
#worldHead{position:absolute;top:calc(var(--nav-h) + 62px);left:20px;max-width:min(52vw,520px)}
#worldTitle{margin:0;font:800 clamp(20px,3.4vw,30px)/1.1 'Segoe UI',system-ui,sans-serif;color:#fff;
letter-spacing:.02em;text-shadow:0 2px 26px rgba(0,0,0,.7)}
#worldSub{margin:6px 0 0;color:#c3cbd9;font-size:13.5px;line-height:1.5;text-shadow:0 2px 12px rgba(0,0,0,.8)}
#exitBtn{position:absolute;top:calc(var(--nav-h) + 10px);left:20px;pointer-events:auto;cursor:pointer;
background:rgba(10,8,14,.8);border:1px solid var(--line);color:var(--ember);
border-radius:10px;padding:9px 15px;font:600 13px 'Segoe UI',sans-serif;backdrop-filter:blur(8px)}
#exitBtn:hover{background:rgba(40,12,18,.85);color:#fff}
#info{position:absolute;right:18px;bottom:18px;width:min(340px,calc(100vw - 36px));
max-height:calc(100dvh - var(--nav-h) - 110px);overflow:auto;
background:var(--glass);border:1px solid rgba(255,255,255,.12);border-radius:14px;
padding:14px 16px;backdrop-filter:blur(10px);opacity:0;transform:translateY(12px);
transition:all .35s;pointer-events:auto}
#info.in{opacity:1;transform:none}
#infoTitle{font:700 13px 'Consolas',monospace;letter-spacing:.06em;color:var(--gold);margin-bottom:8px}
#infoBody{margin:0 0 8px;padding-left:16px;color:#cbd4e1;font-size:12.5px;line-height:1.75}
#infoBody li{margin:0}
#infoCard .cap-purpose,#infoCard .cap-role{font-size:13px}
#infoCard .acts{margin-top:10px}
@media (max-width:720px){
#focus{left:12px;right:12px;bottom:12px;width:auto;max-height:58dvh}
#focusBody .cap-purpose{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#focusBody .cap-role{display:none}
#worldHead{top:calc(var(--nav-h) + 58px);left:14px;max-width:72vw}
#worldSub{display:none} /* the tagline is already on the banner you came from */
#hint{display:none} /* a phone gets the glyph, not a sentence */
#info{left:12px;right:12px;bottom:12px;width:auto;max-height:44dvh}
#infoBody,#infoCard .cap-role{display:none}
#infoCard .cap-purpose{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#exitBtn{left:14px}
#gyroBtn{right:14px;padding:7px 11px}
#raise{top:calc(var(--nav-h) + 50px);right:14px}
.btn{min-height:44px}
}
/* the consent bar (ip-consent.js) sits on the bottom edge: bottom-anchored layers move above it */
html[data-consent-bar=visible] body{padding-bottom:var(--ip-consent-h,0px)}
html[data-consent-bar=visible] #intro{padding-bottom:calc(40px + var(--ip-consent-h,0px))}
html[data-consent-bar=visible].v3d #intro{padding-bottom:0}
html[data-consent-bar=visible] #list{bottom:var(--ip-consent-h,0px)}
html[data-consent-bar=visible] :is(#focus,#info){bottom:calc(18px + var(--ip-consent-h,0px));
max-height:calc(100dvh - var(--nav-h) - 36px - var(--ip-consent-h,0px))}
html[data-consent-bar=visible] #hint{bottom:calc(20px + var(--ip-consent-h,0px))}
/* G10: no drift, bob, pulses or looping CSS; JS-driven motion is switched off in the modules */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}