/* Лендинг HTTP-туннелей /tunnels/http/ (layouts/tunnels_landing/). Ручной файл, не Tailwind: подключается
   только на этой странице (head.html), правила — под классом tunnels-landing на <html>.
   Описание и дизайн-система — website/tunnels-landing.md. */

/* IBM Plex: Sans — заголовки и текст, Mono — команды и код. Подмножества с Google Fonts:
   кириллица, латиница и расширенная латиница со знаком ₽. Sans — вариативный, одно начертание
   на 100–700. Лицензия OFL — рядом с файлами. Логотип tuna и запись терминала остаются
   в JetBrains Mono: в урезанном Plex Mono нет символов рамок и стрелок интерфейса tuna. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/IBMPlexSans-Variable-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/IBMPlexSans-Variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/IBMPlexSans-Variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/IBMPlexMono/IBMPlexMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/IBMPlexMono/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/IBMPlexMono/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/IBMPlexMono/IBMPlexMono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/IBMPlexMono/IBMPlexMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/IBMPlexMono/IBMPlexMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Палитра лендинга — Tailwind 3, в которой его рисовали и согласовывали. У Tailwind 4 сайта
   другие значения (OKLCH, заметно ярче синий и зелёный), а утилиты берут цвет из этих переменных.
   Фон блоков кода — bg-[#f5f5f5] (neutral-100 Tailwind 3), а не bg-neutral-100: этот класс стоит
   в текстах других страниц (i18n), и его появление в общем index.css перекрасило бы их. */
html.tunnels-landing {
  --color-gray-50: #f9fafb;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-blue-50: #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-green-100: #dcfce7;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
}

/* Текст без своего цвета и интерлиньяжа — как в макете. Размер (15 px в rem) задаёт корень
   страницы, чтобы на больших мониторах текст крупнел вместе с лендингом. */
html.tunnels-landing body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  line-height: 1.6;
  color: #333;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Шапка общая с сайтом (partials/header.html) и должна выглядеть как на остальных страницах.
   Там rem — это масштаб сайта: 4vw, от 64rem — min(1rem, 100vw/90) (_default/baseof.html).
   Утилиты Tailwind считают размеры от переменных темы, поэтому внутри шапки они пересчитаны
   от --site-rem. Новый text-* или rounded-* в шапке — добавить сюда. */
html.tunnels-landing body > header {
  --site-rem: 4vw;
  --spacing: calc(var(--site-rem) / 4);
  --text-xs: calc(var(--site-rem) * 0.75);
  --text-lg: calc(var(--site-rem) * 1.125);
  --text-2xl: calc(var(--site-rem) * 1.5);
  --text-4xl: calc(var(--site-rem) * 2.25);
  --radius-lg: calc(var(--site-rem) / 2);
  font-family: var(--font-mono);
  font-size: var(--site-rem);
  line-height: 1.5;
  color: #000;
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* rounded у Tailwind — .25rem напрямую, без переменной темы */
html.tunnels-landing body > header .rounded {
  border-radius: calc(var(--site-rem) / 4);
}

@media (min-width: 64rem) {
  html.tunnels-landing body > header {
    --site-rem: min(1rem, 100vw / 90);
  }

  /* У сайта шапка не шире 90rem. Здесь полоса во всю ширину окна, а в 90rem стоит её содержимое:
     край обрезанной полосы был бы виден на свечении hero */
  html.tunnels-landing body > header > :first-child {
    padding-inline: max(calc(var(--site-rem) * 5), calc(50% - var(--site-rem) * 40));
  }
}

/* Нулевая специфичность: стили проигрывателя (.ap-term) свой шрифт терминала не отдают */
:where(html.tunnels-landing) :where(code, kbd, pre) {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Мягкое свечение в тоне акцента (blue-100). Фон у секции без позиционирования, поэтому на ПК
   его закрывает растущий слой с паттерном. К низу уходит в белый, как следующий блок,
   сверху проявляется из белого: над секцией шапка сайта без нижней границы. */
html.tunnels-landing .tl-hero {
  background-image:
    linear-gradient(to bottom, #fff, transparent 8rem, transparent 75%, #fff),
    radial-gradient(52rem 38rem at 8% 25%, rgb(219 234 254 / 55%), transparent 70%),
    radial-gradient(46rem 34rem at 95% 10%, rgb(219 234 254 / 75%), transparent 70%);
}

/* Окно с заголовком рисует страница: у проигрывателя внутри — без своего скругления */
html.tunnels-landing .tl-hero-cast .ap-player {
  border-radius: 0;
}

/* Якорь «Тарифы» — плавно, если в системе не отключена анимация */
@media (prefers-reduced-motion: no-preference) {
  html.tunnels-landing {
    scroll-behavior: smooth;
  }
}

/* Шире 1920 px лендинг крупнеет целиком, как при масштабе браузера до 125 %: все размеры в rem.
   Потолок по высоте экрана, чтобы на широком, но невысоком мониторе первый экран не вылезал вниз. */
@media (min-width: 1920px) {
  html.tunnels-landing {
    font-size: clamp(16px, min(0.8333vw, 1.6vh), 20px);
  }

  /* Шапка не крупнеет: 1rem здесь уже масштаб лендинга, а у сайта на этой ширине — 16 px */
  html.tunnels-landing body > header {
    --site-rem: 16px;
  }
}