/* ============================================================================
   site/fx/chrome.css — обвязка страницы «как у Ландо»: индикатор прокрутки,
   переходы между страницами, шапка у самого верха, подчёркивание раздела.

   Всё здесь — оформление вокруг содержимого, а не само содержимое: ни одно
   правило не прячет текст. Где движение можно отдать браузеру целиком
   (переход страниц, шапка у верха, подчёркивание), оно отдано CSS: модулю
   fx/chrome.js нужно время доехать, а эти вещи видны в первом же кадре —
   жди они скрипт, зритель увидел бы сначала старое состояние, потом скачок.
   ========================================================================== */

/* ── 1. Индикатор прокрутки (.scroll-indicator у Ландо) ────────────────────
   Тонкая риска у правого края, по центру высоты. Бегунок — доля страницы на
   экране, но не короче 10 % и не длиннее 25 % дорожки: на главной двадцать
   с лишним экранов, и честная доля дала бы точку. Появляется, только когда
   листают, и гаснет через полсекунды покоя — поверх разделов не висит.
   Разметку создаёт chrome.js; без скрипта индикатора просто нет. */
.fx-si{
  position:fixed; z-index:61; right:10px; top:30vh; height:40vh; width:2px;
  border-radius:2px; pointer-events:none;
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  opacity:0; contain:strict;
  transition:opacity .5s cubic-bezier(.215,.61,.355,1),   /* power2.out */
             background-color .4s var(--e-micro);
}
.fx-si.is-on{ opacity:1 }
/* Уступает рельсу фильма, пока фильм на экране (chrome.js). */
.fx-si.is-off{ opacity:0 !important }
.fx-si-t{
  position:absolute; left:0; top:0; width:100%; height:var(--fx-si-h, 10%);
  border-radius:inherit;
  background:color-mix(in srgb, var(--ink) 72%, transparent);
  /* Перехода по transform нет: бегунок ставится каждый кадр прокрутки, а
     прокрутка уже сглажена (Lenis). Переход перезапускался на каждом кадре
     — лишний пересчёт стиля и отставание риски от страницы на 0,3 с
     (трасса 24.09.2026, tools/site-motion-check.mjs --trace). */
  transition:background-color .4s var(--e-micro);
}
/* На светлом полотне (tone.js ставит html.is-light) риска темнеет вместе с
   буквами шапки — светлая на бумаге пропадала бы. */
.is-light .fx-si{ background:color-mix(in srgb, var(--paper-ink) 14%, transparent) }
.is-light .fx-si-t{ background:color-mix(in srgb, var(--paper-ink) 62%, transparent) }
/* Как у Ландо: пальцу риска не нужна (у телефона своя полоса прокрутки), а
   на узком окне она ложилась бы на текст у края. */
@media (hover:none), (pointer:coarse), (max-width:639.98px){
  .fx-si{ display:none }
}

/* ── 2. Переходы между страницами ──────────────────────────────────────────
   У Ландо страницы меняет Taxi.js под занавесом Rive. У нас — встроенный
   в браузер переход между документами (View Transitions): старая страница
   чуть уходит вверх и гаснет в цвет полотна, новая поднимается из-под низа
   овальной шторкой. Шапка не участвует: у неё своё имя, и её снимки стоят
   без движения — меню на месте, пока под ним меняется страница.

   Браузер без переходов просто открывает страницу. При «уменьшить движение»
   правило не включается вовсе.

   Все правила — под типом fx-page: если какой-то модуль когда-нибудь
   запустит переход ВНУТРИ страницы (startViewTransition), эта шторка его
   не заденет. Стили псевдоэлементов перехода берутся из НОВОЙ страницы, а
   имя шапки в снимке — из обеих, поэтому файл обязан стоять на каждой
   странице (стоит: его подключает _shell.html). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; types:fx-page }
}

/* Имя шапке — только на время перехода. Постоянное view-transition-name
   делает элемент «корнем подложки» (backdrop root), и стекло шапки перестало
   бы размывать страницу под собой. */
html:active-view-transition-type(fx-page) .hdr{ view-transition-name:fx-hdr }

/* Шторка — подложка пары снимков цветом полотна: гаснущая старая страница
   уходит в неё, а не в белый. */
html:active-view-transition-type(fx-page)::view-transition-group(root){ animation:none }
html:active-view-transition-type(fx-page)::view-transition-image-pair(root){ background:var(--bg) }
html:active-view-transition-type(fx-page)::view-transition-old(root){
  mix-blend-mode:normal;
  animation:fx-vt-leave .8s cubic-bezier(.165,.84,.44,1) both;          /* power3.out */
}
html:active-view-transition-type(fx-page)::view-transition-new(root){
  mix-blend-mode:normal;
  animation:fx-vt-enter .8s cubic-bezier(.165,.84,.44,1) both;          /* power3.out */
}
/* Шапка стоит: снимок новой шапки сразу на своём месте, старой — нет. */
html:active-view-transition-type(fx-page)::view-transition-group(fx-hdr){ animation:none }
html:active-view-transition-type(fx-page)::view-transition-old(fx-hdr){ animation:none; opacity:0 }
html:active-view-transition-type(fx-page)::view-transition-new(fx-hdr){ animation:none; opacity:1 }

