/* ── Атлас ИС: светлый космос. Палитра согласована с styles.css (dxlc tokens) ── */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/InterVariable.woff2') format('woff2-variations'),
      url('/fonts/InterVariable.woff2') format('woff2');
}

:root{
  --bg:#f0f3f8;
  --surface:#ffffff;
  --ink:#0e2156;
  --ink-2:#4a5568;
  --ink-3:#8a94a8;
  --accent:#1172b6;
  --accent-soft:#e8f4fd;
  --sky:#92c4f0;
  --sky-soft:#e8f3fb;
  --lavender:#c8b8f0;
  --mint:#a4e3c4;
  --ok:#276749;
  --ok-soft:#f0fff4;
  --border:#d4dbe8;
  --shadow:0 2px 12px rgba(14,33,86,.08);
  --shadow-lg:0 8px 32px rgba(14,33,86,.15);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --spring:cubic-bezier(.32,.72,.28,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Фон: мягкие блобы + звёздная пыль (параллакс из JS) ── */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.bg-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.bg-blob-1{width:52vw;height:52vw;left:-14vw;top:-18vw;background:var(--sky-soft);animation:drift1 26s ease-in-out infinite alternate}
.bg-blob-2{width:44vw;height:44vw;right:-12vw;bottom:-16vw;background:#f3eefb;animation:drift2 32s ease-in-out infinite alternate}
.bg-blob-3{width:30vw;height:30vw;right:18vw;top:-10vw;background:#ebfaf2;animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,3vw,0) scale(1.08)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3vw,-4vw,0) scale(1.06)}}
#stars{position:fixed;inset:0;pointer-events:none}

/* ── Сцена ── */
#stage{position:fixed;inset:0;cursor:grab;touch-action:none}
#stage.dragging{cursor:grabbing}
#scene{position:absolute;inset:0;pointer-events:none;z-index:5}
#stage canvas{pointer-events:none}
#sats{position:absolute;inset:0;pointer-events:none}
#sats .sat{pointer-events:auto}
.label3d{pointer-events:none}
.label3d .sat{pointer-events:auto;transition:box-shadow .25s,border-color .25s,background .25s,transform .15s linear}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:7;
  background:radial-gradient(ellipse at 46% 50%,transparent 58%,rgba(14,33,86,.055) 100%);
}
/* «Туннель» перелёта: на время полёта края темнеют — взгляд стягивается к цели.
   Отдельный слой с opacity (градиенты не анимируются), body.is-flying ставит движок. */
.vignette::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(ellipse at 50% 50%,transparent 34%,rgba(14,33,86,.24) 100%);
}
body.is-flying .vignette::after{opacity:1;transition-duration:.28s}

/* ── Спутники ── */
.sat{
  position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--border);
  backdrop-filter:blur(6px);
  color:var(--ink);font:500 13.5px/1 'Inter',sans-serif;letter-spacing:.01em;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 10px rgba(14,33,86,.10);
  will-change:transform,opacity;
  transition:box-shadow .25s,border-color .25s,background .25s;
}
.sat:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(17,114,182,.28)}
.sat.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 4px 18px rgba(17,114,182,.25)}
.sat .dot{width:7px;height:7px;border-radius:50%;background:#2f9e63;flex:none}
.sat.is-planned .dot{background:#b3bccb}
.sat.is-planned{color:var(--ink-2)}
.sat.is-moon{font-size:12px;padding:3px 9px;opacity:.95;border-radius:20px}
.sat.is-moon .dot{width:5px;height:5px}
.sat.hub{
  background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:0 6px 22px rgba(14,33,86,.35);
}
.sat.hub .dot{background:var(--mint)}
.sat.hub:hover{background:#1a2f6e}
.sat:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── HUD: углы экрана ── */
.hud{position:fixed;z-index:40;display:flex;align-items:center;gap:12px}
.hud-tl{left:28px;top:24px}
.hud-tr{right:28px;top:24px}
.hud-bl{left:28px;bottom:22px;flex-direction:column;align-items:flex-start;gap:6px}
.hud-br{right:28px;bottom:22px;flex-direction:column;align-items:flex-end;gap:8px}

.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#3f8fd4,var(--ink));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),0 4px 14px rgba(14,33,86,.35);
}
.brand-name{font-weight:650;font-size:15px;letter-spacing:.01em}
.brand-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  color:var(--ink);font:550 13.5px 'Inter',sans-serif;cursor:pointer;
  transition:transform .18s var(--spring),box-shadow .2s,background .2s;
  text-decoration:none;
}
.btn:hover{box-shadow:var(--shadow);background:#fff}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover{background:#1a2f6e;box-shadow:0 6px 20px rgba(14,33,86,.3)}
.btn-icon{padding:10px;border-radius:12px}

/* ── Хлебные крошки фокус-режима (обзор › WMS) ── */
.crumb{
  position:fixed;top:26px;left:50%;transform:translate(-50%,-6px);z-index:45;
  display:flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--spring),transform .35s var(--spring);
}
.crumb.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.crumb-chip{
  border:1px solid var(--border);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  color:var(--ink);font:550 12.5px 'Inter',sans-serif;padding:8px 14px;border-radius:999px;
  cursor:pointer;transition:box-shadow .2s,background .2s;
}
.crumb-chip:hover{background:#fff;box-shadow:var(--shadow)}
.crumb-sep{color:var(--ink-3);font-size:13px}
.crumb-cur{
  font:600 12.5px 'Inter',sans-serif;color:#fff;background:var(--ink);
  padding:8px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(14,33,86,.3);
}

/* ── Титры режима «Презентация» ── */
.tour-cap{
  position:fixed;left:50%;bottom:70px;transform:translate(-50%,10px);z-index:45;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:18px;padding:16px 26px;
  max-width:560px;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .45s var(--spring),transform .45s var(--spring);
  box-shadow:var(--shadow-lg);
}
.tour-cap.is-on{opacity:1;transform:translate(-50%,0)}
.tour-cap b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.tour-cap span{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--ink-2)}
body.touring .hero,body.touring .hud-bl,body.touring .hints{opacity:0 !important;pointer-events:none;transition:opacity .4s}
/* «Страница» планеты (фокус-режим): общий титул карты уходит — заголовком
   экрана становится крошка ALIS › планета и карточка системы */
body.is-focus .hero{opacity:0 !important;pointer-events:none}
.hero{transition:opacity .4s}

/* ── Тултип потока у курсора ── */
.flow-tip{
  position:fixed;left:0;top:0;z-index:60;
  background:var(--ink);color:#fff;font:550 12px 'Inter',sans-serif;
  padding:6px 12px;border-radius:9px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
  box-shadow:0 4px 14px rgba(14,33,86,.3);
}
.flow-tip.is-on{opacity:.96}

.panel-extra:empty{display:none}

/* телеметрия — микротип в духе mission control */
.telemetry{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;display:flex;gap:18px;
}
.telemetry b{color:var(--ink-2);font-weight:600}
.hints{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}

/* ── Заголовок сцены ── */
.hero{position:fixed;left:5.5vw;top:50%;transform:translateY(-50%);z-index:30;max-width:340px;pointer-events:none}
.hero h1{font-size:clamp(26px,3.1vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.14}
.hero h1 .ch{display:inline-block;opacity:0;transform:translateY(.55em);transition:opacity .5s var(--spring),transform .6s var(--spring)}
.hero.is-in h1 .ch{opacity:1;transform:none}
.hero p{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2);opacity:0;transition:opacity .8s ease .9s}
.hero.is-in p{opacity:1}
.hero .legend{display:flex;gap:16px;margin-top:18px;opacity:0;transition:opacity .8s ease 1.2s;pointer-events:auto}
.hero.is-in .legend{opacity:1}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.legend i{width:8px;height:8px;border-radius:50%;background:#2f9e63}
.legend i.planned{background:#b3bccb}
.legend i.flow-i{
  width:22px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#0e5aa0,#1d9e75);
  clip-path:polygon(0 0,82% 0,82% -60%,100% 50%,82% 160%,82% 100%,0 100%);
}

/* ── Панель справа ── */
#panel{
  position:fixed;right:20px;top:20px;bottom:20px;z-index:50;
  width:min(400px,calc(100vw - 40px));
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px);
  border:1px solid rgba(212,219,232,.8);border-radius:22px;
  box-shadow:var(--shadow-lg);
  transform:translateX(calc(100% + 40px));
  transition:transform .55s var(--spring);
  display:flex;flex-direction:column;overflow:hidden;
}
#panel.is-open{transform:none}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0}
.panel-title{font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.panel-close{
  flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);
  background:#fff;color:var(--ink-2);font-size:16px;cursor:pointer;line-height:1;
  transition:background .2s,color .2s;
}
.panel-close:hover{background:var(--accent-soft);color:var(--ink)}
.badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.03em;
}
.badge.live{background:var(--ok-soft);color:var(--ok)}
.badge.planned{background:#eef1f6;color:var(--ink-3)}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.panel-body{padding:16px 24px 20px;overflow-y:auto;flex:1}
.panel-desc{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.panel-sec{margin-top:20px}
.panel-sec h3{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:10px;
}
.row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border-radius:12px;border:1px solid transparent;
  background:transparent;font:500 13.5px 'Inter',sans-serif;color:var(--ink);cursor:pointer;
  transition:background .18s,border-color .18s;
}
.row:hover{background:#fff;border-color:var(--border)}
.row .dot{width:8px;height:8px;border-radius:50%;background:#2f9e63;flex:none}
.row.planned{color:var(--ink-3)}
.row.planned .dot{background:#c3cbd9}
.row .tail{margin-left:auto;color:var(--ink-3);font-size:12px}
.row .arr{margin-left:auto;color:var(--accent);opacity:0;transition:opacity .15s;font-size:14px}
.row:hover .arr{opacity:1}
.panel-foot{padding:16px 24px 22px;border-top:1px solid rgba(212,219,232,.6)}
.panel-foot .btn{width:100%;justify-content:center;font-size:14px;padding:13px}

/* ── Выпадающий список систем (fallback-навигация) ── */
#syslist{
  position:fixed;right:28px;top:74px;z-index:60;width:280px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:10px;opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s var(--spring),transform .25s var(--spring);
}
#syslist.is-open{opacity:1;transform:none;pointer-events:auto}

/* ── Прелоадер ── */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .6s ease,visibility .6s;
}
#loader.is-done{opacity:0;visibility:hidden}
#loader .brand-mark{width:52px;height:52px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.loader-bar{width:180px;height:2px;border-radius:2px;background:var(--border);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}
.loader-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}

/* ── Адаптив ── */
@media (max-width:820px){
  .hero{left:24px;right:24px;top:86px;transform:none;max-width:none}
  .hero h1{font-size:24px}
  .hero p{font-size:13px}
  .hud-bl{display:none}
  .hints{display:none}
  #panel{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:62vh;transform:translateY(calc(100% + 24px))}
  #panel.is-open{transform:none}
}

/* телефон: четыре кнопки top-бара не помещаются в ряд у right:28 —
   компактнее отступы, «Презентация» прячем (жест-режим ей не нужен),
   крошку фокус-режима опускаем ниже кнопок, чтобы не перекрывались */
@media (max-width:640px){
  .hud-tr{right:10px;top:12px;gap:6px}
  .hud-tr .btn{padding:7px 10px;font-size:11.5px}
  #tourBtn{display:none}
  .crumb{top:58px}
}

/* планшет: чуть компактнее hero, панель уже */
@media (min-width:821px) and (max-width:1120px){
  .hero{max-width:280px;left:4vw}
  #panel{width:min(360px,calc(100vw - 40px))}
}

/* большие экраны и ТВ: масштабируем типографику и панель */
@media (min-width:1900px){
  .hero{max-width:460px;left:6vw}
  .hero h1{font-size:52px}
  .hero p{font-size:17px;max-width:420px}
  .legend span{font-size:14px}
  .sat{font-size:16px;padding:9px 19px}
  .brand-name{font-size:17px}
  .brand-sub{font-size:13px}
  .btn{font-size:15px;padding:12px 22px}
  .telemetry{font-size:12px}
  .hints{font-size:11.5px}
  #panel{width:480px;right:28px;top:28px;bottom:28px}
  .panel-title{font-size:24px}
  .panel-desc{font-size:15px}
  .row{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .bg-blob{animation:none}
  .hero h1 .ch{transition:none}
  .hero p,.hero .legend{transition:none}
}

/* кнопка звука во включённом состоянии */
#sndBtn.is-on{color:var(--accent,#1172b6);border-color:currentColor}