/* ATÁRO — версия 4. Телепорт: скролл ведёт камеру сквозь сцену.
   RTL, десктоп-first. Единственная зависимость — three.js, вшита в
   assets/vendor, ни CDN, ни сборщика.

   Вся картинка живёт в одном холсте WebGL. CSS отвечает только за текст,
   строки интерфейса и виньетку — и ничего из этого не анимируется по
   кадрам прокрутки. Правило версии 3 в силе: backdrop-filter не
   применяется нигде.
*/

/* ─── шрифты ─────────────────────────────────────────────────────────────── */
@font-face{font-family:Heebo;src:url(../fonts/heebo-he.woff2) format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;src:url(../fonts/heebo-la.woff2) format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Assistant;src:url(../fonts/assistant-he.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Assistant;src:url(../fonts/assistant-la.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}

:root{
  --void:#04050A;
  --ink:#F4F2F7;
  --dim:#A9A6C0;
  /* Акцент пурпурный с 2026-08-24. ⚠ Светлота подобрана под
     прежний амбровый #FFB259 (яркость 0,52 против 0,54): насыщенный
     пурпур вроде #8B5CF6 темнее вдвое и провалил бы контраст на
     светлых кадрах сцены, где запас и без того был 6,9 при пороге 4,5. */
  --acc:#C9AAFF;
  --acc-ink:#150A28;          /* текст поверх акцентной плашки */
  --cyan:#79E4FF;

  --line:rgba(255,255,255,.14);
  --ez:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font:400 17px/1.65 Assistant,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2{margin:0;font-family:Heebo,system-ui,sans-serif;font-weight:500;line-height:1.06}
p{margin:0}
a{color:inherit}

.skip{
  position:fixed;top:8px;inset-inline-start:8px;z-index:90;
  padding:12px 18px;min-height:44px;display:inline-flex;align-items:center;
  background:var(--acc);color:var(--acc-ink);border-radius:4px;
  transform:translateY(-160%);transition:transform .2s;
}
.skip:focus{transform:none}

/* ═══ ХОЛСТ ═══════════════════════════════════════════════════════════════ */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* виньетка и зерно — статичные слои, не пересчитываются */
.vig{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 105% at 50% 42%,rgba(4,5,10,0) 42%,rgba(4,5,10,.55) 78%,rgba(4,5,10,.9) 100%);
}
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.boot{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--void);transition:opacity .7s var(--ez),visibility .7s;
}
.boot i{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);border-top-color:var(--acc);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
body.is-live .boot{opacity:0;visibility:hidden}

/* ═══ ВЕРХНЯЯ СТРОКА ══════════════════════════════════════════════════════ */
.top{
  position:fixed;top:0;inset-inline:0;z-index:40;
  display:flex;align-items:center;gap:24px;padding:22px var(--pad);
}
/* ⚠ Затемнение под строкой держит 0.9 на всей высоте пунктов и только
   потом отпускает. На прежней кривой оно проседало до 0.6 ровно там, где
   стоят ссылки, и на светлом кадре портала контраст падал до 3,5. */
.top::before{
  content:'';position:absolute;inset:0 0 -80px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(4,5,10,.92) 0%,rgba(4,5,10,.9) 46%,rgba(4,5,10,.45) 74%,rgba(4,5,10,0) 100%);
}
/* ⚠ Латиница внутри dir=rtl выкладывается справа налево: без ltr
   ATÁRO читается как ORÁTA. */
.brand{
  font-family:Heebo,sans-serif;font-weight:600;font-size:18px;letter-spacing:.34em;
  text-decoration:none;display:inline-flex;min-height:44px;align-items:center;
  direction:ltr;unicode-bidi:isolate;
  opacity:0;transition:opacity .5s var(--ez);
}
/* Пока знак стоит в сцене, дубль в углу не нужен — он появляется
   только после того, как камера ушла в портал. */
body.is-past-hero .brand{opacity:1}
/* Пока сайт отрасли занимает экран, наша строка сверху уезжает: у сайта
   своя шапка, и две шапки подряд читались как ошибка вёрстки. */
.top{transition:opacity .45s var(--ez),transform .5s var(--ez)}
body.is-inside .top{opacity:0;transform:translateY(-12px);pointer-events:none}
.brand__a{color:var(--acc)}

.menu{margin-inline-start:auto;display:flex;gap:4px}
.menu a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  font-size:13px;letter-spacing:.16em;text-decoration:none;color:var(--dim);
  border-radius:999px;transition:color .2s,background .2s;
}
.menu a:hover,.menu a:focus-visible{color:var(--ink);background:rgba(255,255,255,.07)}

