/* Глобальный слой: навигация, индикатор, курсор, липкая кнопка. Префикс .chrome- */
:root{ --chrome-nav-h:64px; }
@media (max-width:860px){ :root{ --chrome-nav-h:56px; } }

/* якоря: запас под навигацию при прямом заходе по #hash */
#hero,main > section,#footer{ scroll-margin-top:calc(var(--chrome-nav-h) + env(safe-area-inset-top,0px)) }
html.chrome-lock,html.chrome-lock body{ overflow:hidden }

/* ---------- Навигация ---------- */
.chrome-nav{
  position:fixed; z-index:60; inset:0 0 auto; left:0; width:100%;
  padding-top:env(safe-area-inset-top,0px);
  height:calc(var(--chrome-nav-h) + env(safe-area-inset-top,0px));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:transparent;
  transition:background-color var(--d-mid) var(--ease);
}
.chrome-nav.is-solid{ background:var(--bg) }

/* ---------- Dynamic Island ----------
   Полоса и остров — один и тот же элемент: при переходе плавно меняются top/left/width/height/radius
   (ширина острова меряется в JS → --nav-w/--nav-x). Стекло как GlassCapsule в приложении:
   blur 16, тон #252525 · 16%, кромка белая · 8%. */
.chrome-nav{
  --isl-ease:cubic-bezier(.32,.72,0,1);
  overflow:hidden; white-space:nowrap;
  transition:top 560ms var(--isl-ease),left 560ms var(--isl-ease),width 560ms var(--isl-ease),
    height 560ms var(--isl-ease),border-radius 560ms var(--isl-ease),padding 560ms var(--isl-ease),
    background-color 360ms var(--ease),box-shadow 360ms var(--ease),transform 420ms var(--isl-ease);
}
.chrome-nav.is-measure,.chrome-nav.is-measure *{ transition:none!important; animation:none!important }
.chrome-island-label{ display:none }
.chrome-nav.is-island{
  inset:auto; top:calc(12px + env(safe-area-inset-top,0px));
  left:var(--nav-x,50%); width:var(--nav-w,auto); height:48px;
  padding:0 6px 0 16px; gap:14px; border-radius:24px; justify-content:flex-start;
  background:rgba(37,37,37,.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.08);
}
.chrome-nav.is-island.is-solid{ background:rgba(37,37,37,.16) }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .chrome-nav.is-island,.chrome-nav.is-island.is-solid{ background:rgba(28,27,26,.92) }
}
.chrome-nav.is-island .chrome-brand{ min-height:36px; flex:none }
.chrome-nav.is-island .chrome-brand img{ width:20px; height:20px }
.chrome-nav.is-island .chrome-brand span{ display:none }
.chrome-nav.is-island .chrome-island-label{
  display:inline-flex; align-items:center; flex:none; min-width:calc(11ch + 11 * .08em); /* самая длинная подпись — 11 знаков с разрядкой */
  font-size:13px; letter-spacing:.08em; color:var(--ink);
  animation:chrome-isl-fade 420ms var(--isl-ease) 120ms both;
}
.chrome-nav.is-island .chrome-links{ display:none }
.chrome-nav.is-island .chrome-nav-r{ gap:16px; flex:none }
.chrome-nav.is-island .chrome-cta{ min-height:36px; padding:0 16px; font-size:14px; animation:chrome-isl-fade 420ms var(--isl-ease) 160ms both }
.chrome-nav.is-island.is-expanded{ padding-left:18px }
.chrome-nav.is-island.is-expanded .chrome-links{ display:flex; gap:20px; animation:chrome-isl-fade 380ms var(--isl-ease) 140ms both }
.chrome-nav.is-island.is-pulse{ animation:chrome-isl-pulse 460ms var(--isl-ease) }
@keyframes chrome-isl-fade{ from{ opacity:0; filter:blur(4px); transform:scale(.96) } to{ opacity:1; filter:none; transform:none } }
@keyframes chrome-isl-pulse{ 0%{ transform:none } 35%{ transform:scale(1.035,.93) } 100%{ transform:none } }
/* остров показывает секцию — подпись у правого индикатора больше не нужна */
.chrome-nav.is-island ~ .chrome-prog .chrome-prog-label{ opacity:0 }
.chrome-brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); min-height:44px }
.chrome-brand img{ width:24px; height:24px; transition:transform var(--d-mid) var(--ease) }
.chrome-brand:hover img{ transform:rotate(45deg) }
.chrome-brand span{ font-size:var(--t-small); letter-spacing:.08em; line-height:1 }

.chrome-nav-r{ display:flex; align-items:center; gap:36px }
.chrome-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0 }
.chrome-link{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-small); color:var(--ink-2); text-decoration:none;
  transition:color var(--d-fast) var(--ease);
}
.chrome-link:hover,.chrome-link[aria-current]{ color:var(--ink) }
/* метка текущего раздела: одна тихая точка под словом */
.chrome-link::after{
  content:""; position:absolute; left:50%; bottom:6px; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--ink); opacity:0; transform:scale(0);
  transition:opacity var(--d-fast) var(--ease),transform var(--d-mid) var(--ease);
}
.chrome-link[aria-current]::after{ opacity:1; transform:scale(1) }
.chrome-cta{ min-height:44px; padding:0 20px; font-size:var(--t-small) }
.chrome-mob-link,.chrome-menu-btn{ display:none }

