/* ═══════════════════════════════════════════════════════════════════════
   ДВЕРЬ. Первый и единственный экран getnexo.ru.

   ЧТО ЗДЕСЬ ЗА ЗАДАЧА. Человек пришёл по ссылке и уже решил посмотреть.
   Рассказ на этом месте не убеждает, а задерживает: до двери надо было
   пролистать два экрана. Владелец сказал прямо — «без текстов и показов,
   сразу регистрация, минимализм, люксовые цвета».

   ЧТО ТАКОЕ ЛЮКС В ЭКРАНЕ. Не золото и не блёстки. Воздух, один тёплый
   металл на чернильном, точная типографика и ровно одно движение. Всё
   остальное — шум, который дорогие вещи себе не позволяют.

   ЦВЕТА. Чернильный не чёрный: #0B0B0C тёплее и глубже, чистый чёрный на
   экране выглядит дырой. Текст не белый: #F5F3EF — бумажный, он не режет
   глаз ночью. Металл — шампань #E6DCC8: он читается дорогим и при этом
   не спорит с чернильным, как спорил бы золотой.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0B0B0C;
  --paper:#F5F3EF;
  --muted:rgb(245 243 239 / .54);
  --faint:rgb(245 243 239 / .30);
  --metal:#E6DCC8;
  --line:rgb(245 243 239 / .14);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body.door{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",
    Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  min-height:100svh;
}
/* Свет позади знака — один источник, очень мягкий. Он делает чернильный
   объёмным; без него экран читается как выключенный. */
body.door::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 8%,
    rgb(230 220 200 / .09), transparent 62%);
}
.door-in{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(26px,5vh,44px);
  padding:clamp(28px,7vw,56px) 24px;text-align:center;position:relative;
}

/* ── ЗНАК ───────────────────────────────────────────────────────────── */
.mark{width:min(420px,86vw);display:flex;flex-direction:column;align-items:center}
.mark-arc{width:100%;height:auto;display:block;margin-bottom:-8%}
/* Линия ОБВОДИТСЯ. Длина пути взята с запасом: точная длина у каждого
   браузера своя на доли пикселя, и недорисованный хвост заметнее, чем
   лишний. */
.mark-arc-line{
  stroke-dasharray:520;stroke-dashoffset:520;
  animation:draw .9s var(--ease) .1s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

.mark-word{
  margin:0;font-size:clamp(38px,11.5vw,76px);font-weight:800;
  /* Плотный трекинг — то, что делает слово знаком, а не надписью. */
  letter-spacing:-.045em;line-height:.92;
  background:linear-gradient(168deg,#FFFFFF 8%,#EFE7D8 46%,#B9AE99 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translate3d(0,14px,0);
  animation:rise .7s var(--ease) .45s forwards;
}
.mark-word sup{font-size:.24em;vertical-align:super;letter-spacing:0;
  -webkit-text-fill-color:var(--faint)}
@keyframes rise{to{opacity:1;transform:none}}

/* Подпись расходится по буквам — так же, как на макете владельца. */
.mark-tag{
  margin:clamp(10px,2vh,16px) 0 0;display:flex;gap:clamp(18px,6vw,64px);
  font-size:clamp(9px,2.4vw,11.5px);font-weight:500;color:var(--muted);
  opacity:0;letter-spacing:.1em;
  animation:track .8s var(--ease) .75s forwards;
}
@keyframes track{to{opacity:1;letter-spacing:.34em}}

/* ── СТРОКА ─────────────────────────────────────────────────────────── */
.door-line{
  /* Ширина по фразе, а не круглым числом: на 19 знаках строка ломалась
     на «онлайн-» и «записью», и дефис переноса читался как опечатка. */
  margin:0;max-width:24ch;
  font-size:clamp(19px,4.6vw,26px);font-weight:500;letter-spacing:-.02em;
  line-height:1.32;color:var(--muted);
  opacity:0;animation:rise .7s var(--ease) .95s forwards;
}

/* ── ВХОДЫ ──────────────────────────────────────────────────────────── */
.door-ways{
  width:min(360px,100%);display:flex;flex-direction:column;gap:12px;
  opacity:0;animation:rise .7s var(--ease) 1.1s forwards;
}
.door-btn{
  display:flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 22px;border:1px solid var(--line);border-radius:999px;
  background:none;color:var(--paper);
  font:600 16px/1 inherit;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),
    transform .15s var(--ease);
}
.door-btn:active{transform:scale(.985)}
.door-btn:hover{border-color:rgb(245 243 239 / .3)}
/* Главный вход — светлый: на чернильном это самая заметная вещь на
   экране, и ей должна быть та кнопка, которая быстрее. */
.door-btn.main{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.door-btn.main:hover{background:#fff}
.door-mail{display:flex;gap:8px}
.door-mail input{
  flex:1;min-width:0;min-height:54px;padding:0 20px;
  border:1px solid var(--line);border-radius:999px;
  background:rgb(245 243 239 / .04);color:var(--paper);
  font:500 16px/1 inherit;
}
.door-mail input::placeholder{color:var(--faint)}
.door-mail input:focus{outline:none;border-color:rgb(230 220 200 / .5)}
.door-mail .door-btn{flex:none;padding:0 24px}

.door-quiet{
  margin:0;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  font-size:14px;opacity:0;animation:rise .7s var(--ease) 1.25s forwards;
}
.door-quiet a{color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px}
.door-quiet a:hover{color:var(--paper)}

/* ── ПОДВАЛ ─────────────────────────────────────────────────────────── */
.door-foot{
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;
  padding:0 24px clamp(22px,4vh,34px);
  font-size:12px;color:var(--faint);
  opacity:0;animation:rise .7s var(--ease) 1.4s forwards;
}
.door-foot a{color:inherit;text-decoration:none}
.door-foot a:hover{color:var(--muted)}

/* Движение — украшение, а не условие: кому оно мешает, тот видит
   готовый экран сразу и целиком. */
@media (prefers-reduced-motion:reduce){
  .mark-arc-line{stroke-dashoffset:0;animation:none}
  .mark-word,.mark-tag,.door-line,.door-ways,.door-quiet,.door-foot{
    opacity:1;transform:none;animation:none}
  .mark-tag{letter-spacing:.34em}
}

/* ПОДВАЛ НА ТЕЛЕФОНЕ — ОДНА ПОЛОСА, А НЕ ПЯТЬ СТРОК.
   Строка с именем и ИНН шире экрана в 375 точек, и с зазором в 18 точек
   каждая следующая ссылка уходила на свою строку: пять строк по центру
   и половина экрана под юридической подписью. Владелец прислал снимок со
   словами «слишком много места занимают».

   Имя и ИНН держим отдельной строкой — их нельзя разорвать, — а ссылки
   ставим в один ряд под ним. Текст мельче и плотнее: подвал читают,
   когда ищут в нём что-то, а не по дороге. */
@media (max-width: 560px) {
  .door-foot {
    gap: 4px 14px; font-size: 11px; line-height: 1.25;
    padding: 0 18px clamp(14px, 2.5vh, 22px);
  }
  .door-foot > span:first-child { flex-basis: 100%; opacity: .72; }
}