@keyframes fx-vt-leave{
  to{ transform:translate3d(0,-6vh,0); opacity:.3 }
}
/* Эллипс растёт из-под нижней кромки: край шторки — купол, а не прямая.
   Полуось 70 % ширины — купол заметно выгнут, но не превращается в круг.
   150 % высоты в конце — чтобы купол накрыл и верхние углы:
   (0,5/0,7)² + (1/1,5)² < 1. */
@keyframes fx-vt-enter{
  from{ clip-path:ellipse(70% 0% at 50% 100%) }
  to{ clip-path:ellipse(70% 150% at 50% 100%) }
}

/* ── 3. Шапка у самого верха ───────────────────────────────────────────────
   У Ландо на первом экране навигация без подложки и крупнее, а за первые
   10 % экрана пути собирается в плашку. У нас так же: наверху стекла нет,
   знак и кнопка в 1,1 раза крупнее; к 10vh прокрутки — привычная плашка.

   Ведёт всё одна величина --fx-open (1 — верх страницы, 0 — плашка).
   Её перематывает прокрутка: в браузерах со scroll-driven animations — сам
   CSS (ни одного кадра до скрипта), в прочих — chrome.js. Пока её никто не
   двигает, она 0, и правила ниже рисуют ровно прежнюю плашку.

   Стекло переезжает с .hdr-in на его ::after: фон нельзя растворить, не
   растворив и буквы. Размытие должно уйти с самой .hdr-in — иначе она стала
   бы «корнем подложки», и слою под буквами нечего было бы размывать.
   Трансформ .hdr не трогаем: им шапка уезжает вверх (main.js, .hdr.hide). */
@property --fx-open{ syntax:'<number>'; inherits:true; initial-value:0 }

@keyframes fx-hdr-open{
  from{ --fx-open:1 }
  to{ --fx-open:0 }
}

@media (min-width:992px) and (prefers-reduced-motion:no-preference){
  .hdr-in,
  .is-light .hdr-in{
    background:none; border-color:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .hdr-in::after{
    content:""; position:absolute; inset:-1px; z-index:-2;
    border-radius:inherit; pointer-events:none;
    background:var(--glass); background-color:var(--glass-base); border:var(--hair);
    box-shadow:var(--shadow), var(--bevel);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    opacity:calc(1 - var(--fx-open, 0));
    transition:border-color .4s var(--e-micro), box-shadow .4s var(--e-micro);
  }
  .is-light .hdr-in::after{
    border-color:rgba(13,26,21,.10);
    box-shadow:0 10px 28px -16px rgba(13,26,21,.30), var(--bevel);
  }
  /* Молочный слой светлого полотна тоже растворяется наверху. */
  .is-light .hdr-in::before{ opacity:calc(1 - var(--fx-open, 0)) }

  /* Знак растёт от левого края, кнопка — от центра: справа от неё язык,
     слева меню. Свойство scale, а не transform: у кнопки transform занят
     подъёмом при наведении. Уже 1200 px промежутки в шапке — по 12 px, меню
     там и так переносится в две строки, и лишние 10 % прижали бы знак к
     «Что умеет» вплотную: там шапка только снимает стекло. */
  @media (min-width:1200px){
    .hdr .brand{ transform-origin:0 50%; scale:calc(1 + .1 * var(--fx-open, 0)) }
    .hdr .cta{ scale:calc(1 + .1 * var(--fx-open, 0)) }
  }

  /* Без плашки меню стоит прямо на кадре фильма. Слева у кадра своё
     затемнение, справа — нет, и светлый угол фургона съедал бы «EN».
     Мягкая тень сверху держит буквы и гаснет вместе с --fx-open. */
  .hdr::before{
    content:""; position:absolute; left:0; right:0; top:0; height:180%;
    z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(5,11,9,.52), rgba(5,11,9,0));
    opacity:var(--fx-open, 0);
  }

  @supports (animation-timeline: scroll()){
    .hdr{
      animation-name:fx-hdr-open;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:scroll(root block);
      animation-range:0px 10vh;
    }
  }
}

/* ── 4. Подчёркивание текущего раздела прорисовывается слева ───────────────
   Один раз при открытии страницы. Анимация CSS, а не скрипт: она стартует
   в первом кадре (в переходе — вместе со шторкой) и кончается видимой при
   любом исходе — скрытого состояния, которое кто-то должен снять, нет. */
@media (prefers-reduced-motion:no-preference){
  .hdr-nav a[aria-current="page"]::after{
    transform-origin:0 50%;
    animation:fx-underline .6s cubic-bezier(.645,.045,.355,1) .15s both;  /* power2.inOut */
  }
}
@keyframes fx-underline{
  from{ transform:scaleX(0) }
  to{ transform:scaleX(1) }
}

@media (prefers-reduced-motion:reduce){
  .fx-si,.fx-si-t{ transition:none }
}