.chrome-menu-btn{
  min-height:44px; min-width:44px; padding:0 0 0 4px; border:0; background:none; cursor:pointer;
  font-size:var(--t-small); letter-spacing:.06em; color:var(--ink);
}

@media (max-width:860px){
  .chrome-nav.is-island{ height:44px; padding:0 14px; gap:12px; border-radius:22px }
  .chrome-nav.is-island .chrome-mob-link{ display:none }
  .chrome-nav.is-island .chrome-island-label{ font-size:12px }
  .chrome-links,.chrome-cta{ display:none }
  .chrome-mob-link,.chrome-menu-btn{ display:inline-flex; align-items:center }
  .chrome-nav-r{ gap:20px }
  .chrome-brand span{ font-size:var(--t-small) }
  .chrome-link::after{ display:none }
}

/* ---------- Мобильное меню: строки табло на чёрном ---------- */
.chrome-menu{
  position:fixed; z-index:55; inset:0;
  padding-top:calc(var(--chrome-nav-h) + env(safe-area-inset-top,0px) + 32px);
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity var(--d-fast) linear;
}
.chrome-menu[hidden]{ display:none }
.chrome-menu.is-open{ opacity:1 }
.chrome-menu.is-open ~ .chrome-sticky{ visibility:hidden }
.chrome-rows{ list-style:none; margin:0; padding:0 }
.chrome-row{
  display:flex; align-items:center; gap:16px; min-height:64px;
  font-size:clamp(28px,8.4vw,40px); line-height:1; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
}
.chrome-row-dot{ width:8px; height:8px; border-radius:50%; background:var(--bg-4); flex:none; transition:background var(--d-fast) }
.chrome-row:active .chrome-row-dot,.chrome-row:hover .chrome-row-dot{ background:var(--ink) }
.chrome-menu:focus{ outline:none }
.chrome-menu-end{ display:grid; gap:20px }
.chrome-menu-cta{ width:100% }
.chrome-menu-foot{ font-size:var(--t-small); color:var(--ink-2); max-width:30ch }

/* ---------- LED-индикатор прогресса ---------- */
.chrome-prog{
  position:fixed; z-index:40; top:50%; transform:translateY(-50%);
  right:max(12px,calc(var(--m) / 2 - 2px),env(safe-area-inset-right,0px));
  display:flex; flex-direction:column; align-items:center; gap:16px;
  pointer-events:none;
}
.chrome-prog-dots{ display:grid; gap:8px }
.chrome-prog-dots i{
  display:block; width:4px; height:4px; border-radius:50%;
  background:var(--bg-4); transition:background-color var(--d-mid) var(--ease);
}
.chrome-prog-dots i.lit{ background:var(--ink-3) }
.chrome-prog-dots i.on{ background:var(--on); transform:scale(1.5) }
.chrome-prog-label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:11px; line-height:1; letter-spacing:.12em; color:var(--ink-2);
  min-height:8ch; white-space:nowrap;
}
@media (max-width:860px){ .chrome-prog{ display:none } }

/* ---------- Липкая кнопка (мобила) ---------- */
.chrome-sticky{ display:none }
@media (max-width:860px){
  .chrome-sticky{
    display:block; position:fixed; z-index:45; left:0; right:0; bottom:0;
    padding:12px max(var(--m),env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(var(--m),env(safe-area-inset-right,0px));
    background:var(--bg);
    transform:translateY(100%); transition:transform var(--d-mid) var(--ease);
  }
  .chrome-sticky.is-shown{ transform:none }
  .chrome-sticky-btn{ width:100% }
  /* чтобы кнопка не закрывала последний текст страницы */
  #footer{ padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) }
}

/* ---------- Курсор-точка ---------- */
.chrome-cursor{
  position:fixed; z-index:70; left:0; top:0; width:40px; height:40px; margin:-20px 0 0 -20px;
  border-radius:50%; background:var(--paper); mix-blend-mode:difference;
  pointer-events:none; opacity:0;
  scale:.2; transition:scale var(--d-mid) var(--ease),opacity var(--d-fast) linear;
  will-change:transform;
}
.chrome-cursor.is-on{ opacity:1 }
.chrome-cursor.is-hot{ scale:1 }
.chrome-cursor.is-down{ scale:.15; transition:scale var(--d-fast) var(--ease),opacity var(--d-fast) linear }
.chrome-cursor.is-hot.is-down{ scale:.8 }
.chrome-cursor.is-text{ opacity:0 }

@media (prefers-reduced-motion:reduce){
  .chrome-cursor{ display:none }
  .chrome-nav,.chrome-sticky,.chrome-menu,.chrome-prog-dots i{ transition:none }
  .chrome-nav,.chrome-nav.is-island,.chrome-nav.is-island.is-pulse,.chrome-nav.is-island *{ animation:none!important; transition:none!important }
}