/* ============================================================
   TEGRO NFT — лендинг домена likfool.ru
   Тема tegro-terminal (tokens.css). Только токены контракта.
   Композиция третья по счёту в кластере и не повторяет ни космос
   GusevCoin, ни книгу Terminus: здесь окно терминала, таблицы,
   развёртка ЭЛТ и цифровой дождь.
   ============================================================ */

/* ---------- фон: цифровой дождь + развёртка ---------- */
.rain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
.rain canvas{width:100%;height:100%;display:block}

.crt{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
/* Виньетка ЭЛТ: если затемнять сильно и рано, дождь на полях пропадает
   полностью и эффект оказывается нарисован впустую. */
.crt::after{content:"";position:absolute;inset:0;
  background:radial-gradient(140% 110% at 50% 45%,transparent 58%,rgba(0,0,0,.55));}

.flicker{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb,var(--accent-solid) 4%,transparent);
  animation:flick 7s steps(2,end) infinite;opacity:0}
@keyframes flick{0%,96%{opacity:0}97%{opacity:.5}98%{opacity:0}99%{opacity:.35}}

.page{position:relative;z-index:2}

/* ---------- строка состояния вместо привычной шапки ---------- */
.bar{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.bar__in{max-width:var(--maxw);margin:0 auto;padding:10px clamp(16px,4vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  font-size:var(--fs-1);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.bar__id{color:var(--accent-solid);font-weight:700;letter-spacing:.14em}
.bar__mid{display:flex;gap:var(--sp-5)}
.bar__mid a{transition:color var(--dur) var(--ease)}
.bar__mid a:hover{color:var(--accent-solid)}
@media (max-width:880px){.bar__mid{display:none}}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);
  box-shadow:0 0 8px var(--success);margin-right:var(--sp-2);vertical-align:middle;
  animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---------- кнопки-команды ---------- */
.cmd{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-weight:700;font-size:var(--fs-2);padding:12px 22px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.cmd--solid{background:var(--accent);color:var(--on-accent)}
.cmd--solid:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.cmd--wire{background:color-mix(in srgb,var(--accent-solid) 6%,transparent);color:var(--accent-solid);
  border-color:color-mix(in srgb,var(--accent-solid) 40%,transparent)}
.cmd--wire:hover{transform:translateY(-2px);border-color:var(--accent-solid);
  background:color-mix(in srgb,var(--accent-solid) 12%,transparent)}
.cmd--sm{padding:9px 16px;font-size:var(--fs-1)}
.cmd--lg{padding:16px 28px;font-size:var(--fs-3)}

/* ---------- окно терминала ---------- */
.term{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:var(--shadow-2)}
.term__bar{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-4);
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 80%,transparent);
  font-size:var(--fs-1);color:var(--text-muted);letter-spacing:.06em}
.term__lights{display:flex;gap:6px}
.term__lights i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.term__lights i:first-child{background:color-mix(in srgb,var(--danger) 70%,transparent)}
.term__lights i:nth-child(2){background:color-mix(in srgb,var(--warning) 70%,transparent)}
.term__lights i:last-child{background:color-mix(in srgb,var(--success) 70%,transparent)}
.term__body{padding:var(--sp-6) var(--sp-5)}

/* ---------- главный экран ---------- */
.hero{padding:var(--sp-8) 0 var(--sp-7)}
/* <pre> по умолчанию не переносит строки: на узком экране журнал уезжает
   вправо и обрезается. Переносим и на телефоне убавляем кегль. */
.boot{font-size:var(--fs-2);line-height:1.9;color:var(--text-muted);min-height:9.5em;
  white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:620px){.boot{font-size:var(--fs-1);line-height:1.7;min-height:11em}}
.boot b{color:var(--success);font-weight:400}
.boot .warn{color:var(--warning)}
.boot .hl{color:var(--accent-solid)}
.caret{display:inline-block;width:9px;height:1.05em;background:var(--accent-solid);
  vertical-align:-.18em;animation:caret 1.05s steps(1,end) infinite}
@keyframes caret{50%{opacity:0}}

.hero h1{margin-top:var(--sp-6);font-family:var(--font-display);font-size:var(--fs-8);
  font-weight:700;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--accent-solid);
  text-shadow:0 0 30px color-mix(in srgb,var(--accent-solid) 45%,transparent)}
.hero__lede{margin-top:var(--sp-5);max-width:62ch;color:var(--text-muted);font-size:var(--fs-3);line-height:1.7}
.hero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}

/* ---------- приборные значения ---------- */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--sp-6);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.gauges div{background:color-mix(in srgb,var(--surface) 90%,transparent);padding:var(--sp-4)}
.gauges b{display:block;font-size:var(--fs-5);color:var(--accent-solid);letter-spacing:-.01em}
.gauges span{display:block;margin-top:var(--sp-1);font-size:var(--fs-1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted)}
@media (max-width:760px){.gauges{grid-template-columns:1fr}}

/* ---------- секции с приглашением командной строки ---------- */
.sec{padding:var(--sp-8) 0}
.prompt{font-size:var(--fs-2);color:var(--text-muted)}
.prompt::before{content:"$ ";color:var(--accent-solid)}
.sec h2{margin-top:var(--sp-3);font-family:var(--font-display);font-size:var(--fs-7);
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.12}
.sec__note{margin-top:var(--sp-4);max-width:70ch;color:var(--text-muted);font-size:var(--fs-3);line-height:1.7}
.sec__head{margin-bottom:var(--sp-6)}
@media (max-width:640px){.sec h2{font-size:var(--fs-6)}}