.cta{
  display:inline-flex;align-items:center;min-height:44px;padding:0 22px;
  font-size:14px;text-decoration:none;border-radius:999px;
  color:var(--acc-ink);background:var(--acc);
  transition:transform .2s var(--ez),filter .2s;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
/* ⚠ На первом экране знак живёт в сцене, и плотная амбровая таблетка в
   пустом углу читалась как единственный элемент интерфейса. Пока знак не
   вышел в шапку, кнопка стоит контуром и наливается вместе с ним. */
body:not(.is-past-hero) .cta{
  color:var(--acc);background:transparent;
  box-shadow:inset 0 0 0 1px rgba(201,170,255,.42);
}
.cta{transition:transform .2s var(--ez),filter .2s,background .5s var(--ez),color .5s var(--ez),box-shadow .5s var(--ez)}

/* ═══ ТЕКСТ ═══════════════════════════════════════════════════════════════ */
.copy{position:fixed;inset:0;z-index:20;pointer-events:none}
.ch{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--pad) clamp(92px,12vh,146px);
  opacity:0;visibility:hidden;transform:translateY(22px);
  transition:opacity .55s var(--ez),transform .7s var(--ez),visibility .55s;
}
.ch.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.ch__in{position:relative;isolation:isolate;width:max-content;max-width:100%}
.ch__in>*{max-width:min(46ch,40vw)}

/* Подложка ровно под текстом. Общая вуаль гасила бы и сцену. */
.ch__in::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-300px -200px -160px -760px;
  /* ⚠ Радиус подложки не должен вылезать за её же коробку. При 128%
     градиент на верхней кромке блока всё ещё держал ~0.25 альфы, и
     кромка читалась прямой горизонтальной линией поперёк кадра — на
     светлом портале это выглядело браком рендера. 100% гасит градиент
     ровно на границе. */
  background:radial-gradient(92% 100% at 100% 100%,
    rgba(4,5,10,.95) 0%,rgba(4,5,10,.93) 34%,rgba(4,5,10,.82) 56%,
    rgba(4,5,10,.5) 76%,rgba(4,5,10,.15) 90%,rgba(4,5,10,0) 100%);
}

/* первый экран: знак в сцене, текст под ним по центру */
.ch__in--hero{width:100%;text-align:center;padding-bottom:clamp(88px,15vh,190px)}
.ch__in--hero>*{max-width:none}
.ch__in--hero::before{
  inset:-140px -40px -120px -40px;
  background:radial-gradient(70% 100% at 50% 100%,
    rgba(4,5,10,.9) 0%,rgba(4,5,10,.72) 40%,rgba(4,5,10,.3) 74%,rgba(4,5,10,0) 100%);
}
.ch__in--hero .hint{justify-content:center}

.k{font-size:12px;letter-spacing:.34em;color:var(--acc);margin-bottom:18px}
.h{font-size:clamp(36px,5vw,80px);letter-spacing:-.01em}
.p{margin-top:20px;font-size:clamp(16px,1.2vw,20px);color:var(--dim);max-width:50ch}
.lede{font-size:clamp(16px,1.45vw,23px);color:var(--dim)}
.hint{
  margin-top:26px;font-size:13px;letter-spacing:.14em;color:var(--dim);
  display:flex;align-items:center;gap:10px;
}
.hint__d{
  width:7px;height:7px;border-radius:50%;background:var(--acc);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,170,255,.45)}
  70%{box-shadow:0 0 0 13px rgba(201,170,255,0)}
  100%{box-shadow:0 0 0 0 rgba(201,170,255,0)}
}

.specs{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,66px);margin:34px 0 0;max-width:none}
.ch__in .specs{max-width:none}
.specs div{min-width:150px}
.specs dt{font-family:Heebo,sans-serif;font-size:clamp(38px,4.2vw,64px);font-weight:600;color:var(--ink)}
.specs dd{margin:6px 0 0;font-size:14px;color:var(--dim)}

/* ⚠ Работы — НАСТОЯЩИЕ ССЫЛКИ внутри главы, а не картинки на пути.
   Три демо лежат в works/ рядом с сайтом: после заливки на хостинг
   клиент открывает свой концепт одним кликом, без второго домена.
   Цель нажатия 56px — тот же порог, что у остальной навигации. */
.works{
  list-style:none;margin:26px 0 0;padding:0;max-width:none;
  display:flex;flex-wrap:wrap;gap:10px;
}
.ch__in .works{max-width:none}
.works a{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:56px;padding:9px 20px;border-radius:6px;text-decoration:none;
  border:1px solid rgba(201,170,255,.34);background:rgba(201,170,255,.05);
  transition:transform .25s var(--ez),border-color .25s,background .25s;
}
.works a:hover,.works a:focus-visible{
  transform:translateY(-3px);border-color:var(--acc);background:rgba(201,170,255,.12);
}
.works b{font-family:Heebo,sans-serif;font-size:19px;font-weight:600;color:var(--acc)}
.works span{font-size:12.5px;letter-spacing:.02em;color:var(--dim)}

.mail{
  display:inline-flex;align-items:center;min-height:56px;margin-top:28px;
  padding:0 30px;border-radius:999px;width:max-content;
  font-family:Heebo,sans-serif;font-size:clamp(18px,1.6vw,25px);
  text-decoration:none;color:var(--acc-ink);background:var(--acc);
  transition:transform .25s var(--ez),filter .25s;
}
.mail:hover{transform:translateY(-3px);filter:brightness(1.08)}

/* Вотсап и телефон под кнопкой почты. Обводкой, а не заливкой: заливка
   спорила бы с самой почтой, а она здесь главное действие. */
.ways{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.way{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;
  border-radius:999px;border:1px solid var(--line);
  font-family:Heebo,sans-serif;font-size:16px;text-decoration:none;color:var(--ink);
  transition:border-color .2s,background .2s,transform .25s var(--ez);
}
.way:hover{border-color:var(--acc);background:rgba(201,170,255,.10);transform:translateY(-2px)}
.way--wa svg{color:var(--acc)}

/* ═══ НИЖНЯЯ СТРОКА ═══════════════════════════════════════════════════════ */
.foot{
  position:fixed;bottom:0;inset-inline:0;z-index:40;
  display:flex;align-items:center;gap:18px;padding:0 var(--pad) 24px;
}
/* ⚠ Подложка нижней панели усилена под второй портал. Ворота финала
   горят во весь кадр, и подпись 12px на их кромке падала до 4,04 при
   пороге 4,5 — замер поймал, глаз бы простил. Градиент линейный и
   гаснет в ноль на своей верхней границе: радиальный с радиусом больше
   коробки уже давал видимый шов поперёк кадра. */
.foot::before{
  content:'';position:absolute;inset:-118px 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(4,5,10,.97) 0%,rgba(4,5,10,.72) 45%,rgba(4,5,10,0) 100%);
}
.rail{position:relative;flex:1;height:1px;background:rgba(255,255,255,.13);overflow:hidden}
.rail i{
  position:absolute;inset:0;background:var(--acc);
  transform:scaleX(0);transform-origin:100% 50%;   /* RTL: растёт справа */
  will-change:transform;
}
.foot__t{font-size:12px;letter-spacing:.24em;color:var(--dim);white-space:nowrap}

.track{position:relative;z-index:-1;pointer-events:none}

/* Кнопка почты живёт только на узком экране, см. медиазапрос ниже. */
.mcall{display:none}

/* ═══ УЗКИЙ ЭКРАН ═════════════════════════════════════════════════════════
   Десктоп — единственный рабочий сценарий. Здесь только чтобы не
   разваливалось: сцена остаётся, эффекты по курсору отключены. */
@media (max-width:900px){
  .menu,.cta{display:none}
  .ch__in>*{max-width:100%}
  .h{font-size:clamp(28px,7.5vw,42px)}
  /* ⚠ Отступ снизу считан ПОД КНОПКУ, а не на глаз: она стоит на 62px и
     держит 48px роста, то есть занимает полосу 62–110. На прежних 86px
     абзац главы уходил ей под низ и обрезался — на снимке 390×844 было
     видно, как таблетка съедает последнюю строку. */
  .ch{padding-bottom:148px}
  /* Постоянная кнопка почты: единственный способ связаться с телефона.
     Держится поверх всего и НЕ гаснет вместе с шапкой на .is-inside —
     иначе она исчезала бы ровно там, где пользователь дольше всего. */
  .mcall{
    position:fixed;z-index:60;bottom:62px;inset-inline-start:var(--pad);
    display:inline-flex;align-items:center;min-height:48px;padding:0 22px;
    font-family:Heebo,sans-serif;font-size:15px;text-decoration:none;
    color:var(--acc-ink);background:var(--acc);border-radius:999px;
    box-shadow:0 8px 26px rgba(4,5,10,.6);
  }
  /* На самой главе «קשר» плавающая кнопка не нужна: там во весь экран
     стоит своя, крупная. Две подряд читались как ошибка вёрстки, и вдобавок
     мелкая садилась поверх крупной. */
  body:has(#c7.is-on) .mcall{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hint__d{animation:none}
  .ch{transition-duration:.01ms}
}