/* ---------- таблица процессов вместо карточек ---------- */
.proc{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:color-mix(in srgb,var(--surface) 70%,transparent)}
.proc__row{display:grid;grid-template-columns:64px 1fr 116px;gap:var(--sp-4);
  padding:var(--sp-5);border-top:1px solid var(--line);align-items:start;
  transition:background var(--dur) var(--ease)}
.proc__row:first-child{border-top:0}
.proc__row:hover{background:color-mix(in srgb,var(--accent-solid) 5%,transparent)}
.proc__pid{font-size:var(--fs-1);color:var(--text-muted);letter-spacing:.08em;padding-top:3px}
/* name/desc — <span>'ы внутри <span>: без display:block имя процесса и описание
   склеиваются в одну строку (та же грабля, что в списке проектов). */
.proc__name{display:block;font-size:var(--fs-4);font-weight:700;color:var(--text)}
.proc__desc{display:block;margin-top:var(--sp-2);color:var(--text-muted);font-size:var(--fs-2);line-height:1.7}
.proc__state{justify-self:end;font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--success);border:1px solid color-mix(in srgb,var(--success) 40%,transparent);
  border-radius:var(--r-full);padding:4px 12px;white-space:nowrap}
@media (max-width:760px){
  .proc__row{grid-template-columns:1fr;gap:var(--sp-2)}
  .proc__state{justify-self:start}
}

/* ---------- лестница лиг ---------- */
.ladder{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.ladder span{font-size:var(--fs-1);letter-spacing:.08em;padding:7px 14px;border-radius:var(--r-full);
  border:1px solid var(--line);color:var(--text-muted);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.ladder span:last-child{border-color:color-mix(in srgb,var(--accent-solid) 50%,transparent);
  color:var(--accent-solid)}

/* ---------- шаги запуска ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-left:2px solid color-mix(in srgb,var(--accent-solid) 55%,transparent);
  border-radius:var(--r-sm);padding:var(--sp-5);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.step b{font-size:var(--fs-1);letter-spacing:.14em;color:var(--accent-solid)}
.step h3{margin-top:var(--sp-3);font-size:var(--fs-4);font-weight:700}
.step p{margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--fs-2);line-height:1.7}

/* ---------- ссылки внутри текста ----------
   Витрины «наши проекты» нет намеренно: карточки с чужими доменами читаются
   как спам и приписывают нам то, что нам не принадлежит. */
.ink{color:var(--accent-solid);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent-solid) 45%,transparent);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ink:hover{color:var(--text);border-color:var(--text)}

/* ---------- внутренние страницы: /guide, /leagues, /faq ---------- */
.doc{max-width:76ch;padding:var(--sp-8) 0}
.doc h1{font-family:var(--font-display);font-size:var(--fs-7);font-weight:700;
  text-transform:uppercase;line-height:1.1;letter-spacing:-.01em}
.doc__lede{margin-top:var(--sp-5);color:var(--text-muted);font-size:var(--fs-3);line-height:1.75}
.doc h2{margin-top:var(--sp-7);font-family:var(--font-display);font-size:var(--fs-5);font-weight:700;
  text-transform:uppercase}
.doc h2::before{content:"$ ";color:var(--accent-solid)}
.doc p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-2);line-height:1.8}
.doc ul{margin-top:var(--sp-4);padding-left:var(--sp-5);color:var(--text-muted);font-size:var(--fs-2);line-height:1.8}
.doc li{margin-top:var(--sp-2)}
.doc li::marker{color:var(--accent-solid)}
.doc table{width:100%;margin-top:var(--sp-5);border-collapse:collapse;font-size:var(--fs-2)}
.doc th,.doc td{padding:10px var(--sp-3);border-bottom:1px solid var(--line);text-align:left}
.doc th{color:var(--accent-solid);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-1)}
.doc td{color:var(--text-muted)}
.doc td:first-child{color:var(--text)}
.doc__back{display:inline-flex;gap:var(--sp-2);margin-top:var(--sp-7);font-size:var(--fs-1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  transition:color var(--dur) var(--ease)}
.doc__back:hover{color:var(--accent-solid)}
.doc__nav{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--line);font-size:var(--fs-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.doc__nav a:hover{color:var(--accent-solid)}

/* ---------- финальный экран ---------- */
.exec{text-align:center;border:1px solid color-mix(in srgb,var(--accent-solid) 28%,transparent);
  border-radius:var(--r-md);padding:var(--sp-8) var(--sp-5);
  background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--accent-solid) 10%,transparent),transparent 60%),
             color-mix(in srgb,var(--surface) 76%,transparent)}
.exec h2{font-family:var(--font-display);font-size:var(--fs-7);font-weight:700;text-transform:uppercase;
  line-height:1.1}
.exec p{max-width:56ch;margin:var(--sp-4) auto 0;color:var(--text-muted);font-size:var(--fs-3);line-height:1.7}
.exec .hero__cta{justify-content:center;margin-top:var(--sp-6)}

/* ---------- подвал ---------- */
.foot{border-top:1px solid var(--line);margin-top:var(--sp-8);padding:var(--sp-6) 0 var(--sp-8)}
.foot__top{display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;align-items:center;
  font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.foot__links{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.foot__links a{transition:color var(--dur) var(--ease)}
.foot__links a:hover{color:var(--accent-solid)}
.foot__note{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);
  color:var(--text-muted);font-size:var(--fs-1);max-width:92ch;line-height:1.8}

/* ---------- появление по скроллу ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .flicker,.caret,.dot{animation:none}
  .caret{opacity:1}
  .rise{opacity:1;transform:none;transition:none}
  .cmd:hover{transform:none}
}